Easyui是一個非常常用的前端開發框架,其中的datagrid控件可以方便地展示json數據。下面是一個演示案例:
<!-- HTML代碼 --> <table id="datagrid"></table> <!-- JS代碼 --> $(function() { $('#datagrid').datagrid({ url: 'data.json', // json數據的文件路徑 method: 'get', columns: [[ {field:'name', title:'姓名'}, {field:'age', title:'年齡'}, {field:'gender', title:'性別'} ]] }); });
在以上代碼中,我們首先在HTML中定義了一個id為“datagrid”的表格。然后在JS中使用了該表格的id來初始化datagrid控件。其中的url屬性指定了json數據的文件路徑,method屬性指定了請求方式(默認為“post”)。columns數組中定義了要顯示的列,其中的field對應json數據中的字段名,title則是表格中對應列頭的顯示文字。
最終,這個datagrid控件會根據提供的json數據自動展示出來。