ztree折叠简单用法

html: <ul id="tree1" class="ztree"></ul>

方法一:使用tree方法控制

js:设置只展开父节点

var setting={

        view:{
            showIcon:false
        },
        data: {
             simpleData: {
                 enable: true,
                 idKey: "DEPT_CODE",                 //节点ID
                 pIdKey: "PARENT_CODE"           //父节点
             },key: {
                name: "DEPT_NAME"
            }
        },
        check:{
            enable:true
        }
    };
    
function inittree(){
    getJsonData("departmentList",null,function(data){
    var tree1=$.fn.zTree.init($("#tree"), setting, data);       
    tree1.expandAll(false);                                                    //设置不展开树,默认展开所有树
 
    });

}

后台:  

@RequestMapping(value = "departmentList", method = RequestMethod.GET)
    @ResponseBody
    public JSONArray getDepartmentList() {
        JSONArray array = DepartmentService.getDepartmentTree(id, name);    //所有父节点ID和名称
        List<JSONObject> tempList = new ArrayList<JSONObject>();
        for (Object object : array) {
            JSONObject department = (JSONObject) object;
            department.put("open", true);
            String departmentParentCode = department.getString("PARENT_CODE");
            if (!"r".equals(departmentParentCode)) {
                String departmentCode = department.getString("DEPT_CODE");
                tempList.addAll(UserService.getUserByDepartment(id, departmentCode));   //获取部门下的所有人员
             
            }
        }
        array.addAll(tempList);
        return array;
    }

第二种方法是使用后台控制只需设置部门下的属性为false

function inittree(){
    getJsonData("departmentList",null,function(data){
    var tree1=$.fn.zTree.init($("#tree"), setting, data);      
    });

}

后台:  

@RequestMapping(value = "departmentList", method = RequestMethod.GET)
    @ResponseBody
    public JSONArray getDepartmentList() {
        JSONArray array = DepartmentService.getDepartmentTree(id, name);    //所有父节点ID和名称
        List<JSONObject> tempList = new ArrayList<JSONObject>();
        for (Object object : array) {
            JSONObject department = (JSONObject) object;
            department.put("open", true);
            String departmentParentCode = department.getString("PARENT_CODE");
            if (!"r".equals(departmentParentCode)) {

              department.put("open", false);

                String departmentCode = department.getString("DEPT_CODE");
                tempList.addAll(UserService.getUserByDepartment(id, departmentCode));   //获取部门下的所有人员
             
            }
        }
        array.addAll(tempList);
        return array;
    }





### 修改 ZTree 展开折叠按钮行为 为了使 ZTree 插件中的展开折叠按钮行为反转,即点击展开节点时反而折叠,点击折叠节点时反而展开,可以通过自定义回调函数来实现这一功能。 #### 自定义 `onClick` 回调函数 通过重写 `onClick` 方法并结合 `expandNode` 和 `isParent` 判断当前节点的状态: ```javascript var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId" } }, callback: { onClick: function(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); if (treeNode.isParent) { if (treeNode.open) { zTree.expandNode(treeNode, false, null, null, true); // 折叠节点 } else { zTree.expandNode(treeNode, true, null, null, true); // 展开节点 } } } } }; ``` 上述代码实现了当用户单击某个父级节点时,如果该节点处于展开状态,则将其折叠;反之则展开。这里的关键在于判断 `treeNode.open` 的布尔值[^1]。 #### 使用 `beforeClick` 进行更精细控制 对于更加复杂的逻辑需求,可以利用 `beforeClick` 来提前处理用户的交互动作,并阻止默认操作后再手动触发相应的事件: ```javascript callback: { beforeClick: function(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); if (treeNode.isParent && treeNode.open) { setTimeout(function() { zTree.expandNode(treeNode, false, null, null, true); }, 0); return false; // 阻止默认的点击事件 } return !treeNode.isParent || !treeNode.open; } } ``` 这段代码会在检测到即将发生点击的情况下先做预判,如果是已经展开的父类节点就立即执行收缩命令,并返回 `false` 取消后续的操作流程[^2]。 #### 完整配置实例 下面是一个完整的树形结构初始化设置例子,包含了上面提到的功能调整: ```javascript var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId" } }, callback: { onClick: function(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); if (treeNode.isParent) { zTree.expandNode(treeNode, !treeNode.open, null, null, true); } }, beforeClick: function(treeId, treeNode) { if (treeNode.isParent && treeNode.open) { setTimeout(function() { $.fn.zTree.getZTreeObj(treeId).expandNode(treeNode, false, null, null, true); }, 0); return false; } return !treeNode.isParent || !treeNode.open; } } }; // 初始化zTree对象 $.fn.zTree.init($("#treeDemo"), setting, zNodes); ``` 以上代码片段展示了如何通过监听 `onClick` 和 `beforeClick` 实现反向切换节点的展示效果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值