easyui中树状图

easyui中写一个下面的树状图

页面：

<div id="test" class="easyui-window" data-options="title:'测试',iconCls:'icon-edit',modal:true,collapsible:false,minimizable:false,closed:true"
        style="width: 700px; height: 550px; padding: 5px;">
        <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'center',border:false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form:form id="testForm" method="post">
                <input type="hidden" name="treeId" id="tree_id"/>
                    <table>
                        <tr>
                            <td nowrap valign=top  width="10%" align="center">测试树:<br/>
                                <a href="#" onclick="expandAll('test_tree')">展开</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#" onclick="collapseAll('test_tree')">收缩</a>
                            </td>
                            <td>
                                <ul id="test_tree"></ul>
                            </td>
                        </tr>
                </table>
                </form:form>
            </div>
            <div data-options="region:'south',border:false" style="text-align: right; padding: 5px 0; height: 40px">
             <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" 
                    onclick="javascript:testSubmit()">提交</a>
                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)"
                    onclick="javascript:$('#test').window('close');">取消</a>
            </div>
        </div>
    </div>

js：

    //测试弹窗
    function testPage() {
        $('#testForm').form('clear');
        loadTree('test_tree');
        $('#test').window('open');
    }
    
    function testSubmit(){
        if ($('#testForm').form('validate')) {
            getTreeChecked('test_tree','tree_id');
            ajaxSubmitForm("testForm","${ctx}/cityConfig/test",function(response) {
                $.messager.alert('操作提示', response, 'info');
                $('#test').window('close');
            });
        }
    }
 
    function loadTree(treeName){
        var json = '[{\"id\":\"1\",\"text\":\"一级目录\",\"state\":\"closed\",\"children\":[{\"id\":\"201\",\"text\":\"二级目录1\",\"children\":[]},{\"id\":\"202\",\"text\":\"二级目录2\",\"children\":[{\"id\":\"301\",\"text\":\"三级目录1\",\"children\":[]},{\"id\":\"302\",\"text\":\"三级目录2\",\"children\":[]},{\"id\":\"303\",\"text\":\"三级目录3\",\"children\":[]}]}]}]';
        var strjson = eval('('+json+')');
        $('#' + treeName).tree({
            checkbox: true,
            cascadeCheck: true, // 所有节点上都有checkbox
            lines: true,
            data:strjson,
            onClick:function(node){
                $(this).tree('toggle', node.target);
            }
        });
    }
    
    //tree收缩节点
    function collapseAll(name){ 
        $('#'+name).tree('collapseAll');  
    }
    
    //tree展开节点
    function expandAll(name){  
        $('#'+name).tree('expandAll');  
    }
    
    function getTreeChecked(name,id){  
        var nodes = $('#'+name).tree('getChecked', ['checked','indeterminate']);
        var ids = '';
        for(var i=0; i<nodes.length; i++){   
            ids += nodes[i].id + ',';
        }
        $('#'+id).val(ids);  
     }

后端test代码

    @RequestMapping(value = "test", method = RequestMethod.POST)
    @ResponseBody
    public Object test(HttpServletRequest request) {
       String treeId = request.getParameter("treeId");
        System.out.println("treeId:" + treeId);
        return "接收参数成功";
    }

提交：

后端控制台输出：

treeId:1,202,301,302,

回显(修改功能中会用到)：

  //回显
  function editPage(id) {
        $('#testForm').form('clear');
        loadTree('test_tree');
        //通过id获取选中节点的id，这里直接写死,根据返回结果进行对应处理
        var json = '[{\"id\":1},{\"id\":202},{\"id\":301},{\"id\":302}]';
        var strjson = eval('('+json+')');
        setTreeChecked(strjson,'test_tree');
        $('#test').window('open');
    }

  function setTreeChecked(perm,name){
        setTreeUnchecked(name);   //先清空再赋值
        for(var i=0; i<perm.length; i++){
            var id = perm[i].id;
            if (id.length>0){
                var node = $('#'+name).tree('find', id);
                if(null != node && 'undefined' != typeof(node)){
                    var isleaf=$('#'+name).tree('isLeaf', node.target);
                    if (isleaf){
                        $('#'+name).tree('check',node.target);
                    } 
                }
            }           
        }   
    }
    
    function setTreeUnchecked(name){  
        var nodes = $('#'+name).tree('getChecked', ['checked','indeterminate']); 
        for(var i=0; i<nodes.length; i++){
            $('#'+name).tree('uncheck',nodes[i].target);
        }
    }

新建、修改拥有单独按钮时，可以参考上面方法（可以共用整棵树，再查询出选中节点的数据即可），记得把树的id设置成唯一，eg：新建时，树--add_test_tree；修改时，树--edit_test_tree；当然，也可以参考下面的方式，尤其在新建、修改是同一个按钮（相当于绑定）的情况，下面写法更加方便，这里只写不同的部分

1）、loadTree方法修改，json中的每个节点加上checked字段，true表示选中，false表示未选中；拉取树时直接回显数据，不需要setTreeChecked方法；

   function loadTree(treeName){
        var json = '[{\"id\":\"1\",\"text\":\"一级目录\",\"children\":[{\"id\":\"201\",\"text\":\"二级目录1\",\"checked\":false},{\"id\":\"202\",\"text\":\"二级目录2\",\"children\":[{\"id\":\"301\",\"text\":\"三级目录1\",\"checked\":true},{\"id\":\"302\",\"text\":\"三级目录2\",\"checked\":true},{\"id\":\"303\",\"text\":\"三级目录3\",\"checked\":false}],\"checked\":false}],\"checked\":false}]';
        var strjson = eval('('+json+')');
        $('#' + treeName).tree({
            checkbox: true,
            cascadeCheck: true, // 所有节点上都有checkbox
            lines: true,
            data:strjson,
            onClick:function(node){
                $(this).tree('toggle', node.target);
            }
        });
    }

2）、getTreeChecked修改，只获取选中节点id

 function getTreeChecked(name,id){  
        var nodes = $('#'+name).tree('getChecked');
        var ids = '';
        for(var i=0; i<nodes.length; i++){   
            ids += nodes[i].id + ',';
        }
        $('#'+id).val(ids);  
     }

点击提交按钮，后端输出：

treeId:201,301,

 

 

如果有写的不对的地方，请大家多多批评指正，非常感谢！