很多时候我们需要用到带checkbox的树。
其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
完整的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带复选框(checkbox)的树</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
<script type="text/javascript" src="../../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'0005_checkbox_reorder_tree.php'
})
});
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
</script>
</head>
<body>
<h1>带复选框(checkbox)的树</h1>
<p></p>
<p>改编自ExtJs 自带的tree例子，选中父节点后，所有子节点会自动选上。</p>
<p>该例子点击父节点如果速度过快，有时候不会自动选中子节点！ </p>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html>
要返回给前台的数据渗格式:
[{"cls":"folder","id":10,"leaf":false,checked:false,"children":[{"cls":"file","id":11,"leaf":true,checked:false,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,checked:false,"children":null,"text":"SLK200"}],"text":"Benz"}]
演示地址:http://extjs.org.cn/extjs/mydemo/tree/0005_checkbox_reorder.html
关于json数据格式,可以下载json-lib的相关包,使用json-lib 提供的一些方法进行操作,非常方便
分享到：
相关推荐
在给定的文件中，我们关注的是“带复选框的ExtJS tree”这一主题，这涉及到ExtJS框架下的树形组件（TreePanel）如何与复选框结合，为用户提供更为灵活的数据选择和管理方式。 ### 标题解析：“带复选框的ExtJS tree...
"带复选框的树"是ExtJS中的TreePanel组件的一个扩展，允许用户通过复选框选择树结构中的节点。这种功能在数据层级结构的管理和筛选中非常有用，例如在组织架构、文件系统或者权限设置中。 复选框树的核心在于`...
3. **子选父**：当一个子节点的复选框被改变时，其父节点的复选框状态应根据所有子节点的选中状态进行更新。可以监听`checkchange`事件，并在事件处理函数中进行判断。 4. **父选子**：当父节点的复选框被选中或...
基于EXTjs 的 动态复选框树 json数据交互
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树，解决了向下勾选子节点、向上勾选父节点，正选反选获取值等问题，勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性，即在树形结构中添加复选框（checkbox）功能，并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用，比如文件...
"带复选框的异步动态树"是一个典型的前端开发案例，它涉及到EXTJS框架的使用，以及与MySQL数据库的交互。EXTJS是一个强大的JavaScript库，用于创建富客户端应用，其组件化的设计使得开发复杂的UI变得更为简单。下面...
总结，这个示例展示了如何使用ExtJS的GridPanel和TreePanel组件，结合后台数据读取，实现分页显示表格数据和树形结构数据，以及复选框的联动效果。在Visual Studio 2008环境中，开发者可以编写和调试这些功能，为...
8. **API配置**：使用ExtJS API可以进一步定制组件的行为，如设置默认展开级别（`rootVisible`）、禁用特定节点（`disabled`）、控制是否显示复选框（`checkbox`）等。 9. **交互设计**：优化用户体验是关键，如...
总的来说，"ext复选框的ColumnTree扩展包"为EXT的ColumnTree组件提供了增强的功能，使得在树形数据结构中进行选择操作变得更加便捷。通过引入这个扩展，开发者可以快速地为自己的EXT应用增加复选框功能，提高用户...
使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ，用户角色权限菜单的维护 jar文件删了一些，需要用的自己加包
在IT领域，"带选择框_的树"（checkbox_tree）是一种常见的用户界面元素，它结合了树形结构和复选框的功能。这种组件通常用于数据层级结构的展示，允许用户进行多选操作，比如在文件管理器、权限设置或者组织架构等...
在本例中，我们关注的是如何实现一个带有复选框的TreePanel，以便在选中父节点时自动选中所有子节点，而只有当所有子节点都未被选中时，父节点才能被取消选中。 首先，我们创建了一个新的Ext.tree.TreePanel实例，...
在EXTJS4中，实现一个下拉树（Combobox Tree）并支持多选和复选功能，主要是通过自定义组件（Ext.define）来完成的。这个组件继承自EXTJS的Picker字段（Ext.form.field.Picker），并添加了树形结构和复选功能。以下...
在树形控件中，节点的勾选状态通常通过复选框来表现，这个状态可以反映出用户对节点的选择情况。 在一些业务场景中，可能需要动态地改变树节点的勾选状态。例如，可能会有一个按钮的功能是清空树节点的勾选状态，...
### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息，并支持用户进行一系列操作如搜索、添加、删除等。...
3. **CheckboxModel**: 这个模型允许在树节点上显示复选框，用户可以通过点击复选框来选择或取消选择节点。我们需要配置`checkGroupField`（如果需要分组选择）和`mode`（设置为'SIMPLE'或'MULTI'以支持多选）。 4....
NULL 博文链接：https://zyjustin9.iteye.com/blog/2121799
总结来说，ExtJS ComboBoxTree是一个结合了下拉框和树形结构的组件，它提供了一种直观的方式来处理层级数据，并支持复选框选择，适用于需要展示复杂选择关系的场景。通过理解和使用此类组件，可以提升用户界面的交互...