easyui是一款基于jQuery的簡(jiǎn)單易用的UI框架,它提供了許多常用的UI組件,可用于快速搭建網(wǎng)頁(yè)界面。同時(shí),easyui也可以很方便地加載json數(shù)據(jù)。
$('#datagrid').datagrid({ url: 'data.json', method: 'get', dataType: 'json', columns: [[ {field:'name',title:'姓名',width:100}, {field:'age',title:'年齡',width:100}, {field:'sex',title:'性別',width:100}, {field:'address',title:'地址',width:100} ]] });
其中,url為數(shù)據(jù)來(lái)源,method為請(qǐng)求方式,dataType為數(shù)據(jù)類型,columns為數(shù)據(jù)列的配置信息。
加載完數(shù)據(jù)后,可以在表格中顯示出來(lái):
{ "total": 3, "rows": [ { "name": "張三", "age": 18, "sex": "男", "address": "北京市" }, { "name": "李四", "age": 20, "sex": "女", "address": "上海市" }, { "name": "王五", "age": 22, "sex": "男", "address": "廣州市" } ] }
其中total為數(shù)據(jù)總數(shù),rows為數(shù)據(jù)內(nèi)容。