官网实例,个人研究测试,以备用。
1、页面布局:
- <BODY>
- <div class="content_wrap">
- <div class="zTreeDemoBackground left">
- <ul id="treeDemo" class="ztree"></ul>
- </div>
- <p>父子关联关系:<br/>
- 被勾选时:
- <input type="checkbox" id="py" checked />关联父
- <input type="checkbox" id="sy" checked />关联子<br/>
- 取消勾选时:
- <input type="checkbox" id="pn" checked />关联父
- <input type="checkbox" id="sn" checked />关联子
- <br/><br/>
- <input type="checkbox" onclick="enableOrDisNodes(1);">禁止/解禁选中节点</input><br />
- <input type="checkbox" onclick="enableOrDisNodes(2);">勾选/取消勾选选中的节点</input><br />
- <input type="checkbox" onclick="getCheckNodes();">获取勾选/未勾选的节点数量</input><br />
- <input type="checkbox" onclick="getSelectedCheckNodes(this);">获取选定节点中勾选/未勾选的节点数量</input><br />
- </div>
- </div>
- </BODY>
- <SCRIPT type="text/javascript">
- var setting = {
- check: {
- enable: true,//设置zTree的节点上是否显示checkbox/radio框,默认值: false
- chkboxType: { "Y": "ps", "N": "ps" }
- },
- data: {
- simpleData: {
- enable: true//使用简单模式
- }
- },
- key:{
- checked:"checked"//zTree 节点数据中保存check状态的属性名称。默认值:"checked"
- },
- view:{
- selectedMulti:true//允许选多个
- }
- };
- var zNodes=[
- //checked:节点的checkBox/radio的勾选状态,默认为false
- //nocheck:设置节点是否隐藏checkbox/radio,true 表示此节点不显示 checkbox / radio,不影响勾选的关联关系,不影响父节点的半选状态。false 表示节点具有正常的勾选功能
- //chkDisabled:设置节点的 checkbox / radio 是否禁用,默认值false
- {"id":1,"pId":0,"name":"河北",open:true,checked:true},//checked:true,默认勾选
- {"id":2,"pId":1,"name":"石家庄",open:true,checked:false},//checked:false,默认不勾选
- {"id":21,"pId":2,"name":"化皮镇",nocheck:true},//nocheck:true,不显示checkbox
- {"id":22,"pId":2,"name":"承安镇",nocheck:false},//nocheck:false,显示checkbox
- {"id":23,"pId":2,"name":"正莫镇",chkDisabled:true},//禁用checkbox
- {"id":3,"pId":1,"name":"邯郸"},
- {"id":4,"pId":1,"name":"保定"},
- {"id":5,"pId":1,"name":"沧州"},
- {"id":6,"pId":0,"name":"河南",open:true,isParent:true},
- {"id":7,"pId":6,"name":"郑州"},
- {"id":8,"pId":6,"name":"开封"},
- {"id":9,"pId":6,"name":"洛阳"},
- {"id":10,"pId":6,"name":"南阳"},
- {"id":11,"pId":0,"name":"山东",open:false,isParent:true},
- {"id":12,"pId":11,"name":"济南"},
- {"id":13,"pId":11,"name":"济宁"},
- {"id":14,"pId":11,"name":"淄博"},
- {"id":15,"pId":11,"name":"德州"},
- {"id":16,"pId":0,"name":"山西",open:false,isParent:true},
- {"id":17,"pId":16,"name":"太原"},
- {"id":18,"pId":16,"name":"大同"},
- {"id":19,"pId":16,"name":"朔州"},
- {"id":20,"pId":16,"name":"阳泉"}
- ]
- /**
- *设置勾选checkbox对于父子节点的关联关系
- */
- function setCheck() {
- var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
- py = $("#py").attr("checked")? "p":"",
- sy = $("#sy").attr("checked")? "s":"",
- pn = $("#pn").attr("checked")? "p":"",
- sn = $("#sn").attr("checked")? "s":"",
- type = { "Y":py + sy, "N":pn + sn};
- zTree.setting.check.chkboxType = type;
- }
- /*
- setChkDisabled():禁用或解禁某个节点的checkbox/radio
- @param treeNode:需要禁用或解禁checkbox/radio的节点数据
- @param disabled:禁用/解禁 true:禁用 false:解禁省略此参数,等同于disabled=false,即解禁,不影响treeNOde.nochecked=true的节点(checkbox/radio不显示的节点)
- @param inheritParent:全部父节点是否进行同样的操作,true表示影响父节点 false表示不影响
- @param inheritChildren 全部子节点是否进行同样的操作,true表示影响子节点 false表示不影响
- */
- /*
- checkNode():勾选或取消勾选单个节点
- @param treeNode:需要勾选或取消勾选的节点数据
- @param checked:true/false,勾选/取消勾选,省略此参数,则根据对此节点的勾选状态进行 toggle 切换不影响 treeNode.nochecked = true 的节点。
- @param checkTypeFlag:true/false,是否按照setting.check.chkboxType属性进行父子节点的勾选联动操作,true进行联动,false 只修改此节点勾选状态,无任何勾选联动操作
- @param callbackFlag:true/false,是否触发回调函数,true 表示执行此方法时触发beforeCheck&onCheck事件回调函数,false:不触发回调函数
- */
- /**
- *禁止或解禁选中节点
- *@param flag:1-禁用/解禁 2-勾选/取消勾选
- */
- function enableOrDisNodes(flag){
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
- var nodes = treeObj.getSelectedNodes();//获取选中的节点(这个选中并不是勾选复选框,而是点击节点,选中时节点有背景色,可以按住ctrl同时选多个)
- var status=null;//状态
- if(nodes.length>0){//说明有节点选中
- if(flag==1){//禁用/解禁
- for (var i=0; i<nodes.length; i++) {
- status = nodes[i].chkDisabled;//获取禁用状态
- status=(!status);//取反,若当前节点禁用则解禁,若不禁用则禁用
- treeObj.setChkDisabled(nodes[i], status,true,true);
- }
- }else{//勾选/取消勾选
- for (var i=0; i<nodes.length; i++) {
- status = nodes[i].checked;//获取勾选状态
- status=(!status);//取反,若当前节点被勾选,则取消勾选,否则勾选
- treeObj.checkNode(nodes[i],status,true);
- //treeObj.checkNode(nodes[i],'',true);//忽略第二个参数,自动采用toggle进行切换
- }
- }
- }else{
- alert("请先选中节点!");
- return false;
- }
- }
- /**
- *点击时获取勾选/未勾选的节点数量
- */
- function getCheckNodes(obj){
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
- var checkNodes=null;
- var count = 0;
- var count2 = 0;
- //getCheckedNodes:获取当前树中输入框被勾选或未勾选的节点集合,true:被勾选的集合 false:未勾选的集合
- checkNodes= treeObj.getCheckedNodes(true);//勾选的数量
- count = checkNodes.length;
- count2= (treeObj.getCheckedNodes(false)).length;//未勾选的数量
- alert("整棵树中被勾选的节点有"+count+"个\n"+"没被勾选的节点有"+count2+"个");
- return false;
- }
- /**
- *点击时获取选定节点的勾选/未勾选节点数量
- *chkboxType:勾选checkbox对于父子节点的关联关系,默认值:{ "Y": "ps", "N": "ps" }
- *Y属性定义 checkbox 被勾选后的情况;N属性定义 checkbox 取消勾选后的情况;
- *"p" 表示操作会影响父级节点;"s" 表示操作会影响子级节点。请注意大小写,不要改变
- */
- function getSelectedCheckNodes(obj){
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象
- var nodes = treeObj.getSelectedNodes();//选定节点
- var checked=null;
- var count = 0;
- if(nodes.length>0){
- for(var i=0;i<nodes.length;i++){
- checked=nodes[i].checked;//获取勾选属性
- if(checked==true){//选中节点
- count++;//自增1
- }
- }
- alert("选中节点:"+nodes.length+"个\n"+
- "被勾选:"+count+"个\n"+
- "没被勾选:"+(nodes.length-count)+"个");
- return false;
- }else{
- alert("请先选中节点!");
- $(obj)[0].checked=false;//取消勾选状态
- return false;
- }
- }
- $(document).ready(function(){
- $.fn.zTree.init($("#treeDemo"), setting, zNodes);
- setCheck();
- $("#py").bind("change", setCheck);
- $("#sy").bind("change", setCheck);
- $("#pn").bind("change", setCheck);
- $("#sn").bind("change", setCheck);
- });
- </SCRIPT>
发现ztree当中使用checkbox并非form表单中的<input type='checkbox'/>而是用样式来定义的:
<span treenode_check="" class="button chk checkbox_false_full" id="treeDemo_19_check"></span>
样式class中的button使用有复选框的背景图片:zTreeStandard.png。正因如此,在获取选中节点时获取的并不是勾选了复选框的节点,而是点击文字有背景色的节点,它可以按住ctrl同时选多个。