官网实例，个人研究测试，以备用。
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>2、 用到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、 说明：
相关推荐
在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启复选框。在处理父子节点之间的关联性时，`check-strictly`属性扮演着关键角色。 `check-strictly`属性决定了父子节点之间是否...
本实例将深入探讨`z-tree`如何实现异步加载功能。 异步加载的核心在于只在需要时才获取数据，而不是一次性加载所有数据，这减少了初始加载时间，提高了网页响应速度，尤其是在数据量庞大的情况下。`z-tree`通过API...
"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件，它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点，通过复选框进行操作，增加了交互性和数据...
**z-tree简介** z-tree是一款基于JavaScript开发的可高度自定义的树形控件，它在Web应用中常用于展示层级结构...而"trm"文件可能是z-tree实例的具体代码或数据，解压并分析该文件对于学习和实践z-tree的使用至关重要。
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
### z-Tree：实验经济学软件教程 #### 一、关于z-Tree z-Tree（Zurich Toolbox for Readymade Economic Experiments）是一款由瑞士研发的实验经济学专用软件，旨在为经济实验提供一个灵活且功能强大的平台。该软件...
本篇文章将详细讲解如何在 Laravel-Admin 中使用 "CheckboxTree" 组件，这是一个用于实现树状复选框功能的插件，特别适合处理涉及多级分类或权限分配的问题。 首先，我们需要了解 "CheckboxTree" 的基本概念。在 ...
`el-tree-selected-tree` 描述的就是这样一个功能，它实现了在主`el-tree`之外，单独拉出一个展示已选中节点的树，并支持在该树上删除选中节点。 首先，我们需要理解`el-tree`的基本用法。`el-tree`通过`data`属性...
以上就是关于“TreeControl复选框：选中某个节点的复选框后，自动选中子节点的复选框”这一功能的技术实现和涉及的关键知识点。在实际开发中，开发者需要结合具体的编程环境，如C#、Java、Python等，以及相应的库或...
【z-tree树 demo】是一个基于JavaScript库jQuery的树形菜单组件，主要应用于构建具有动态加载、JSON数据支持以及复选框或单选按钮选择功能的交互式用户界面。这个组件以其高度灵活性和强大的功能在Web开发中受到广泛...
【z-tree框架】是一个在IT行业中广泛使用的传统树形组件，尤其在前端开发领域中扮演着重要角色。这个框架以其易用性和丰富的功能而受到开发者们的喜爱。在描述中提到，“传统框架树已经完善，里面的功能已经够市面上...
例如，可能有一个`ztree.excheck.js`用于扩展的复选框功能，或者`ztree.exedit.js`用于提供编辑节点的能力。 其次，CSS文件是Z-Tree呈现其视觉样式的关键。`ztree.css`通常包含了一系列预定义的样式规则，用于定义...
"z-tree-demo"工具是一个基于JavaScript实现的树形控件，主要用于前端开发中展示层级结构的数据。这个工具以其灵活性、可定制性和易于使用的特性而受到开发者欢迎。在Web应用中，z-tree常用于构建文件系统、组织架构...
在IT行业的前端开发中，将复选框（checkbox）转换为单选按钮（radio button）的行为，虽然在表面上看似简单，但其实涉及到了DOM操作、事件处理以及逻辑判断等多方面的知识。根据提供的代码片段与描述，我们可以深入...
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
i-Tree的五大核心产品包括：i-Tree Eco、i-Tree Streets、i-Tree Hydro、i-Tree Vue和i-Tree Species Selector。 1. i-Tree Eco：它能提供整个城市森林的概况分析，通过使用来自社区随机分布样区的现场数据和当地每...
- `$.fn.zTree`: jQuery扩展方法，用于对`z-tree`实例的操作。 - `zTreeObj`: `z-tree`实例对象，通过该对象可以调用所有API。 5. **Demo分析** - **基本示例**: 展示了最简单的`z-tree`使用方式，包括静态数据...
React复选框树 一个简单优雅的复选框树，用于React。 用法 安装 使用您最喜欢的依赖项管理器安装库： yarn add react-checkbox-tree 使用npm： npm install react-checkbox-tree --save 注–此库使用了样式，并...
树形复选框简单的复选框树复选框树的实现。 示例文件夹中的说明性示例初始化 jQuery ( document ) . on ( 'ready' , function ( ) { new Tree ( ) ;} ) ; 订阅以更改树中复选框的状态 jQuery ( document ) . on ( '...
在IT领域，尤其是在前端开发中，"tree树形结构带复选框" 是一个常见的需求，主要用于展现层次化的数据，并且允许用户进行选择操作。在HTML中实现这样的功能，通常会结合JavaScript、CSS以及可能的库或框架如jQuery、...