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

随机推荐

PDF顯示插件
1. ie瀏覽器適用<object id="pdf_panel" class="pdf-panel" classid="clsid:CA8A97 ...
作为一位Vue工程师，这些开发技巧你都会吗？
路由参数解耦一般在组件内使用路由参数,大多数人会这样做: export default { methods: { getParamsId() { return this.$route.params. ...
使用 Docker 部署 Spring Boot 项目
Docker 介绍 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器解决方案. Docker 将应用程序与该程序的依赖,打包在一个文件里面 ...
安装RationalRose的问题解决
列出大问题:在这一步无法进行下一步,直接就只能退出. 翻译过来的意思是:IBM安装程序被完全下载之前就终止了,大概是这个意思. 然后我就直接进了IBM的官网看了一下产品支持,上面解释说是组件clear ...
Servlet（四）----HTTP、Response、servletContent
## HTTP协议: 1.请求消息:客户端发送给服务器端的数据 * 数据格式: 1.请求行 2.请求头 3.请求空行 4.请求体 2.响应消息:服务器端发送给客户端的数据 * 数据格式: ...
CDNbest-设置不缓存
写在开始之前有时候根据业务需求,我们网站不需要缓存,这时候就需要设置下让网站不走缓存步骤一登录平台找到我们的站点->站点设置->缓存设置如图备注:填写需要操作的域名,时间为&q ...
spss绘制图形更改组距
在绘制数据分布条形图时,要更改y轴的刻度很简单,直接在图形编辑窗口点击y轴修改就可以了. 而x轴的间隔自动设置为1,如果想要更改组距,可以按照以下方式: 点击重新编码为不同变量选择要更改的变量,在[ ...
Java网络编程——Socket
网络是连接不同计算机的媒介,不同的计算机依靠网络来互相通信,即传递数据. Java中与网络编程相关的部分主要是Socket(套接字),它作为一种抽象的结构,实现了与通信相关的各类方法,构成一套完整的通 ...
matplotlib.pyplot库函数关于坐标轴显示的支持
matplotlib.pyplot库函数关于坐标轴显示的支持 https://blog.csdn.net/Stark_595/article/details/80787005?depth_1-utm_ ...
一些常用关键字的用法（一.static)
17:36:26 2020-04-05 又是充实的一天,刚刚开始学习不久java的我,从面向过程的语言转变到面向对象的语言,在思想上上还是需要花费很多时间转变的.今天学习到了这几个关键字了,觉得这几个 ...

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

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

随机推荐

热门专题

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

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