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 ...
随机推荐
- (转)GNU风格ARM汇编语法指南(非常详细)3
原文地址:http://zqwt.012.blog.163.com/blog/static/120446842010111482023804/ 3.GNU汇编程序中的分段 <1> . ...
- session、cookie和taken的区别
http是无状态的协议,所以要维持应用的会话形式,就需要加入以下几种机制,来进行会话跟踪,识别用户身份(当同一用户进行多次操作,不用反复请求建立新的连接,从而节省服务器资源和处理速度) 生成位置 ...
- 分享macOS平台好用的视频分割、合并视频、提取音频、分离音频、音频转码的工具CCVideo
CCVideo 是一款运行在macOS上可分割视频(可多段分割).合并视频.提取音频.分离音频.音频转码的工具,操作方便,只需简单几步,便可轻松完成. 下载地址
- 从零开始学习R语言(二)——数据结构之“因素(Factor)”
本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/60101041 也同步更新于我的个人博客:https://www.cnblogs.com/nickwu/p/125370 ...
- Postman从入门到入门
1.Postman简介 Postman是一个接口测试工具,在做接口测试的时候, Postman相当于一个客户端,可以发送请求到服务器端.Postman分为Chrome插件版本(不再更新维护)和Nati ...
- 【NLP面试QA】预训练模型
目录 自回归语言模型与自编码语言 Bert Bert 中的预训练任务 Masked Language Model Next Sentence Prediction Bert 的 Embedding B ...
- 一文带你入门Java Stream流,太强了
两个星期以前,就有读者强烈要求我写一篇 Java Stream 流的文章,我说市面上不是已经有很多了吗,结果你猜他怎么说:"就想看你写的啊!"你看你看,多么苍白的喜欢啊.那就&qu ...
- 10.map
map Go语言中提供的映射关系容器为map,其内部使用散列表(hash)实现 . map是一种无序的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能使用. map定义 ...
- 机器学习之强化学习概览(Machine Learning for Humans: Reinforcement Learning)
声明:本文翻译自Vishal Maini在Medium平台上发布的<Machine Learning for Humans>的教程的<Part 5: Reinforcement Le ...
- Transformers 库常见的用例 | 三
作者|huggingface 编译|VK 来源|Github 本章介绍使用Transformers库时最常见的用例.可用的模型允许许多不同的配置,并且在用例中具有很强的通用性.这里介绍了最简单的方法, ...