Ztree树

Ztree树的概念

 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

ZTree树格式：

ZNodes=[{},{},{}...];

{}内部必须要有ip，name，pId（父Id），checked（可选）。

当要封装的类中没有以上属性时，需要在类中添加以上属性并添加其set（），get（）方法。

在前端准备好需要的数据。

@RequestMapping("toroleModule")
    public String toRoleModule(String roleId,Model model) throws JsonProcessingException{
        //准备数据
        List<Module> moduleList=roleService.findModuleList();
        //查询Role中是否已有Module的信息
        List<String> roleList=roleService.findRoleModuleById(roleId);
        System.out.println(roleList);
        for (Module module : moduleList) {
            if(roleList.contains(module.getModuleId())){
                module.setChecked("true");
            }
        }
        ObjectMapper objectMapper=new ObjectMapper();
        String json = objectMapper.writeValueAsString(moduleList);
        model.addAttribute("json", json);
        System.out.println(json);
        model.addAttribute("roleId", roleId);
        return "sysadmin/role/jRoleModule";
    }

其中红色部分是将准备好的数据装换成一个JSON串。

蓝色部分为将其中有的属性进行选中。

二、页面中的设置

var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        
        //这里相当于在拿后来传来的数据，后台在传数据的时候，属性名要对应上
        var zNodes =${json}
        
        $(document).ready(function(){
            $.fn.zTree.init($("#htZtree"), setting, zNodes);

            var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
            zTreeObj.expandAll(true);        //展开所有树节点
        });

        //获取到所以用户选中的节点id值
        //获取所有选择的节点，提交时调用下面函数
        function submitCheckedNodes(treeNode) {
            var nodes = new Array();
            var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
            nodes = zTreeObj.getCheckedNodes(true);        //取得选中的结点
            var str = "";
            for (i = 0; i < nodes.length; i++) {
                if (str != "") {
                    str += ",";     
                }
                str += nodes[i].id;
            }
            
            $('#moduleIds').val(str);        //将拼接完成的字符串放入隐藏域，这样就可以通过post提交
        }

        <table id="ec_table" class="tableRegion" width="98%" >
                    <!--隐藏域用来传递数据  -->
                    <input type="hidden" id="roleId" name="roleId" value="${roleId}"/>
                    <input type="hidden" id="moduleIds" name="moduleIds"/>
                    <ul id="htZtree" class="ztree"></ul>
          </table>

在页面处理中将其中提交的数据进行接收处理

@RequestMapping("saveRoleModule")
    public String saveRoleModule(String roleId,String[] moduleIds){
        roleService.saveRoleModule(roleId,moduleIds);
        return "redirect:/sysadmin/role/list";
    }