zTree全选、全不选、目录展开、闭合自由设置

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

原创最新推荐文章于 2022-07-21 18:08:22 发布 · 5.2k 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"> 
    <script src="../js/jquery-1.4.4.min.js"></script>
    <script src="../js/jquery.ztree.all.min.js"></script>
</head>
<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 :"父1"},
        {id :"11",pId:"1",name : "子-1"},
        {id :"111",pId:"1",name : "子-1"},
        {id :"2",pId:"0",name : "父2"},
        {id :"22",pId:"2",name: "子-2"},
        {id :"222",pId:"2",name: "子-2"},
        {id :"3",pId:"3",name: "父3"},
        {id :"33",pId:"3",name: "子-3"}
    ];
    var tree  = $.fn.zTree.init($('#leftTree'), setting, nodes);  //初始化树
    tree.expandAll(tree);  //默认展开子父目录，也可在nodes中单独用属性open：true ,选中checked:true
    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"); //树对象
    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
</script>
</body>
</html>