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

来源：互联网发布：python unicode转中文编辑：程序博客网时间：2024/06/03 22:51

说明

前端使用的是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字段的，也就是必须要有父节点，否则无法显示。

0 0