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

随机推荐

SyntaxError: unexpected character after line continuation character
SyntaxError: unexpected character after line continuation character 待解决问题:在运行.py文件时报错SyntaxError: un ...
Python第二周作业
绘制五角星 import turtle turtle.color('black','red') turtle.pensize(10) turtle.begin_fill() for i in rang ...
js遍历删除对象的key
// 如果用户没有填写值,则删除对象的key. Object.keys(obj).forEach( (key) => { if (!obj[key]) { // !obj[key]表示 ...
xheditor图片上传
前端步骤:分为三部,这三部做完之后就能正确显示富文本了 1.下载xheditor文件,并按照如下要求进行引入:  <script t ...
demo08-js条件运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
[dfs] 2019牛客暑期多校训练营（第十场） Coffee Chicken
题目地址: https://ac.nowcoder.com/acm/contest/890/B 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 524288K,其他语言1048576 ...
Python第六章-函数01-函数的概念和使用
函数为了便于程序的维护和更好的实现模块化,好的程序都会分解为很多函数. 可以这么说,对于任何的编程语言,函数都是一个非常重要的概念. python 不仅简化了函数的定义过程,而且还大量借鉴了其他函数 ...
Transformers 中使用 TorchScript | 四
作者|huggingface 编译|VK 来源|Github 注意:这是我们使用TorchScript进行实验的开始,我们仍在探索可变输入大小模型的功能.它是我们关注的焦点,我们将在即将发布的版本中加 ...
使用webhooks进行代码的自动化部署
AutoMaticDeployment---自动部署项目简介使用Github的webhooks进行代码的自动化部署本项目是个人最近搞的一个小工具,自己最近在用hexo部署个人博客(地址:http ...
一 JVM垃圾回收模型
一 JVM垃圾回收模型一. GC算法 1.1 标记-清除算法(Mark-Sweep) 算法分为"标记"和"清除"两个阶段首先标记出所有需要回收的对象,然后回收 ...

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

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

随机推荐

热门专题

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

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