javascript入门 之 ztree (九 单/复选框问题) 

<!DOCTYPE html>
<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <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>
    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <SCRIPT type="text/javascript">

        var setting = {

            check: {
                enable: true,
                //chkStyle: "radio",                           //设置为单选框
                chkStyle: "checkbox",                          //设置为复选框
                chkboxType : {"Y" : "ps", "N" : "ps"},                 //设置为影响
                //chkboxType: {"Y" : "", "N" : ""}                      //设置为不影响
                                                                        //Y 属性定义 checkbox 被勾选后的情况；
                                                                        //N 属性定义 checkbox 取消勾选后的情况；
                                                                        //"p" 表示操作会影响父级节点；
                                                                        //"s" 表示操作会影响子级节点。
                nocheckInherit: true,                                   //可以显示/隐藏单/复选框
                chkDisabledInherit: true                                //单/复选框禁/选用
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var nodes =[
            { id:1, pId:0, name:"1", open:true},
            { id:11, pId:1, name:"111"},
            { id:12, pId:1, name:"222",chkDisabled:true},
            { id:13, pId:1, name:"333",checked:true, halfCheck:true},               //强制半勾选状态
        ];

        function is_check(e) {

            var zTree = $.fn.zTree.getZTreeObj("sys"),
                nocheck = e.data.nocheck,
                nodes = zTree.getSelectedNodes();

            if (nodes.length == 0) {

                alert("请先选择一个节点");
            }

            for (var i=0, l=nodes.length; i<l; i++) {

                nodes[i].nocheck = nocheck;
                zTree.updateNode(nodes[i]);
            }
        }

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);
            $("#hid").bind('click',{nocheck: true},is_check);
            $("#dis").bind('click',{nocheck: false},is_check);
        });

    </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">

    <div class="zTreeDemoBackground left">
        <ul id="sys" class="ztree"></ul>
    </div>

    <button id="dis" οnclick="return false;">显示</button>
    <button id="hid" οnclick="return false;">隐藏</button>

</div>
</BODY>
</HTML>
posted @ 2018-08-11 10:31  IT蓝月  阅读(190)  评论(0)  编辑  收藏  举报
Live2D