<!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. 原来rollup这么简单之 rollup.generate + rollup.write篇

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. 计划 rollup系列打算 ...

  2. go源码分析(三) 使用go http包开发web时遇到的坑之卸载插件，重启插件管理，仍然可以访问已经卸载的插件

    问题描述: web页面下发重启指令后,对卸载插件的处理不完整(虽然列表已经没有插件描述,但是在HandleFunc的路由列表中依然存在) 我们需要清空路由列表map 路由列表结构见代码: net/ht ...

  3. CUDA Pro Tip: Write Flexible Kernels with Grid-Stride Loops

    https://devblogs.nvidia.com/cuda-pro-tip-write-flexible-kernels-grid-stride-loops/ One of the most c ...

  4. Python习题集（十六）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 写一个函数repl ...

  5. File类的构造方法：三种重载形式（新手）

    //导入的包.import java.io.File;//File类的构造方法 三种重载形式//创建的一个类.public class zylx1 { //公共静态的主方法. public stati ...

  6. angular http 节流

    有时候点列表但是由于查询问题,后端返回数据的速度很慢,导致回来的顺序错乱,后端解决不了,前端来 在jq年代 像标志位 防抖 节流等 在angular里使用了rxjs //错误示范 getIntelli ...

  7. angular vue通过node启动项目局域网内关闭防火墙无法访问的解决办法

    先试 ng serve --host 0.0.0.0 不行再试 ng serve --host 0.0.0.0 --disable-host-check

  8. Symantec(赛门铁克）非受管检测

    为了查找局域网内没有安装赛门铁克客户端的IP,采用Symantec Endpoint Protect Manager 的非受管检测机制进行网段扫描. 非受管检测机制的原理是:每台电脑开机时都会向同网段 ...

  9. 解决GPU显存未释放问题

    前言 今早我想用多块GPU测试模型,于是就用了PyTorch里的torch.nn.parallel.DistributedDataParallel来支持用多块GPU的同时使用(下面简称其为Dist). ...

  10. React Hooks Typescript 开发的一款 H5 移动端 组件库

    CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...