EasyUI是一款基于jQuery的UI框架,具有簡單易用、擴展性強等特點。其中一個核心特點是支持對JSON格式的數據進行快速展示。
使用EasyUI展示JSON格式數據需要使用兩個模塊:datagrid和treegrid。Datagrid用于表格形式的展示,Treegrid則支持樹狀結構的數據展示。
具體使用方法如下:
//datagrid展示JSON格式數據 $('#datagrid').datagrid({ url: 'data.json', // 數據來源url columns: [[ // 列定義 {field:'id',title:'ID',width:80}, {field:'name',title:'Name',width:120}, {field:'amount',title:'Amount',width:80} ]] }); //treegrid展示JSON格式數據 $('#treegrid').treegrid({ url: 'data.json', // 數據來源url idField:'id', // 指定ID字段,用于節點識別 treeField:'name', // 指定tree字段,用于進行樹形結構展示 columns: [[ // 列定義 {field:'id',title:'ID',width:80}, {field:'name',title:'Name',width:120}, {field:'amount',title:'Amount',width:80} ]] });
JSON格式數據需要滿足以下要求:
[ { "id":1, "name":"John", "amount":100 }, { "id":2, "name":"Mary", "amount":200 }, ... ]
在JSON數據中,頂層數據必須為數組格式,數組中的每個元素代表一行數據。每行數據可以有多個字段,字段名需要和列定義中的field值匹配。
EasyUI支持對JSON數據進行排序、分頁等常見的數據處理,使得數據展示更加便捷。