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",
        });
    });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.

 

翻页返回的格式是

{"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);
        }
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

 

 

 但是点完treegrid之后，再翻页，easyui会将id再传过去，所以我们需要在

onLoadSuccess:function(data){
                delete $(this).treegrid('options').queryParams['id'];  
},
  • 1.
  • 2.
  • 3.

 

 

 

这样就可以完成treegrid分页操作！