<!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. vuex 业务使用

    1 创建变量 cityVuex.js export default { state: { cityArr: [] }, mutations: { setCityArr (state, arr) { s ...

  2. Python基础篇（五）_文件和数据格式化

    Python基础篇_文件和数据格式化 文件的使用:文件打开.关闭.读写 文件打开:通过open()函数打开文件,并返回一个操作文件的变量. 使用语法:<变量名> = (<文件路径以及 ...

  3. Python 之 copy() 与 deepcopy() 之间的区别

    在 Python 之中,如果想要复制一个对象就免不了要理解浅复制与深复制.这也是 Python 与其他语言的区别之一. Python 的数据存储方式与其他语言不同.当你定义了一个变量: a = [, ...

  4. 《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

    目录 一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链 例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**prot ...

  5. Magento2-2.3.4 win10安装完magento无法加载静态资源导致无法进入后台登录页面

    后台面无法进入,截图如下

  6. Unity 游戏框架：资源管理神器 ResKit

    此篇文章准备了将近两周的时间,写了改,改了删.之前有朋友反馈,上一个文章太冗长了,影响阅读体验,这一讲就走个精简路线.所以只要不是很重要的内容就都删减掉了. 文章分两个部分,第一部分是原理,第二部分是 ...

  7. Android ListView显示访问WebServices返回的JSON结果

    1.WebServices的返回结果 2.ListView内容布局代码 <?xml version="1.0" encoding="utf-8"?> ...

  8. 推荐几个来自 MOOCs的 Data Science

    数据科学是一个大领域,如果你想成为一个优秀的数据专家,自学是必要的技能. MOOCs是数据科学的主要来源.有许多网站提供了 MOOCs,比如Coursera.Coursera和Udacity都还不错. ...

  9. asp.net core系列 76 Apollo 快速安装模式下填坑和ASP.NetCore结合使用

    前言:由于公司占时没有运维,出于微服务的需要,Apollo只能先装在windows 阿里云上跑起来,由于环境及网络等问题,在安装过程中遇到很多坑,算是一个个坑填完后,最终实现. 一. java jdk ...

  10. SQL数据库-基本操作

    SQL教程 整理自:廖雪峰的官方网站-SQL教程 目录 SQL教程 SQL快捷键 1.概述 数据类型 SQL操作数据库的能力 语法特点 2. 安装MySQL 运行MySQL 3. 关系模型 3.1 概 ...