easyui datagrid 是一種常用的數(shù)據(jù)展示方式,通過渲染表格的形式將數(shù)據(jù)呈現(xiàn)給用戶。其中,它可以非常方便地展示 JSON 格式的數(shù)據(jù)。具體使用方法如下:
// HTML 界面中引入 easyui.css 和 easyui.js <link rel="stylesheet" type="text/css" href="easyui.css"> <script type="text/javascript" src="easyui.js"></script> // 在 HTML 頁面中添加 easyui datagrid,通過 url 屬性指定數(shù)據(jù)來源 <table id="datagrid" class="easyui-datagrid" title="數(shù)據(jù)列表" style="width:100%;height:auto;" url="jsondata.json" pagination="true" rownumbers="true" singleSelect="true"> <thead> <tr> <th field="name" width="50">姓名</th> <th field="age" width="50">年齡</th> <th field="address" width="100">地址</th> </tr> </thead> </table> // 編寫 jsondata.json 文件,其中 data 屬性存放數(shù)據(jù) { "total":3, "data":[ {"name":"張三","age":20,"address":"北京"}, {"name":"李四","age":22,"address":"上海"}, {"name":"王五","age":18,"address":"廣州"} ] }
在以上代碼中,可以看到我們通過設(shè)置 easyui datagrid 的 url 屬性為 json 數(shù)據(jù)文件的路徑,easyui 會(huì)自動(dòng)解析文件中的 data 數(shù)據(jù)并展示到表格中。