easyui是一款非常優秀的前端UI框架,它的使用非常簡單,可以快速地構建漂亮的UI界面。在easyui中,我們可以很方便地調用JSON數據。
首先,我們需要準備好要調用的JSON數據,可以是從服務器端獲取,也可以是我們本地的一個JSON文件。接著,我們需要在easyui界面中添加一個datagrid,同時設置好它的columns,如下所示:
$('#datagrid').datagrid({ url: 'data.json', // JSON數據的地址 columns:[[ {field:'id',title:'ID',width:80}, {field:'name',title:'姓名',width:100}, {field:'age',title:'年齡',width:80}, {field:'sex',title:'性別',width:100}, {field:'email',title:'郵箱',width:150}, {field:'phone',title:'電話',width:100} ]], pagination:true, // 顯示分頁 rownumbers:true, // 顯示行號 });
在上面的代碼中,我們通過url屬性指定了要調用的JSON數據的地址,同時設置了datagrid的columns、pagination和rownumbers屬性。
最后,我們只需要保證JSON數據按照datagrid中columns的順序進行排列即可,如下所示:
[ {"id":"1","name":"張三","age":"20","sex":"男","email":"zhangsan@test.com","phone":"13012345678"}, {"id":"2","name":"李四","age":"22","sex":"男","email":"lisi@test.com","phone":"13512345678"}, {"id":"3","name":"王五","age":"24","sex":"女","email":"wangwu@test.com","phone":"13712345678"} ]
通過以上方法,我們就可以很方便地調用JSON數據并顯示在easyui的datagrid中了。