今天在 http://www.extjs.org.cn/index.php?q=node/223 看到一篇关于带checkbox的ext tree正好现在需要.写好后贴出来.主要内容是参照http://www.extjs.org.cn/index.php?q=node/223写的.但是不知道怎么表明转载的.只好在这里声明下.
html代码如下
<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;
//选择ColumnTree也应该可以.
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' //数据url
})
});
//点击树节点前面的 checked.将节点下的check选中.(功能貌似不太好用)
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:'0' //这里我默认的跟节点id为 0
});
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>
下面是'0005_checkbox_reorder_tree.php'中给的数据
我做的方法和他的有些出入.按照例子给出的数据源.作者应该是将全部的数据拼好后一起返回.这样做在数据大的时候.可能会影响到性能.我参照我们老大的方法(老大的方法是当点击节点时,将该节点下的数据拼好.然后返回.这样每次通过父节点,如查询).做了些修改.
原来'0005_checkbox_reorder_tree.php'中的数据
[{"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"}]
通过修改后返回的数据
//第一次的数据
[{id: 1, text: '第一次', checked: false, leaf:false, iconCls: 'task-folder' }]
//第二次(点击节点)的数据
[{
id: 2,
text: '2,
checked: false,
leaf: false,
iconCls: 'task-folder'
}, {
id: 19,
text: '3,
checked: false,
leaf: false,
iconCls: 'task-folder'
}, {
id: 114,
text: '4,
checked: false,
leaf: false,
iconCls: 'task-folder'
}, {
id: 132,
text: '5,
checked: false,
leaf: false,
iconCls: 'task-folder'
}]
其实2个方法.没什么太大的分别.只是第一个是一次性的将数据全部查询出来.第二个是分多次.
(个人感觉,第一个方法.要拼大的字符串.要把去全部的查询出来.需要一个递归.而且拼字符串.容易错.错了不方便找.第二个方法.每次只拼写很好的字符串.比较第一个能方便写.但是到底那个效率更高....俺就不知道了.)
分享到：
相关推荐
在IT领域，尤其是在前端开发中，"带复选框JS树"是一种常见且实用的数据展示方式，它将数据结构以树形的方式呈现，并且每个节点都带有复选框，允许用户进行多选操作。这样的设计在权限管理、配置设置、目录浏览等场景...
在IT界，尤其是在前端开发中，"带复选框的树形菜单"是一种常见的交互元素，广泛应用于数据层级结构的展示和操作。这种菜单结构能够有效地组织和展示具有层次关系的数据，例如文件系统、组织架构或者多级分类等。下面...
在网页设计和开发中，树形复选框是一种常见的用户界面元素，用于提供层次结构的选择选项。本项目通过结合JavaScript和CSS技术，实现了一个具有展缩功能和选中数显示的树形复选框组件。下面我们将深入探讨这个组件的...
在Flex开发中，创建一个带有复选框的列表树是一种常见的需求，这通常用于实现用户对多级数据的筛选和选择。"Flex实现带复选框的列表树"这一主题涵盖了Flex编程、UI组件设计以及事件处理等多个方面的知识点。下面我们...
在IT领域，尤其是在前端开发中，"带复选框checkbox的tree"是一种常见的用户界面元素，用于展示层次结构数据，并允许用户进行多级选择。这种组件通常被用于权限管理、目录浏览、数据分类等场景。下面我们将深入探讨与...
但是最近公司需要做一个带复选框的树形结构，并且最关键的是要嵌入到JSP页面中，传递的数据不是用JSON传递的，是直接通过后端跳JSP页面的方式来的，所以就没有用网上的插件，就自己写了一下简单的实现。
**jQuery高性能带复选框的树形结构插件——highchecktree** 在Web开发中，树形结构常常用于展示层级关系的数据，例如组织结构、文件系统等。`highchecktree`是一个专门针对这种情况设计的jQuery插件，它能高效地...
在IT领域，尤其是在前端开发中，"tree树形结构带复选框" 是一个常见的需求，主要用于展现层次化的数据，并且允许用户进行选择操作。在HTML中实现这样的功能，通常会结合JavaScript、CSS以及可能的库或框架如jQuery、...
"带复选框"的JS树形菜单则更进一步，允许用户通过勾选复选框来选择或操作树节点，为用户提供了一种直观且高效的多选操作方式。 在构建带复选框的JS树时，主要涉及以下几个关键知识点： 1. **HTML结构**：首先，...
在描述中提到的“java Swing带复选框的树”，即在JTree的基础上增加了复选框功能，允许用户对树结构中的节点进行多选操作，这样的设计常见于文件管理器或配置设置界面。 复选框树的实现主要涉及到以下几个关键知识...
总结来说，带复选框的多级目录树是一种高效的数据组织和操作方式，结合全选和反选功能，能极大地提高用户的操作效率。在实现时，我们需要关注复选框的状态管理、多级目录树的数据结构以及父子节点间的联动逻辑，确保...
在这个场景中，我们讨论的是一个“非常经典的带复选框的树形菜单”，这指的是在每个菜单节点上添加了复选框功能，使得用户能够对各个节点进行选择，同时保持清晰的层级关系。 复选框菜单是交互设计中的一个重要组成...
在C#编程中，创建一个带复选框的树形菜单是常见的用户界面设计需求，尤其是在Windows Forms或WPF应用程序中。这样的设计可以提供一种直观的方式，让用户在多个层次的数据结构中选择或筛选项目。本篇文章将深入探讨...
在IT行业中，尤其是在前端开发领域，"CheckBox分级选中 复选框 上下级 联动"是一个常见的功能需求，通常应用于具有层级结构的数据展示和交互场景，比如树形菜单、组织架构选择等。这个功能的核心是实现复选框...
### 带复选框的CTreeCtrl响应复选消息 在Windows编程中，`CTreeCtrl` 是一个非常常用且强大的控件，用于显示树形结构的数据。它支持多种风格，包括带有复选框的功能。本文将详细介绍如何在带有复选框的 `CTreeCtrl`...
在Flex中，Tree组件是用于显示层次结构数据的控件，而"flex带复选框的tree"（Flex CheckboxTree）则是对Tree组件的一种扩展，增加了复选框功能，用户可以对树形结构的节点进行选择或全选操作，常用于权限管理、配置...
"带有复选框的JS树状菜单"是一个常见的需求，它允许用户通过视觉层次结构来组织和选择数据。这种类型的菜单常用于文件管理器、设置面板或权限配置等场景。下面将详细介绍这个主题涉及的关键知识点。 首先，我们需要...
本文将深入探讨一个特定的UI组件——“带复选框的多选树控件”，该控件支持XML作为数据源，这使得数据管理和呈现更加灵活。 首先，让我们了解“带复选框的树控件”是什么。在Windows应用程序中，树控件是一种常见的...