<!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 (九 单/复选框问题)的更多相关文章

  1. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  3. Android布局——单复选框（今天上课的内容总结下）

    怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...

  4. Android之单复选框及Spinner实现二级联动

    一.基础学习 1.图形学真的很神奇啊....查了些资料做出了3D云标签,哈哈...其实直接拿来用的,我们要效仿鲁迅先生的拿来主义,嘿嘿~~3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标 ...

  5. AngularJS（六）：表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  6. python selenium单/复选框操作

    一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...

  7. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  8. SpringMVC 表单复选框处理

    <form action="" method="post"> <c:forEach items="${dblist}" v ...

  9. jquery 判断单/复选框是否被选中

    1 <div> 2 <span>高亮:</span><input type="checkbox" name="light&quo ...

随机推荐

  1. python迭代器、装饰器和生成器

    装饰器 1.装饰器的作用 1. 装饰器作用:本质是函数(装饰其他函数)就是为其他函数添加其他功能 2. 装饰器必须准寻得原则: 1)不能修改被装饰函数的源代码 2)不能修改被装饰函数的调用方式 3．实 ...

  2. Core3.1WebApi_ 同源策略_如何支持跨域(转载)

    原文:https://mp.weixin.qq.com/s/id3fOyGrZI9lLx7PKbVYlg

  3. java虚拟机学习记录（内存划分、垃圾回收、类加载等机制）

    一直以来觉得虚拟机是Java最难的一部分,涉及最底层的原理,学起来难度很大,而且工作中基本上用不到这些原理,所以对这部分“敬而远之”.现如今工作五年了,从Java基础到算法.数据结构.网络.数据库.设 ...

  4. VMWARE虚拟机安装系统提示CPU已被客户机操作系统禁用和secureCUT乱码

    错误:VMWARE虚拟机安装系统提示CPU已被客户机操作系统禁用 改正:找到虚拟机的位置找到下图灰色的部分:打开 .vmx后缀的操作系统配置文件,加入以下代码: cpuid.1.eax = :: 2. ...

  5. vscode回车补全代码

    VsCode设置回车补全代码而不换行 有一部分人不习惯用tab键补全代码,我就是其中之一,习惯了回车补全的我决定设置一波,网上找了很多, 没找到比较详细的,所以自己写一个 有一个叫keybinding ...

  6. 渗透测试-IP相关知识整理

    IP地址: 英文名称为Internet Protocol Address,是指互联网协议地址又称为网际协议地址.IP地址是Ip协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台机器分配一个 ...

  7. Remmina

    什么是Remmina? Remmina作为一个远程连接服务器,可以方便快捷的帮你连接服务器,不用直接使用命令行的方式去连接服务器,使用也很简单.具体下载直接在APP中下载就好,Linux自带这个软件, ...

  8. Contest 141

    2019-06-16 14:35:52 1089. Duplicate Zeros - Easy 问题描述: 问题求解: 很显然的可以使用O(n), O(n)的解法.主要问题在于如何在O(1)空间复杂 ...

  9. Redis学习笔记1-java 使用Redis（jedis）

    一.远程操作Redis 1. 在windows环境下安装RedisDesktopManager 2. 打开RedisDesktopManager 3. Add New Connection 4. 右击 ...

  10. ContOS7中使用Nginx进行TCP反向代理

    一.安装Nginx 1.下载:http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.1.tar.gz ...