EasyUI是一個基于jQuery的用戶界面插件庫。它提供了易于使用的UI組件,例如列表、表格、對話框、進度條等等。而在EasyUI中調用數據時,我們可以使用JSON格式的數據。JSON(JavaScript Object Notation)是一種輕量級的數據交換格式,易于人們理解和機器處理。使用JSON數據格式在EasyUI中跨越AJAX請求數據更加方便快捷。
下面舉一個例子,在EasyUI的datagrid(數據表格)中我們可以使用以下代碼調用JSON數據:
$('#tt').datagrid({ url: 'datagrid_data.json', method: 'get', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:100}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:250}, {field:'status',title:'Status',width:60,align:'center'} ]] });
解釋以上代碼,我們可以看到通過url參數指定了JSON數據的來源(這里為'datagrid_data.json'),method參數指定請求方法為GET,在columns中設置了表格的列名和顯示寬度等相關屬性。其中的JSON數據格式可以如下:
[ { "itemid": "EST-1", "productid": "FI-SW-01", "listprice": "10.00", "unitcost": "9.01", "attr1": "Large", "status": "P" }, { "itemid": "EST-2", "productid": "K9-DL-01", "listprice": "16.50", "unitcost": "13.00", "attr1": "Spotted Adult Female", "status": "P" }, ... ]
使用EasyUI調用JSON數據十分方便,只需要按照規范設置數據的來源和格式,然后在頁面的代碼中調用就行了。因此學習和掌握JSON數據格式對于EasyUI的應用是很重要的一步。
上一篇vue做動畫效果