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>
javascript入门 之 ztree (九 单/复选框问题)

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