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