easyUI treeGrid异步加载，前端+后台实现，包括增删改等具体功能

本文链接：https://blog.csdn.net/hwj3747/article/details/52093877

说明

前端使用的是easyUI 1.3.6+jq
后台使用的是springMVC
初始化调用后台getCourse方法，返回的json数据格式如下：

{"total":3,"rows":[
    {"id":1,"typeName":"All Tasks","description":"3/4/2010","sort":"3/20/2010"},
    {"id":2,"typeName":"All Tasks","description":"3/4/2010","sort":"3/20/2010","_parentId":1},
        {"id":3,"typeName":"All Tasks","description":"3/4/2010","sort":"3/20/2010","_parentId":2}]
    }

保存一行数据，用js取得row的数据，再转化为json，调用saveCourseType传到后台。
删除一行，取得行id，调用deleteCourseType删除数据。

前端代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CheckBox Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/js/easyui-1.3.6/themes/metro-blue/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/js/easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/js/css/demo.css">
    <script type="text/javascript" src="<%=contextPath%>/js/easyui-1.3.6/jquery.min.js"></script>
    <script type="text/javascript" src="<%=contextPath%>/js/easyui-1.3.6/jquery.easyui.min.js"></script>

<title>可编辑的表格树</title>
</head>
//菜单栏
<div data-options="region:'north',title:''"
        style="height: 25px; padding: 5px;">
        <a href="#" class="easyui-linkbutton"
            data-options="iconCls:'icon-edit'" onclick="beginEdit()">编辑</a> <a
            href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
            onclick="saveEdit()">保存编辑</a> <a href="#" class="easyui-linkbutton"
            data-options="iconCls:'icon-add'" onclick="appendRoot()">新增根目录</a> <a
            href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
            onclick="append()">新增目录</a> <a href="#" class="easyui-linkbutton"
            data-options="iconCls:'icon-cancel'" onclick="removeIt()">删除</a>
    </div>

//treegrid主表
    <table id="tg" class="easyui-treegrid" title="课程分类编辑"
        style="width: 900px; height: 600px"
        data-options="
                iconCls: 'icon-ok',
                rownumbers: true,
                animate: true,
                fitColumns: true,
                url: '<%=contextPath%>/courseType/getCourseType',
                method: 'get',
                idField: 'id',
                treeField: 'typeName',
                onBeforeExpand:function(row){  
                    $('#tg').treegrid('options').url = '<%=contextPath%>/courseType/getCourseType?parentId='+row.id;               
                },
                onContextMenu: onContextMenu

            ">
        <thead>
            <tr>
                <th data-options="field:'typeName',width:70,editor:'text'">名称</th>
                <th data-options="field:'description',width:50,editor:'text'">描述</th>
                <th data-options="field:'sort',width:20,editor:'text'">排序</th>
            </tr>
        </thead>
    </table>

//右键菜单选项
    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div onclick="append()" data-options="iconCls:'icon-add'">新增</div>
        <div onclick="removeIt()" data-options="iconCls:'icon-remove'">删除</div>
        <div class="menu-sep"></div>
        <div onclick="collapse()">收起</div>
        <div onclick="expand()">展开</div>
    </div>

JS代码

<script type="text/javascript">
    //treegrid 的js代码
    //编辑目录
    var editingId=null; 
    function ff(row) {
        $('#tg').treegrid('options').url ='<%=contextPath%>/courseType/getCourseType?parentId='+row.id;
    }
    function formatProgress(value) {
        if (value) {
            var s = '<div style="width:100%;border:1px solid #ccc">'
                    + '<div style="width:' + value
                    + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
            '</div>';
            return s;
        } else {
            return '';
        }
    }
    function onContextMenu(e, row) {
        if (row) {
            e.preventDefault();
            $(this).treegrid('select', row.id);
            $('#mm').menu('show', {
                left : e.pageX,
                top : e.pageY
            });
        }
    }
//生成节点ID
    function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "";

        var uuid = s.join("");
        return uuid;
        }


//添加节点
    function append() {
        if (editingId != null){
            $.messager.alert("提示信息", "请先保存");
            return;
        }
        var uid=uuid();
        var node = $('#tg').treegrid('getSelected');
        expand();
        var parentId;
        if(node) parentId=node.id;
        else parentId=null;
        $('#tg').treegrid('append', {
            parent : parentId,
            data : [ {
                id : uid,
                typeName : '',
                sort :'1'
            } ]
        })

        editingId=uid;
        if (editingId != null){
            $('#tg').treegrid('select', editingId);
        }
        $('#tg').treegrid('beginEdit', editingId);
    }

//添加跟节点
    function appendRoot() {
        if (editingId != null){
            $.messager.alert("提示信息", "请先保存");
            return;
        }
        var uid=uuid();
        var node = $('#tg').treegrid('getSelected');
        expand();
        $('#tg').treegrid('append', {
            parent : null,
            data : [ {
                id : uid,
                typeName : '',
                sort :'1'
            } ]
        })
        editingId=uid;
        if (editingId != null){
            $('#tg').treegrid('select', editingId);
        }
        $('#tg').treegrid('beginEdit', editingId);
    }
//移除节点
    function removeIt() {
        if (editingId != null){
            $.messager.alert("提示信息", "请先保存");
            return;
        }
        var node = $('#tg').treegrid('getSelected');
        if (node==null)
            $.messager.alert("提示信息", "请选择一个节点");
        if (node) {
            var dataObj = {};
            ajaxCall("get", contextPath+'/courseType/deleteCourseType?id='+node.id, dataObj, function(XMLHttpRequest,
                    data) {
                $.messager.alert("提示信息", "删除成功");
            }, function(XMLHttpRequest) {
            });
            $('#tg').treegrid('remove', node.id);
        }
    }
    function collapse() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            $('#tg').treegrid('collapse', node.id);
        }
    }
//展开节点
    function expand() {
        var node = $('#tg').treegrid('getSelected');
        if (node) {
            $('#tg').treegrid('expand', node.id);
        }
    }

//开始编辑
    function beginEdit(){
        if (editingId != null){
            $('#tg').treegrid('cancelEdit', editingId);
            $('#tg').treegrid('select', editingId);
            editingId = null;
            return;
        }
        var row = $('#tg').treegrid('getSelected');
        if (row){
            editingId = row.id
            $('#tg').treegrid('beginEdit', editingId);
        }
    }
//保存编辑
    function saveEdit(){
        if (editingId != null){
            var t = $('#tg');
            t.treegrid('endEdit', editingId);
            $('#tg').treegrid('select', editingId);
            var row = $('#tg').treegrid('getSelected');
            var dataObj = {};
            dataObj.rows = JSON.stringify(row);
            ajaxCall("post", contextPath+'/courseType/saveCourseType', dataObj, function(XMLHttpRequest,
                    data) {
                $.messager.alert("提示信息", "保存成功");
            }, function(XMLHttpRequest) {
            });
            editingId = null;
        }
    }
    </script>

后台java代码

//获取treegrid列表
@RequestMapping(value = "/getCourseType")
    public @ResponseBody Map<String,Object> tree_data(HttpServletRequest request) throws Exception {

        String parentId = ConvertUtils.cStr(request.getParameter("parentId"));
        Map<String, Object>  param = new HashMap<String,Object>();
        List<CourseType> courseTypes = new ArrayList<CourseType>();

        if(StringUtils.isNotEmpty(parentId)){
            courseTypes = courseTypeService.queryTree(null, parentId,null);
        } else {
            courseTypes = courseTypeService.queryTree(null, null,"1");
        }
        List<Map<String,Object>> dateList = new ArrayList<Map<String,Object>>();
        if(courseTypes.size()>0){
            Map<String,Object> map = null;
            Map<String, Object>  params = new HashMap<String,Object>();
            for(CourseType courseType:courseTypes){
                map = new HashMap<String,Object>();
                map.put("id", courseType.getId());
                map.put("typeName", courseType.getTypeName());
                map.put("sort", courseType.getSort());
                map.put("description", courseType.getDescription());    


                if(StringUtils.isEmpty(courseType.getParentId())){
                    map.put("_parentId", null);
                }
                else{
                    map.put("_parentId", courseType.getParentId());
                }

                //根据id判断是否有子节点
                params.put("parentId", courseType.getId());
                int count = courseTypeService.querySelectRowCount(params);
                if(count>0){
                    map.put("state", "closed");
                }
                dateList.add(map);
            }
        }
        param.put("rows", dateList);
        return param;
    }
//保存treegrid的某一列
    @RequestMapping(value = "/saveCourseType", method = RequestMethod.POST)
    public @ResponseBody int saveDirectory(HttpServletRequest request) throws Exception {
        Map<String, Object> params = CommonUtil.getNewSqlMap();
        String rows = ConvertUtils.cStr(request.getParameter("rows"));
        Map<String,String> map=JsonParser.parseJsonStrNull(rows);
        params.put("id",map.get("id"));
        params.put("typeName",map.get("typeName"));
        params.put("description", map.get("description"));
        params.put("parentId", map.get("_parentId"));
        params.put("sort", map.get("sort"));
        params.put("delFlag", 0);
        String parentIds=map.get("_parentId")+",";
        String parentId=map.get("_parentId");
        while(true){
            parentId=courseTypeService.findParentId(parentId);
            if(StringUtils.isEmpty(parentId)){
                break;
            }
            parentIds=parentIds+parentId+",";
        }
        params.put("parentIds", parentIds);
        if(courseTypeService.updateObject(params)==0){
            courseTypeService.saveObject(params);
        }
        return 1;
    }
    //删除某一行
    @RequestMapping(value = "/deleteCourseType")
    public @ResponseBody Map<String, Object> deleteDirectory(HttpServletRequest request) throws Exception {
        String id=ConvertUtils.cStr(request.getParameter("id"));
        Map<String,Object> result = new HashMap<String, Object>();
        Map<String, Object> params = CommonUtil.getNewSqlMap();
        params.put("id",id);
        courseTypeService.deleteObject(params); 
        return result;
    }

注意事项

1.后台传回的json数据的key，必须与前端treegrid的表头name相对应。
2.要使用编辑功能，前端表头必须加入editor:’text’参数，具体类型参见官方文档。
3.后台传回的参数如果包含state参数，state为closed代表该节点具有子节点。
4.后台传回的json数据必须有一个以上是不包含_parentId字段的，也就是必须要有父节点，否则无法显示。