easyui是一個(gè)基于jQuery的UI框架，其中包含了眾多組件，如表格、彈窗、樹(shù)形菜單等等。其中使用JSON來(lái)讀取和操作數(shù)據(jù)是easyui的一大特點(diǎn)。

使用JSON來(lái)操作數(shù)據(jù)可以減少后端的負(fù)擔(dān)，而且JSON格式更加符合前端的解析和操作習(xí)慣。下面介紹easyui中如何使用JSON來(lái)實(shí)現(xiàn)表格數(shù)據(jù)的讀取和操作。

// 定義表格
$('#table').datagrid({
url: 'dataUrl',           // 數(shù)據(jù)來(lái)源url
method: 'post',           // 數(shù)據(jù)請(qǐng)求方式
queryParams: {},          // 數(shù)據(jù)請(qǐng)求參數(shù)
rownumbers: true,         // 序號(hào)列
pagination: true,         // 分頁(yè)
pageSize: 10,             // 每頁(yè)行數(shù)
pageList: [10, 20, 30],   // 每頁(yè)行數(shù)選擇器
toolbar: '#toolbar',      // 工具欄
columns: [[{
field: 'name',
title: '姓名',
width: 100
}, {
field: 'age',
title: '年齡',
width: 100
}, {
field: 'gender',
title: '性別',
width: 100
}]]
});
// 數(shù)據(jù)格式為JSON
var dataJson = {
"total": 50,
"rows": [{
"name": "張三",
"age": 20,
"gender": "男"
}, {
"name": "李四",
"age": 25,
"gender": "男"
}, {
"name": "王五",
"age": 30,
"gender": "女"
}]
};
// 給表格賦值
$('#table').datagrid('loadData', dataJson);

以上代碼就是在easyui中使用JSON來(lái)實(shí)現(xiàn)表格數(shù)據(jù)的讀取和操作，使用JSON格式更加符合前端的解析和操作習(xí)慣，也更加方便實(shí)現(xiàn)數(shù)據(jù)的讀取和操作。