在使用Datagrid加載本地json時,我們可以通過以下步驟來實現:
1.定義一個datagrid表格:
<table id="datagrid"></table>
2.配置datagrid的列和數據源:
$('#datagrid').datagrid({ columns: [[ {field:'name',title:'Name',width:100}, {field:'age',title:'Age',width:100} ]], data: [ {name:'張三',age:20}, {name:'李四',age:21}, {name:'王五',age:22}, {name:'趙六',age:23} ] });
3.將json數據保存到本地文件中,例如data.json:
[ {"name":"張三","age":20}, {"name":"李四","age":21}, {"name":"王五","age":22}, {"name":"趙六","age":23} ]
4.使用ajax請求獲取json數據,并填充到datagrid表格中:
$.ajax({ type: "GET", url: "data.json", dataType: "json", success: function(data){ $('#datagrid').datagrid('loadData', data); } });
5.另一種方法是直接將json數據保存到變量中:
var data = [ {"name":"張三","age":20}, {"name":"李四","age":21}, {"name":"王五","age":22}, {"name":"趙六","age":23} ]; $('#datagrid').datagrid('loadData', data);
通過以上步驟,我們可以輕松地將本地json數據加載到datagrid中,實現數據的可視化展示。