Z-tree实例——复选框

来源：互联网发布：arm linux 外设使用编辑：程序博客网时间：2024/06/06 01:08

官网实例，个人研究测试，以备用。

1、页面布局：

Html代码  
<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>  

2、用到JS：

Js代码  
<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>  

3、说明：

发现ztree当中使用checkbox并非form表单中的<input type='checkbox'/>而是用样式来定义的：

样式class中的button使用有复选框的背景图片：zTreeStandard.png。正因如此，在获取选中节点时获取的并不是勾选了复选框的节点，而是点击文字有背景色的节点，它可以按住ctrl同时选多个。

阅读全文

0 0