轉載：
https://www.cnblogs.com/huangf714/p/5835669.html
EasyUI比較常用，其中的datagrid比較復雜，它有其中有load,reload,loadData這三個方法，它們都有相同的功能，都是加載數據的，但又有區別。
load方法，比如我已經定義一個datagrid的id為grid，那這個方法的使用方式為
$(“#grid”).datagrid(“load”,{ });
它的參數為一個json對象，里面寫的是你要傳輸的參數的鍵值對，調用這個方法來加載數據的時候，它傳給后台的分頁信息是從第一頁開始的。
reload方法，使用方式也跟load的一樣
$(“#grid”).datagrid(“reload”,{ });
看它的名字應該就可以知道它的做用了，沒錯，它跟load一樣有加載數據功能，也一樣的傳參數，但它傳給后台的分布信息是當前的頁碼，就是實現刷新當前頁的功能。
loadData方法，這個方法有比較大的不同，首先它加載的本地數據，就是不會跟后台什么的有交互，它的使用方式是
$(“#grid”).datagrid(“loadData”,{ “total”:”30″,rows:[] });
看到沒，它是比較靈活的，可以設置分頁信息的，total就是行數嘛，當然你也可以設置它的當前頁，而它那個rows屬性設的就是你所要加載的行的集合。
var bbc="";
$(function(){
$("#test").datagrid({
loadFilter: function (data){bbc=data;return bbc;},
/*loadFilter: function (data) {
for (var i = 0; i < data.rows.length; i++) {
for (var att in data.rows[i]) {
if (typeof (data.rows[i][att]) == "string") {
data.rows[i][att] = data.rows[i][att].replace(/</g, "<").replace(/>/g, ">");
}
}
}
return data;
} ,*/
title:'My DataGrid',
//iconCls:'icon-save',
//nowrap: false,
//striped: true,
//collapsible:true,
url:'datagrid_data001.json',
//sortName: 'code',
//sortOrder: 'desc',
//remoteSort: false,
singleSelect:true,
rownumbers:true,
idField:'code',
frozenColumns:[[
/*{field:'ck',checkbox:true},*/
{title:'退貨單號',field:'code',width:80,sortable:true, rowspan:2}
]],
columns:[[
{title:'退貨單明細',colspan:3},
{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:#08f;cursor:pointer;" onclick="kankan(this)">查看</span>';
}
}
],[
{field:'name',title:'申請人',width:100},
{field:'money',title:'申請金額',width:100,rowspan:2,sortable:true,
sorter:function(a,b){
return (a>b?-1:1);
}
},
{field:'col4',title:'審核狀態',width:100,rowspan:2}
]]
});
})
function kankan(she){
var bb=$(she).parent().parent().parent().attr("datagrid-row-index");
/*alert(bb);
$("#test").datagrid('selectRow',0)
var row=$("#test").datagrid('getSelected');
alert(row.id)*/
var ccb={total:bbc.total,rows:[bbc.rows[bb]]}
/*var ccb='"total"';
ccb=ccb+":";
ccb=ccb+bbc.total;
ccb=ccb+",";
ccb=ccb+'"rows":';
ccb=ccb+"[";
ccb=ccb+bbc.rows[bb];
ccb=ccb+"]";*/
$('#win').window({
width:600,
height:400,
modal:true,
collapsible:false,
minimizable:false,
maximizable:false
});
//$("#win").text(item.address);
$("#win").datagrid({
//rowStyler:function(bb,bb){return 'background:#fff'},
//url:'datagrid_data001.json',
singleSelect:true,
columns:[[{title:'退貨單號',field:'code',width:80,align:'center'},
{field:'name',title:'申請人',width:100,align:'center'},
{field:'money',title:'申請金額',width:100,align:'center'},
{field:'col4',title:'審核狀態',width:100,align:'center'},
{field:'address',title:'地址',width:180,align:'center'}
]]
})
//alert(bbc.total);
$(function(){ $('#win').datagrid('loadData', ccb); /*alert('here');*/})
}
數據源
{
"total":10456239,
"rows":[
{"id":"1","code":"001","name":"張一一","money":"$ 129.00","col4":"待審核","address":" Shanghai Pudong China1"},
{"id":"2","code":"002","name":"張一二","money":"$ 119.00","col4":"待審核","address":" Anhai Pudong China2"},
{"id":"3","code":"003","name":"張一三","money":"$ 128.00","col4":"待審核","address":" Shanghai Pudong China3"},
{"id":"4","code":"004","name":"張一四","money":"$ 118.00","col4":"待審核","address":" Anhai Pudong China4"},
{"id":"5","code":"005","name":"張一五","money":"$ 109.00","col4":"待審核","address":" Shanghai Pudong China5"},
{"id":"6","code":"006","name":"張一六","money":"$ 109.00","col4":"待審核","address":" Anhai Pudong China6"},
{"id":"7","code":"007","name":"張一七","money":"$ 159.00","col4":"待審核","address":" Anhai Pudong China7"},
{"id":"8","code":"008","name":"張一八","money":"$ 158.00","col4":"待審核","address":" Anhai Pudong China8"},
{"id":"9","code":"009","name":"張一九","money":"$ 156.00","col4":"待審核","address":" Shanghai Pudong China9"},
{"id":"10","code":"010","name":"張一十","money":"$ 158.00","col4":"待審核","address":" Shanghai Pudong China10"}
]
}
html
<body>
<div id="win" title="My Window"></div>
<table id="test"></table>
</body>
loadData ： 參數(data) 加載本地數據，舊的行會被移除。
loadFilter : 類型(function) 返回過濾的數據去顯示。這個函數需要一個參數'data'，表示原始數據。你可以把原始數據變成標准數據格式，此函數必須返回標准數據對象，含有 'total' 和 'rows' 特性。