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

末蓝、 2022-06-13 06:21 781阅读 0赞

## 前提纪要 ##

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

## 框架使用 ##

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代码**

**js代码**

### 效果 ###

![这里写图片描述][SouthEast]

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

**返回子合同的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;
        }

### 加载子节点效果 ###

![这里写图片描述][SouthEast 1]

## 关键点讲解 ##

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");
                    }
                },

## 后记 ##

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

[SouthEast]: /images/20220613/f49e4533c4234807ba6a1cd297434aab.png
[SouthEast 1]: /images/20220613/96c9bd98995346359c92a26e77b63a1c.png