【easyui】treeGrid实现分页以及异步加载子节点

前提纪要

项目中有这样一个需求，在合同列表中，每一个合同下面会有很多子合同，需要按照树形结构进行显示。同时，对于父合同需要进行分页显示。

框架使用

easyUI + springMvc

主要工作

1. 实现合同的分页显示
2. 实现点击父合同，能够展开，异步加载子节点，并且不重复加载

代码实现

SpringMvc端代码

返回父合同的dataGrid列表-controller层

    @ResponseBody
    @RequestMapping("/queryOtherContract")
    public DataGrid queryOtherContract() {
        try {
            return otherContractService.queryOtherContract();
        } catch (Exception e) {
            log.error(e);
        }
        return null;
    }

返回父合同的dataGrid列表-intf层

DataGrid queryOtherContract();

返回父合同的dataGrid列表-impl层

@Override
    public DataGrid queryOtherContract(String keyWords, Long projectId, Long pid) {

        List<OtherContractBean> result = new ArrayList<OtherContractBean>();
        //自己建一个实体，里面内容随便建，只要有id，和name和state就可以
        //state = closed，列表图标是文件夹，可以打开
        //state = open，列表图标是文件，不可以打开
        return new DataGrid(result, 30L);
    }

页面显示父合同的treeGrid代码

html代码

<div data-options="region:'center',border:false"
         style="border:0px;overflow: hidden;margin-left:5px;margin-right:5px;">
        <table id="treeGrid"></table>
    </div>

js代码

function initDataGrid() {
        treeGrid = $("#treeGrid").treegrid({
            nowrap: true,
            fit: true,
            border: false,
            method: 'GET',
            rownumbers: true,//显示行号
            collapsible: false,//定义面板是否可以折叠
            loadMsg: "正在加载信息请稍候...",
            animate: false,
            idField: 'id',                //数据表格要有主键
            treeField: 'name',            //treegrid 树形结构主键 text
            fitColumns: false,//表格自动适应
            striped: false,//隔行变色,
            pagination: true,//底部显示工具栏组件
            pageSize: 20,
            pageList: [1, 20, 30, 40, 50],//每页显示数
            frozenColumns: [[{
                field: 'id',
                title: 'id',
                hidden: true
            }, {
                field: 'name',
                title: '合同名称',
                width: 200,
                align: 'center',
                sortable: true,
                formatter: linkValueFormatter
            }]],
            onLoadSuccess: function (data) {
                delete $(this).treegrid('options').queryParams['id'];
            },
            onContextMenu: function (e, row) {
                e.preventDefault();                    //屏蔽浏览器的菜单
                $(this).treegrid('unselectAll');    //清除所有选中项
                if ($("#menu > div").size() > 1) {
                    $('#menu').menu('show', {
                        left: e.pageX - 10,
                        top: e.pageY - 5
                    });
                }
            },
            onBeforeExpand: function (row, param) {
                var tg = $(this);//当前页面
                var opts = tg.treegrid('options');//获取属性表格的属性对象
                if (row.state == "closed" && row.children == undefined) {
                    $.post("${pageContext.request.contextPath}/cost/otherContract/queryOtherChildrenContract.do?pid=" + row.id, function (json) {
                        if (json) {
                            tg.treegrid('append', {
                                parent: row[opts.idField],//父节点id
                                data: json
                            });
                        } else {
                            layer.alert("error", {icon: 5, time: 1000});
                        }
                    }, "JSON");
                }
            },
            onClickCell: function (rowIndex, field, value) {//单元格点击事件
                //treeGrid 单元格点击特有写法，不要与dataGrid混淆
                if (rowIndex == 'name') {
                    //点击事件
                }
            }
        });
    }

效果

异步加载子节点的后台代码

返回子合同的dataGrid列表-controller层

@ResponseBody
    @RequestMapping("/queryOtherChildrenContract")
    public List<OtherContractBean> queryOtherChildrenContract(Long pid) {
        try {
            return otherContractService.queryOtherChildrenContract(pid);
        } catch (Exception e) {
            log.error("查询其他合同变更信息异常", e);
        }
        return null;
    }

返回子合同的dataGrid列表-intf层

List<OtherContractBean> queryOtherChildrenContract(Long pid);

返回子合同的dataGrid列表-impl层

@Override
    public List<OtherContractBean> queryOtherChildrenContract(String keyWords, Long projectId, Long pid) {
        List<OtherContractBean> result = new ArrayList<OtherContractBean>();
        //自己建一个实体，里面内容随便建，只要有id，和name就可以
        return result;
    }

加载子节点效果

关键点讲解

1. 查询父合同时，我返回的是一个dataGrid对象，该对象中保存了总total和当前页面需要显示的rows两个对象，根据total进行分页
2. 父合同实体对象中，需要加入一个属性，state。state = closed时，该列的名称前面， treeGrid会自动加一个文件夹的图标，表明该列是可以展开的
3. 在treegrid初始化的函数中，调用了onBeforeExpand函数，也就是在展开之前，我需要对该行数据进行判断，是否有数据需要异步加载。
4. onBeforeExpand函数讲解

onBeforeExpand: function (row, param) {
                var tg = $(this);//当前页面
                var opts = tg.treegrid('options');//获取属性表格的属性对象
                //判断该行是否能够打开，根据state属性
                //根据children属性判断，该行是否已经加载了子节点，如果已经加载了，则直接展开
                if (row.state == "closed" && row.children == undefined) {

                //通过post方法，去后台取子合同的数据                   $.post("${pageContext.request.contextPath}/cost/otherContract/queryOtherChildrenContract.do?pid=" + row.id, function (json) {

                        if (json) {
                        //如果有子合同数据，则使用append的方式，追加到当前父节点的下方
                            tg.treegrid('append', {
                                parent: row[opts.idField],//父节点id
                                data: json
                            });
                        } else {
                            layer.alert("error", {icon: 5, time: 1000});
                        }
                    }, "JSON");
                }
            },

后记

我不知道是否还有其他方式能实现这一功能，如果有更好的方法，欢迎大家一起来讨论。