javascript入门之 ztree (十 checkbox选中事件)

<!DOCTYPE html>

<HTML>

<HEAD>

   <TITLE> ZTREE DEMO - beforeCheck / onCheck</TITLE>

   <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/zTreeStyle.css" type="text/css">

   <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">

   <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 = {

         view: {

            selectedMulti: false

         },

         check: {

            enable: true

         },

         data: {

            simpleData: {

               enable: true

            }

         },

         callback: {

            beforeCheck: beforeCheck,

            onCheck: onCheck

         }

      };

      var nodes =[

         { id:1, pId:0, name:"随意勾选 1", open:true},

         { id:11, pId:1, name:"随意勾选 1-1"},

         { id:12, pId:1, name:"随意勾选 1-2", open:true},

         { id:121, pId:12, name:"随意勾选 1-2-1"},

         { id:122, pId:12, name:"随意勾选 1-2-2"},

         { id:2, pId:0, name:"禁止勾选 2", open:true, doCheck:false},

         { id:21, pId:2, name:"禁止勾选 2-1", doCheck:false},

         { id:22, pId:2, name:"禁止勾选 2-2", checked:true, open:true, doCheck:false},

         { id:221, pId:22, name:"禁止勾选 2-2-1", doCheck:false},

         { id:222, pId:22, name:"禁止勾选 2-2-2", checked:true, doCheck:false},

         { id:23, pId:2, name:"禁止勾选 2-3", doCheck:false}

      ];

      var log;

      function beforeCheck(treeId, treeNode) {

         showLog(treeNode.name + "(选择前)");

         return (treeNode.doCheck !== false);

      }

      function onCheck(e, treeId, treeNode) {

         showLog(treeNode.name + "(选择后)");

      }

      function showLog(str) {

         if (!log) log = $("#log");

         log.append("<li>"+str+"</li>");

         if(log.children("li").length > 6) {                                           //设置内容超过6条后便删除刚开始的内容

            log.get(0).removeChild(log.children("li")[0]);

         }

      }

      function checkNode(e) {

         var zTree = $.fn.zTree.getZTreeObj("sys"),

         type = e.data.type,                                                       //用到下文定义的 data.type 属性

         nodes = zTree.getSelectedNodes();                                         //得到选中的结点

         if (type.indexOf("All")<0 && nodes.length == 0) {                             //如果不包括查到的结点并且不是全部的时候，提示

            alert("请先选择一个节点");

         }

         if (type == "checkAllTrue") {

            zTree.checkAllNodes(true);                                           //勾选 或 取消勾选 全部节点,此方法不会触发 beforeCheck / onCheck 事件回调函数。

         } else if (type == "checkAllFalse") {

            zTree.checkAllNodes(false);

         } else {

            var callbackFlag = $("#callbackTrigger").attr("checked");                    //初始化callbackTrigger按扭选中状态

            for (var i=0, l=nodes.length; i<l; i++) {

               if (type == "checkTrue") {

                  zTree.checkNode(nodes[i], true, false, callbackFlag);                 //checkNode: 勾选 或 取消勾选 单个节点。可以触发 beforeCheck / onCheck 事件回调函数

                                                                           //参数1：处理结点 2:是否选中 3:父子结点间是否联动 4:是否触发回调函数

               } else if (type == "checkFalse") {

                  zTree.checkNode(nodes[i], false, false, callbackFlag);

               }

            }

         }

      }

      $(document).ready(function(){

         $.fn.zTree.init($("#sys"), setting, nodes);

         $("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);                    //定义上文用到的e.data.type 中的 type 属性

         $("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);

         $("#checkAllTrue").bind("click", {type:"checkAllTrue"}, checkNode);

         $("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);

      });

   </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

   <div class="zTreeDemoBackground left">

      <ul id="sys" class="ztree"></ul>

   </div>

   <div class="right">

      <ul class="list">

         <input type="checkbox" id="autoCallbackTrigger" /> setting.check.autoCheckTrigger: <span id="autoCheckTriggerValue">false</span><br/>

         <input type="checkbox" id="callbackTrigger" checked /> 执行勾选方法是否触发 callback <br/>

         <p>

            <ul id="log" class="log" style="height:130px;">

            </ul>

         </p>

         </li>

      </ul>

   </div>

</div>

</BODY>

</HTML>

javascript入门之 ztree (十 checkbox选中事件)的更多相关文章

javascript入门之 ztree (八一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
单个和多个checkbox选中事件怎么写
单个和多个checkbox选中事件怎么写一.总结一句话总结: 1.checkbox的事件方法的话主要是change和click 2.checkbox的属性判断的话主要是prop(判断checked ...
javascript入门之 zTree（十二托拽事件（二））
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
javascript入门之 zTree（十四增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
javascript入门之 zTree（十一托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
javascript入门之 ztree (六结点的点击和展开/折叠事件)
1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...
javascript入门之 zTree（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
javascript入门之 zTree（十三移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
javascript入门之 ztree (九单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

Linux查看目录树形结构
安装tree. yum -y install tree 查看是否安装成功 yum list installed tree 执行tree命令查看目录树形结构 tree
在 macOS 下备份/还原/重置 LaunchPad 布局
原文链接:https://billc.io/2019/07/launchpad-layout-backup/ 前几天升级到 Catalina Public Beta 后,LauchPad 会出现无法刷 ...
AAAI 2020 | 反向R？削弱显著特征为细粒度分类带来提升
论文提出了类似于dropout作用的diversification block,通过抑制特征图的高响应区域来反向提高模型的特征提取能力,在损失函数方面,提出专注于top-k类别的gradient-bo ...
Django HttpResponse
HttpResponse 概述:给浏览器返回数据 HttpRequest对象是由django创建的,HttpResponse对象由程序员创建用法 1:不调用模板,直接返回数据. 例: def get ...
C 最大公约数&最小公倍数
1.最大公约数链接如果有一个自然数a能被自然数b整除,则称a为b的倍数,b为a的约数.几个自然数公有的约数,叫做这几个自然数的公约数.公约数中最大的一个公约数,称为这几个自然数的最大公约数. 1 ...
[讲解]prim算法<最小生成树>
最小生成树的方法一般比较常用的就是kruskal和prim算法一个是按边从小到大加,一个是按点从小到大加,两个方法都是比较常用的,都不是很难... kruskal算法在本文里我就不讲了,本文的重点是 ...
【JavaScript】要点知识的个人总结（1）
米娜桑,哦哈哟~ 该篇章主要基于链接中的参考内容和代码测试得出的结论,面向具有一定基础的前端开发者.如有错误,请指出与包涵. 原型链的解释 https://juejin.im/post/5aa78fe ...
基于Java的数字货币交易系统的架构设计与开发
前言无论是股票交易系统,还是数字货币交易系统,都离不开撮合交易引擎,这是交易平台的心脏.同时,一个优秀的架构设计也会让交易平台的运维和持续开发更加容易.本文基于对开源项目的深入研究,总结了数字货币交 ...
async和await是如何实现异步编程?
目录异步编程样例样例解析浅谈Promise如何实现异步执行参考 1.异步编程样例样例: // 等待执行函数 function sleep(timeout) { return new Prom ...
人生苦短，学用python
1. 我为什么开始学着用 python 啦? 扯扯网上疯传的一组图片.网上流传<人工智能实验教材>的图片,为幼儿园的小朋友们量身打造的实验教材,可谓是火了.甚至有网友调侃道:pytho ...

javascript入门 之 ztree (十 checkbox选中事件)

javascript入门 之 ztree (十 checkbox选中事件)的更多相关文章

随机推荐

热门专题

javascript入门之 ztree (十 checkbox选中事件)

javascript入门之 ztree (十 checkbox选中事件)的更多相关文章