<!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选中事件)的更多相关文章

  1. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  2. 单个和多个checkbox选中事件怎么写

    单个和多个checkbox选中事件怎么写 一.总结 一句话总结: 1.checkbox的事件方法的话主要是change和click 2.checkbox的属性判断的话主要是prop(判断checked ...

  3. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  4. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  5. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  6. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

  7. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  8. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  9. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. Go 武林外传 - 初出茅庐

    没有旁白. 我叫小白, 白痴的白. 老头说我太笨了, 提前放我下山, 让我自生自灭. 对了, 忘了说了, 那老头是我师傅. 虽然我的内心深处是拒绝的, 但是我又打不过老头, 只好收拾铺盖滚犊子了. 算 ...

  2. 基于 Roslyn 实现一个简单的条件解析引擎

    基于 Roslyn 实现一个简单的条件解析引擎 Intro 最近在做一个勋章的服务,我们想定义一些勋章的获取条件,满足条件之后就给用户颁发一个勋章,定义条件的时候会定义需要哪些参数,参数的类型,获取勋 ...

  3. debug.js在手机上打印调试信息

    在做移动端开发的时候大家应该都遇到过这么一个问题:如何在手机上打印调试信息? 在pc端我们通常会用console.log 或者 alert,但大家知道console.log在手机上是看不到打印信息的: ...

  4. http详解和分析

    1.http是什么? http 是一种超文本传输协议原名是这个Hypertext Transfer Protocol -- HTTP/1.1 可以百度查看http的RFC文档编号为RFC-2616 连 ...

  5. Analysis of endogenous peptides released from osteoarthritic cartilage unravels novel pathogenic markers （解读人：李琼）

    文献名:Analysis of endogenous peptides released from osteoarthritic cartilage unravels novel pathogenic ...

  6. 给bootstrap-sweetalert弹框的按钮绑定事件

    一. sweetalert cdn使用 sweetalert提供了很多的炫酷弹框,有很多的用法.关于本地导入使用sweetalert的方法,在之前的博客里提到过(点击前往),不过我们也可以使用cdn. ...

  7. 接口自动化框架pyface详细介绍

    版权说明 本框架系本人结合一些实践经验和开源框架设计思想,在家基于兴趣爱好独立完成的代码开发. 源码只保存在私人电脑,办公电脑上无.github开源与公司无关,先把关系撇清,不涉及侵权. 嘘. 框架定 ...

  8. python学习（五）之列表元素的积

    前几天,学完python的列表之后,我们老师留了一道关于列表的题目.几天后,老师讲解习题,很荣幸成为被老师点名讲解自己代码的其中之一下面把我的想法分享一下. 描述一个由n(n>1)个数字组成的列 ...

  9. 动态规划-计数dp-Distinct Subsequences II

    2020-02-06 17:01:36 问题描述: 问题求解: 非常经典的计数dp问题,思路就是统计以每个字符为结尾的个数,最后求和即可. dp[i] = sum of (dp[j]) 0 <= ...

  10. 图论-最短路径 floyd/dijkstra-Find the City With the Smallest Number of Neighbors at a Threshold Distance

    2020-01-30 22:22:58 问题描述: 问题求解: 解法一:floyd 这个题目一看就是floyd解最合适,因为是要求多源最短路,floyd算法是最合适的,时间复杂度为O(n ^ 3). ...