ZTree 实现 单选和复选组合
来源：互联网 发布：百度云老是网络异常 编辑：程序博客网 时间：2024/05/01 21:06
<!DOCTYPE html><HTML><HEAD><TITLE> ZTREE DEMO - checkbox & radio</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../css/demo.css" type="text/css"><link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script><!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>--> <SCRIPT type="text/javascript"> <!-- //定义全局zTree,用于使用zTree.getNodesByParam("checked", true, null);取得选择节点 var zTree; var IDMark_A = "_a"; var setting = { view: { addDiyDom: addDiyDom }, data: { simpleData: { enable: true } } }; var zNodes =[{ id:1, pId:0, name:"父节点 1", open:false},{ id:11, pId:1, name:"叶子节点 1-1"},{ id:12, pId:1, name:"叶子节点 1-2"},{ id:13, pId:1, name:"叶子节点 1-3"},{ id:2, pId:0, name:"父节点 2", open:false},{ id:21, pId:2, name:"叶子节点 2-1"},{ id:22, pId:2, name:"叶子节点 2-2"},{ id:23, pId:2, name:"叶子节点 2-3"},{ id:3, pId:0, name:"父节点 3", open:false},{ id:31, pId:3, name:"叶子节点 3-1"},{ id:32, pId:3, name:"叶子节点 3-2"},{ id:33, pId:3, name:"叶子节点 3-3"}]; //判断节点是否在已选择的节点中，判断重复选择function isNodeInChecked(curId){ if(zTree==null){ return false; } var selectedNodes=zTree.getNodesByParam("checked", true, null); var selectedNode; if(selectedNodes == null || selectedNodes.length==0){ return false; } for(var i=0; i<selectedNodes.length;i++){ selectedNode = selectedNodes[i]; if(selectedNode.id==curId){ return true; } } return false; } //自定义的树形规则 function addDiyDom(treeId, treeNode) { var aObj = $("#" + treeNode.tId + IDMark_A); if (treeNode.level == 0) { var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+"_"+treeNode.pId+"' onfocus='this.blur();'></input>"; aObj.before(editStr); var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId); if (btn) { btn.bind("click", function() {checkAccessories(treeNode, btn);}); } } else { var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+"_"+treeNode.pId+ "' name='checkbox_"+treeNode.getParentNode().id+"_"+treeNode.pId+ "' onfocus='this.blur();'></input>"; aObj.before(editStr); var btn = $("#checkbox_"+treeNode.id+"_"+treeNode.pId); if (btn){ btn.bind("change", function() {checkBrand(treeNode, btn);}); var isNodeInChecked = false; var selectedNodes=null; if(zTree!=null){ selectedNodes = zTree.getNodesByParam("checked", true, null); } var selectedNode; //初始化时判断是否需要选择，这里可以去掉或者通过在zNodes中定义中添加checked:tr//ue来代替 if(selectedNodes != null && selectedNodes.length > 0){ for(var i=0; i<selectedNodes.length;i++){ selectedNode = selectedNodes[i]; if(selectedNode.id==treeNode.pId){ isNodeInChecked = true; break; } } } if(isNodeInChecked){ treeNode.checked=true; btn.attr("checked", true); } } } } function checkAccessories(treeNode, btn) { if (btn.attr("checked")) { //点击的节点是否在已选的根节点中 var isRootInChecked = isNodeInChecked(treeNode.id); if(!isRootInChecked){ //去除其余根节点以及下级节点的选择 removeOthers(); } treeNode.checked=true; //节点下所有节点都勾选 setChildSelected(treeNode, btn,true); } else { treeNode.checked=false; setChildSelected(treeNode, btn,false); } }//去除其余根节点以及下级节点的选择function removeOthers() { var selectedNodes=null; if(zTree!=null){ selectedNodes = zTree.getNodesByParam("checked", true, null); } var selectedNode; if(selectedNodes == null || selectedNodes.length == 0){ return; } for(var i=0; i<selectedNodes.length;i++){ selectedNode = selectedNodes[i]; selectedNode.checked=false; $("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false); $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false); } } function setChildSelected(treeNode, btn,status){ var children; if(treeNode.children==null){ return true; } var lenth=treeNode.children.length; if(lenth==0){ return true; } for(var i=0;i<lenth;i++){ children = treeNode.children[i]; $("#checkbox_" + children.id+"_"+children.pId).attr("checked", status); children.checked=status; btn = $("#checkbox_"+children.id+"_"+children.pId); rls = setChildSelected(children, btn,status); if(rls){ continue; } } } function beforeCheckAccessories(treeNode, btn) { var selectedNodes=null; if(zTree!=null){ selectedNodes = zTree.getNodesByParam("checked", true, null); } var selectedNode; if(selectedNodes == null || selectedNodes.length == 0){ return; }//alert(zTree.getSelectedNodes().length); for(var i=0; i<selectedNodes.length;i++){ selectedNode = selectedNodes[i];if (selectedNode.getParentNode() == null) {if (treeNode.getParentNode() == selectedNode) {continue}} else if (selectedNode != null && treeNode.getParentNode() ==selectedNode.getParentNode()) {continue;} selectedNode.checked=false; $("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false); $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false); } } function getCheckedBox(checkedName) { var r = document.getElementsByName(checkedName); for(var i=0; i<r.length; i++) { if(r[i].checked) { return $(r[i]); } } return null; }// 当选中某一checkbox时选中其上层radio function checkBrand(treeNode, btn) { if (btn.attr("checked")) { var isRootInChecked = isNodeInChecked(treeNode.rootId); if(!isRootInChecked){ beforeCheckAccessories(treeNode, btn); treeNode.checked=true; } setParentNodeChecked(treeNode); setChildSelected(treeNode,btn,true); }else{ treeNode.checked=false; setChildSelected(treeNode,btn,false); }// 如果只剩一个被选中项，则取消该被选项var selectedNodes=null; if(zTree!=null){ selectedNodes = zTree.getNodesByParam("checked", true, null);if (selectedNodes.length == 1) {for(var i=0; i<selectedNodes.length;i++){selectedNode = selectedNodes[i];$("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);$("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);}} } } //复选框勾选时，将上级节点到根节点都勾选 function setParentNodeChecked(treeNode) { var parentNode; if(treeNode==null){ return true; } if(treeNode.getParentNode()!=null){ parentNode = treeNode.getParentNode(); $("#checkbox_" + parentNode.id+"_"+parentNode.pId).attr("checked", true); parentNode.checked=true; return setParentNodeChecked(parentNode); }else{ var pObj = $("#radio_" + treeNode.id+"_"+treeNode.pId); if (!pObj.attr("checked")) { treeNode.checked=true; pObj.attr("checked", true); } return true; } } $(document).ready(function(){ zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); //--> </SCRIPT> <style type="text/css"> .radioBtn {height: 16px;vertical-align: middle;} .checkboxBtn {vertical-align: middle;margin-right: 2px;} </style> </HEAD><BODY><h1>radio / checkbox 共存</h1><h6>[ 文件路径: super/radio_checkbox.html ]</h6><div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>实现方法说明</h2> <ul class="list"> <li>zTree 默认的 radio checkbox和是无法共存的，但可以利用 自定义控件 的功能实现此需求，具体需求可以参考 "添加 自定义控件" 的详细说明</li> <li class="highlight_red">对于radio /checkbox 的联动规则，请根据需求制定自己的规则</li> </ul> </li> </ul> </div></div></BODY></HTML> 0 0
- ZTree 实现 单选和复选组合
- 单选 和 复选
- 复选框实现单选
- iOS开发tableView实现单选和复选
- iOS开发tableView实现单选和复选
- 菜单【复选和单选】
- 【ztree系列】完美实现复选框功能
- 复选框实现单选效果
- JQuery复选框实现全选、单选
- 单选和复选的应用
- 单选按钮和复选按钮
- 2复选框和单选按钮
- 单选按钮和复选框整合
- 单选按钮和复选框
- angularjs单选和复选按钮
- 单选按钮和复选框
- 单选按钮和复选框
- 单选按钮和复选按钮
- 天气两极分化
- 自定义UISlider
- 将十进制小数转化为二进制小数
- leetcode第一刷_Text Justification
- ShadowGun之Shader分析
- ZTree 实现 单选和复选组合
- Android Unable to execute dex: java.nio.BufferOverflowException.解决办法
- Longest Substring Without Repeating Characters
- 自定义UISegmentedControl
- .NET压缩与解压控件Xceed Zip for .NET控件详细介绍使用方法及下载
- 境外电商人才培训基地在温大成立
- canvas元素
- 二十四种模式
- ci 2.1.4 + smarty 3.1.15 配置成功
