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 ...

随机推荐

python读取文件指定行内容
python读取文件指定行内容 import linecache text=linecache.getline(r'C:\Users\Administrator\Desktop\SourceCodeo ...
XSS(跨站脚本攻击)详解
跨站脚本攻击XSS(Cross Site Scripting),为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web ...
OFD电子证照模版制作工具使用说明
每一类电子证照都具有相同板式,不同的电子证照之间只是文字.图片的差异.生成电子证照常用的方式就是采用模版批量生成. 本软件可以方便的设计证照模版.服务端根据模版生成电子证照,不同种类的电子证照生成逻辑 ...
[A*,启发式搜索] [SCOI2005] 骑士精神
链接:https://ac.nowcoder.com/acm/problem/20247来源:牛客网时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言52428 ...
[SQL]511+512+534+550+569
511. 游戏玩法分析 I solution SELECT player_id, MIN(event_date) AS first_login FROM Activity GROUP BY playe ...
递归回溯法求N皇后问题
问题描述:在一个NN(比如44)的方格中,在每一列中放置一个皇后,要求放置的皇后不在同一行,同一列,同一斜线上,求一共有多少种放置方法,输出放置的数组. 思路解析:从(1,1)开始,一列一列的放置皇后 ...
[LeetCode] 937. Reorder Data in Log Files 日志文件的重新排序
You have an array of `logs`. Each log is a space delimited string of words. For each log, the first ...
TensorFlow系列专题（二）：机器学习基础
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/ ,学习更多的机器学习.深度学习的知识! 目录: 数据预处理归一化标准化离散化二值化哑编码特征 ...
比CNN表现更好，CV领域全新卷积操作OctConv厉害在哪里？
CNN卷积神经网络问世以来,在计算机视觉领域备受青睐,与传统的神经网络相比,其参数共享性和平移不变性,使得对于图像的处理十分友好,然而,近日由Facebook AI.新家坡国立大学.360人工智能研究 ...
Java程序员必读的9本书
本文列出的9本书在Java程序员界都是被认为很棒的书.当一个程序员开始初学Java时,他的第一个问题应该是如何选择一本书来作为指导学习Java.这个问题也就表明,相对于其他的教程和博客,Java书籍还 ...

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

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

随机推荐

热门专题

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

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