zTree：实现checkbox、全选、取消全选功能

最新推荐文章于 2022-07-21 18:08:22 发布

阳光温暖

最新推荐文章于 2022-07-21 18:08:22 发布

阅读量7.5k

点赞数

分类专栏：杂谈_jQuery 文章标签： checkbox ztree

本文链接：https://blog.csdn.net/allenjay11/article/details/78144224

版权

杂谈_jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天下午需要ztree实现取消全选，于是尝试了下，先看最终效果

开始

这里写图片描述

点击勾选

这里写图片描述

点击取消勾选

这里写图片描述

代码如下

<body>
<ul id="leftTree" class="ztree"></ul>
<a id="checkAllTrue" href="#" >勾选</a>
<a id="checkAllFalse" href="#">取消勾选</a>
<script>
    var setting = {
        check:{
            enable:true
        },
        view: {
            showLine: true,//显示节点之间的连线。
            selectedMulti: false  //允许同时选中多个节点。
        },
        data: {
            simpleData: {
                enable:true, //使用简单数据模式
                idKey: "id",//节点数据中保存唯一标识的属性名称
                pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                rootPId: "" //用于修正根节点父节点数据 默认值：null
            }
        } 
    };
    var nodes = [
        {id :"1",pId:"0",name :"maomao"},
        {id :"2",pId:"0",name : "maomao"},
        {id :"3",pId:"0",name : "maomao"},
        {id :"4",pId:"0",name : "maomao"},
        {id :"11",pId:"1",name: "maomao"},
        {id :"12",pId:"1",name: "maomao"},
        {id :"21",pId:"2",name: "maomao"},
        {id :"22",pId:"2",name: "maomao"},
        {id :"31",pId:"3",name: "maomao"},
        {id :"32",pId:"3",name: "maomao"},
        {id :"41",pId:"4",name: "maomao"},
        {id :"42",pId:"4",name: "maomao"},
        {id :"43",pId:"4",name: "maomao"},
        {id :"111",pId:"11",name:"maomao"},
        {id :"112",pId:"11",name: "maomao"},
        {id :"121",pId:"12",name: "maomao"},
        {id :"122",pId:"12",name: "maomao"}
    ];
    var tree  = $.fn.zTree.init($('#leftTree'), setting, nodes);
    tree.expandAll(tree);
    function checkNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("leftTree"),
                type = e.data.type,
                nodes = zTree.getSelectedNodes();
        console.log(type.indexOf("All"));
        if (type.indexOf("All") < 0 && nodes.length == 0) {
            alert("请先选择一个节点");
        }
        if (type == "checkAllTrue") {
            zTree.checkAllNodes(true);
        } else if (type == "checkAllFalse") {
            zTree.checkAllNodes(false);
        }
    }
    $("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);
    $("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);
    var zTreeObj = $.fn.zTree.getZTreeObj("leftTree"); //那个树对象
            console.log(zTreeObj);
            var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            console.log(nodes);

</script>
</body>