easyui_treegrid异步加载及分页解决方案
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
$(function () {
$('#tt').treegrid({
url: 'GetTreeData?timer=' + Math.random(),
method: 'get',
idField: 'id',
treeField: 'name',
iconCls: 'icon-ok',
pageSize: 10,
pageList: [10, 20, 50],
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
pagination: true,
columns: [[
{ title: 'name', field: 'name', width: 180 },
{ field: 'code', title: 'code', width: 60, align: 'left' },
]],
//点击父节点,异步加载数据
onBeforeLoad: function (row, param) {
if (row) {
$(this).treegrid('options').url =
'GetTreeData?page=1&rows=999&pid=' + row.MaterialCategoryId;
}
}
});
//点击分页按钮,加载下一页数据
$('#tt').datagrid("getPager").pagination({
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
$('#tt').treegrid('options').url = 'GetTreeData?page=' + pageNumber + '&rows=' + pageSize;
$('#tt').treegrid('reload');
$(this).pagination('loaded');
}
});
})
//需要注意的是:后台的GetTreeData方法,需要写成分页sql返回数据的形式
返回数据形式:
主数据
{"total":1,"rows":[{"id":203,"code":"0102","name":"name1","_parentId":0,"iconCls":"icon-ok","state ":"closed"}]
点击父节点异步加载数据
{"total":1,"rows":[{"id":204,"code":"010201","name":"name2","_parentId":203,"iconCls":"icon-ok"," state":""}]}