在Web開發中,datagrid(數據表格)是一個常用的數據展示組件。在前后端分離的架構下,我們通常會使用ajax技術獲取后端返回的json數據,并通過datagrid組件展示到前端頁面。
//ajax獲取data.json數據 $.ajax({ url: "data.json", dataType: "json", success: function(data){ $('#datagrid').datagrid({ columns: [[ {field:'id', title:'編號'}, {field:'name', title:'姓名'}, {field:'age', title:'年齡'} ]], data: data }); } });
以上代碼中,我們使用jquery的ajax方法獲取名為data.json的json文件數據。在請求成功后,我們通過id選擇器獲取datagrid組件并使用datagrid方法初始化它。其中,columns參數指定了datagrid的表頭信息,data參數指定了datagrid的數據信息。
在data.json文件中,數據以json格式存儲。示例如下:
{ "total": 3, "rows": [ {"id": "0001", "name": "Tom", "age": 18}, {"id": "0002", "name": "Jack", "age": 20}, {"id": "0003", "name": "Lucy", "age": 19} ] }
在json數據中,total表示數據總數,rows表示每行數據信息。我們需要注意的是,datagrid的data參數需要傳入一個數組,而rows是一個包含多個json對象的數組。
以上就是關于使用datagrid和data.json展示數據的簡單介紹,期望對大家有所幫助。