EasyUI是一款非常流行的前端UI框架,它提供了許多方便易用的組件,包括表單,表格,對話框等。其中,json顯示組件也是非常重要的一個組件。
使用EasyUI的json顯示組件,我們可以很方便地將json數據顯示在頁面上。以下是一個例子:
$(function(){ var data = {"name":"張三","age":18,"sex":"男"}; $('#json').html(JSON.stringify(data)); }); <div id="json"></div>
在這個例子中,我們使用jQuery的html方法將一個json對象轉換為字符串,并顯示在頁面上的一個div中。這樣就可以顯示出如下的效果:
{ "name":"張三", "age":18, "sex":"男" }
當然,如果想要顯示更加復雜的json數據,也可以使用EasyUI提供的json顯示組件。以下是一個簡單的例子:
$('#json').datagrid({ data: [{"name":"張三","age":18,"sex":"男"},{"name":"李四","age":20,"sex":"女"}], columns:[[ {field:'name',title:'姓名',width:100}, {field:'age',title:'年齡',width:100}, {field:'sex',title:'性別',width:100} ]] }); <table id="json"></table>
在這個例子中,我們使用EasyUI的datagrid組件來顯示json數據。其中,data屬性用來指定要顯示的json數據,columns屬性用來指定表格的列數和名稱。這樣就可以顯示出一個表格來,如下所示:
姓名 | 年齡 | 性別 |
---|---|---|
張三 | 18 | 男 |
李四 | 20 | 女 |
以上就是關于EasyUI json顯示的介紹,希望能夠對大家有所幫助。
上一篇vue修改div位置