EasyUI是基于jQuery的UI插件,可快速地創建美觀的UI界面。它支持加載JSON數據并在界面中展示。下面是在EasyUI中加載JSON數據的代碼示例:
$(function(){ $('#datagrid').datagrid({ url:'data.json', columns:[[ {field:'name',title:'Name',width:100}, {field:'age',title:'Age',width:100}, {field:'sex',title:'Sex',width:100} ]] }); });
在上面的代碼中,我們使用了 Datagrid 控件并在其 url 屬性中指定了 JSON 數據的URL。columns定義了數據表中的列。EasyUI會自動解析JSON數據并渲染到表格中。
下面是我們在data.json文件中存儲的樣本數據:
{ "total": 3, "rows": [ { "name": "Tom", "age": 18, "sex": "Male" }, { "name": "Lucy", "age": 20, "sex": "Female" }, { "name": "Jack", "age": 22, "sex": "Male" } ] }
上面的JSON數據包含了一個總數total和一個數據數組rows。數據數組中的每個元素都是一個對象,代表了一個數據行。在這個例子中,每個數據行都包含了name, age, 和 sex三個字段。
通過使用EasyUI加載JSON數據,我們可以快速地創建功能強大、美觀的數據表格,并可輕松地處理和展現數據。