javascript入门之 ztree (六结点的点击和展开/折叠事件)

最新推荐文章于 2022-04-12 15:31:16 发布

IT蓝月

最新推荐文章于 2022-04-12 15:31:16 发布

阅读量3k

点赞数 1

分类专栏： JavaScript集中营

本文链接：https://blog.csdn.net/itlanyue/article/details/81564872

版权

JavaScript集中营专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1.注意：
测试点击事件时，如果要测试取消选中和追加选中，如果按住ctrl和win键无用，则需要先用鼠标左键按住,然后，在松开左键的前几毫秒按住ctrl键便可！

<!DOCTYPE html>
<script src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Standard Data </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
    <!--<script type="text/javascript" src="js/jquery-3.3.1.js"></script>-->
    <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>-->
    <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>-->
    <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>-->
    <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exhide-3.5.js"></script>-->
    <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>-->

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
</HEAD>

<BODY>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="demo1" class="ztree"></ul>
        <ul id="demo2" class="ztree"></ul>
        <ul id="demo3" class="ztree"></ul>
    </div>
</div>
<SCRIPT type="text/javascript">

    var setting1 = {

        check: {
            enable: true,
            chkStyle: "checkbox"
        },


        view: {
            autoCancelSelected:true,                //点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作
            selectedMulti:true                      //设置是否允许同时选中多个节点
        },

        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick1,
            onClick: onClick1
        }
    };

    var setting2 = {

        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick2,
            onClick: onClick2
        }
    };

    var setting3 = {

        data: {
            simpleData: {
                enable: true
            }
        },
        callback:{
            
            beforeCollapse: beforeCollapse,                //用于捕获父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作
            //返回值是 true / false
            //如果返回 false，zTree 将不会折叠节点，也无法触发 onCollapse 事件回调函数
            beforeExpand: beforeExpand,                   //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
            //返回值是 true / false
            //如果返回 false，zTree 将不会展开节点，也无法触发 onExpand 事件回调函数
            onCollapse: onCollapse,                      //用于捕获节点被折叠的事件回调函数
            onExpand: onExpand                      //用于捕获节点被展开的事件回调函数
        }
    };


    var nodes1 =[
        { id:1, pId:0, name:"普通的父节点",open:true},
        { id:11, pId:1, name:"叶子节点 - 1"},
        { id:12, pId:1, name:"叶子节点 - 2"},
        { id:2, pId:0, name:"NB的父节点",open:true},
        { id:21, pId:2, name:"叶子节点2 - 1"}
    ];

    var nodes2 =[
        { id:1, pId:0, name:"普通的父节点",open:true},
        { id:11, pId:1, name:"叶子节点 - 1"},
        { id:2, pId:0, name:"NB的父节点",open:true},
        { id:21, pId:2, name:"叶子节点2 - 1"}
    ];

    var nodes3 =[
        { id:1, pId:0, name:"父节点1",open:true},
        { id:11, pId:1, name:"叶子节点 - 1"},
        { id:12, pId:1, name:"叶子节点 - 2"},
        { id:13, pId:1, name:"父节点5（无法展开)",expand:false},
        { id:41, pId:13, name:"叶子节点 - 1"},
        { id:42, pId:13, name:"叶子节点 - 2"},
        { id:43, pId:13, name:"叶子节点 - 3"},
        { id:2, pId:0, name:"父节点2",open:true},
        { id:21, pId:2, name:"父结点3(无法折叠)",collapse:false},
        { id:31, pId:21, name:"叶子节点 - 1"},
        { id:32, pId:21, name:"叶子节点 - 2"},
        { id:33, pId:21, name:"叶子节点 - 3"},
    ];

    function beforeClick1(treeId, treeNode, clickFlag) {
        alert("点击前:  " + treeNode.name + '  clickFlag:' + clickFlag.toString());
    }
    function onClick1(event, treeId, treeNode, clickFlag) {
        alert("点击后:  " + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "取消选中" : "追加选中")) + ")  clickFlag:" + clickFlag.toString());
    }

    function onClick2(event, treeId, treeNode, clickFlag) {
        alert("该函数不会被执行");
    }

    function beforeClick2(treeId, treeNode, clickFlag) {
        alert("点击前(不会有点击后,不会被选中):  " + treeNode.name + '  clickFlag:' + clickFlag.toString());
        return false;
    }

    function beforeCollapse(treeId, treeNode) {
        alert(treeNode.name + '折叠前');
        return (treeNode.collapse !== false);
    }
    function onCollapse(event, treeId, treeNode) {
        alert(treeNode.name + '折叠后');
    }
    function beforeExpand(treeId, treeNode) {
        alert(treeNode.name + '展开前');
        return (treeNode.expand !== false);
    }
    function onExpand(event, treeId, treeNode) {
        alert(treeNode.name + '展开后');
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#demo1"), setting1, nodes1);
        $.fn.zTree.init($("#demo2"), setting2, nodes2);
        $.fn.zTree.init($("#demo3"), setting3, nodes3);

        $("#expandBtn").bind("click", {type:"expand"}, expandNode);
        $("#collapseBtn").bind("click", {type:"collapse"}, expandNode);
        $("#toggleBtn").bind("click", {type:"toggle"}, expandNode);
        $("#expandSonBtn").bind("click", {type:"expandSon"}, expandNode);
        $("#collapseSonBtn").bind("click", {type:"collapseSon"}, expandNode);
        $("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
        $("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
    });

</SCRIPT>
</BODY>
</HTML>

IT蓝月

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
javascript入门之 ztree (六结点的点击和展开/折叠事件)

1.注意：测试点击事件时，如果要测试取消选中和追加选中，如果按住ctrl和win键无用，则需要先用鼠标左键按住,然后，在松开左键的前几毫秒按住ctrl键便可！&lt;!DOCTYPE html&gt;&lt;script src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"&gt;&lt;/script&gt;&lt;H...
复制链接

扫一扫