easyui 加載json數(shù)據(jù)格式

在前端開發(fā)中，我們經(jīng)常需要從后臺獲取 json 格式的數(shù)據(jù)。而 EasyUI 提供了方便的函數(shù)來加載這些 json 數(shù)據(jù)，本文將介紹如何使用 EasyUI 來加載 json 數(shù)據(jù)。

加載 json 數(shù)據(jù)需要使用 EasyUI 的 datagrid 組件。當我們需要加載 json 數(shù)據(jù)時，我們可以使用 datagrid 的 url 屬性來指定數(shù)據(jù)源的 URL 地址。我們還可以定義 datagrid 的 columns、rownumbers 和 pagination 屬性來設(shè)置表格的格式和功能。

$(function(){
$('#dg').datagrid({
url:'data.json',
columns:[[
{field:'id',title:'ID',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100},
{field:'quantity',title:'Quantity',width:100},
]],
rownumbers:true,
pagination:true,
pageList:[10,20,30]
});
});

在上面的代碼中，我們定義了一個 datagrid 組件，并指定了它的數(shù)據(jù)源為 data.json。我們還定義了表格的列、行號和分頁符。其中，columns 屬性用于設(shè)置列的字段名和格式，rownumbers 屬性用于設(shè)置是否顯示行號，pagination 屬性用于設(shè)置是否顯示分頁符，pageList 屬性用于設(shè)置每頁顯示的記錄數(shù)，此處為10,20,30。

在以上代碼中，我們假設(shè)數(shù)據(jù)源文件名為 data.json，文件格式如下：

[
{id:1,name:'Product 1',price:100,quantity:50},
{id:2,name:'Product 2',price:200,quantity:30},
{id:3,name:'Product 3',price:150,quantity:40},
{id:4,name:'Product 4',price:120,quantity:60},
{id:5,name:'Product 5',price:180,quantity:20}
]

在數(shù)據(jù)源中，我們定義了一個數(shù)組，其中每個元素都是一個產(chǎn)品項。每個產(chǎn)品項都包括一個 ID、名稱、價格和數(shù)量。這些字段與我們在 datagrid 中定義的列是對應(yīng)的。

當我們加載這些 json 數(shù)據(jù)時，datagrid 會自動將數(shù)據(jù)顯示在表格中，如下：