easyui官网给的treegrid的分页是相当的复杂,我们来简化一下!
首先treegrid 分页和 datagrid一样需要设置一系列参数!
如下:
depTreeGrid=$("#dep_tree_grid").treegrid({
nowrap: true,
fit : true,
border : false,
method:'GET',
rownumbers: true,//显示行号
collapsible:true,//定义面板是否可以折叠
loadMsg:"正在加载信息请稍候...",
animate:true,
url:ctxPath+"/sys/deps",
idField:'id', //数据表格要有主键
treeField:'depName', //treegrid 树形结构主键 text
fitColumns:true ,//表格自动适应
striped:true,//隔行变色,
pagination:true,//底部显示工具栏组件
pageSize:1,
pageList:[1,20,30,40,50],//每页显示数
sortName:'depSort',
sortOrder:'asc',
columns:[[
{field:'depName',title:'部门名称',width:200} ,
{field:'remark',title:'部门描述路径',width:120} ,
{field:'depSort',title:'部门排序',width:120,sortable:true} ,
{field:'createTime',title:'创建时间',width:120} ,
]],
onLoadSuccess:function(data){
delete $(this).treegrid('options').queryParams['id'];
},
onContextMenu: function(e,row){
e.preventDefault(); //屏蔽浏览器的菜单
$(this).treegrid('unselectAll'); //清除所有选中项
$(this).treegrid('select', row.id); //选中状态
$('#dep').menu('show', {
left: e.pageX,
top: e.pageY
});
},
toolbar: "#dep_tb",
});
});
翻页返回的格式是
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
点击tree请求返回的数据是
[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]
在点击 treegrid 会传一个id,所以在后端处理的时候,根据id来做处理
@GetMapping @ResponseBody public Object list(int page,int rows,String sort,String order, @RequestParam Map<String,Object> params,@RequestParam(defaultValue="0") String id ){ if("0".equals(id)){ PageInfo pageInfo = new PageInfo(page,rows, sort, order); params.put("id", id); pageInfo.setCondition(params); return sysDepartmentService.selectList(pageInfo); }else{ return sysDepartmentService.selectList(id); } }
但是点完treegrid之后,再翻页,easyui会将id再传过去,所以我们需要在
onLoadSuccess:function(data){
delete $(this).treegrid('options').queryParams['id'];
},
这样就可以完成treegrid分页操作!
全文完,感谢您的耐心阅读~
欢迎大家关注我的公众号
![](https://img2020.cnblogs.com/blog/945445/202008/945445-20200817142938521-1981960238.png)