<!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. MyBatis框架——逆向工程

    什么是逆向工程? 逆向工程师MyBatis提供的一种自动化配置方案,针对数据表自动生成MyBatis所需的各种资源,包括实体类.Mapper接口.Mapper.xml,但是逆向工程的缺陷在于只能针对单 ...

  2. ysoserial分析【一】 之 Apache Commons Collections

    目录 前言 基础知识 Transformer 利用InvokerTransformer造成命令执行 Map TransformedMap LazyMap AnnotationInvocationHan ...

  3. 开源项目OEIP 游戏引擎与音视频多媒体(UE4/Unity3D)

    现开源一个项目 OEIP 项目实现的功能Demo展示 这个项目演示了在UE4中,接入摄像机通过OEIP直接输出到UE4纹理上,并直接把UE4里的RenderTarget当做输入源通过OEIP里GPU管 ...

  4. hdu3038加权（扩展）并查集

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3038/ 参考博客: https://blog.csdn.net/weixin_44580710/article/ ...

  5. Java流中的map算子和flatMap算子的区别

    map算子和flatMap算子 map和flatMap都是映射(转换),那么他们之间究竟有什么区别呢? 1.我们先简单了解下map算子: @org.junit.Test public void tes ...

  6. H3C路由器地址池租期时间H3CMSR830-6BHI-WiNet

    H3C路由器地址池租期时间H3CMSR830-6BHI-WiNet 设备H3CMSR830-6BHI-WiNet 先输入dis dhcp server tree pool 查看地址池名称,然后 < ...

  7. 性能测试工具Jmeter你所不知道的内幕

    谈到性能测试,大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛,主要原因是Jmeter是开源免费,LoadRunner 11在现网中存在破解版本.商用型性能测试工 ...

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

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

  9. Java基础语法(8)-数组中的常见排序算法

    title: Java基础语法(8)-数组中的常见排序算法 blog: CSDN data: Java学习路线及视频 1.基本概念 排序: 是计算机程序设计中的一项重要操作,其功能是指一个数据元素集合 ...

  10. CodeForces - 1244D 树（一条链）的染色

    题意:给一个无向的无环的树,需要用三种颜色将他染色,相邻的三个点不能有重复的颜色.给出每个点染成每种颜色的花费,求最小的染色花费,如果给的图不能按要求染色,输出-1. 思路:只有三种颜色,相邻三个点还 ...