点击按钮后会弹出一个窗体，窗体里面包含两个区域，左边的源选择树 和 右边选择后的树，单击确定后会把用户选择后的树的值保存到一个textArea里面
/**
* 遍历节点回调函数并置为选中状态
*
* @param {Object}
* node
*/
var ay_cell_NodeChecked = function(node) {
node.getUI().toggleCheck(true);
};
/**
* 遍历节点回调函数并置为非选中状态
*
* @param {Object}
* node
*/
var ay_cell_NodeNoChecked = function(node) {
node.getUI().toggleCheck(false);
};
/**
* 在取消节点选中状态时，需要判断当前选中父节点是否存在子节点被选中 ay_cell_ChildrenNodes
*
* @param {Object}
* node
*/
var ay_cell_ChildrenNodes = function(node) {
var selNodes = node.childNodes;
node.getUI().toggleCheck(false);
Ext.each(selNodes, function(nodes) {
if (nodes.attributes.checked) {
node.getUI().toggleCheck(true);
}
});
};
/**
* 小区 左边的checkTree
*/
var tree = new Ext.tree.TreePanel({
height : 490,
useArrows : true,
autoScroll : true,
animate : true,
containerScroll : true,
rootVisible : false,
frame : true,
root : {
nodeType : 'async',
children : [{
text : 'To Do',
cls : 'folder',
checked : false,
children : [{
text : 'Go jogging',
leaf : true,
checked : false
}, {
text : 'Take a nap',
leaf : true,
checked : false
}, {
text : 'Climb Everest',
leaf : true,
checked : false
}]
}, {
text : 'Remodel Project',
cls : 'folder',
checked : false,
children : [{
text : 'Finish the budget',
leaf : true,
checked : false
}, {
text : 'Call contractors',
leaf : true,
checked : false
}, {
text : 'Choose design',
leaf : true,
checked : false
}]
}]
},
// dataUrl: '/bsapp/pages/ba/js/basic/tree.json',
listeners : {
'checkchange' : function(node, checked) {
// 暂停触发所有的事件,true不暂停、false暂停
tree.suspendEvents(false);
if (checked) {
// 遍历该节点下所有子节点，包含本节点，fff为回调函数
node.cascade(ay_cell_NodeChecked);
// 遍历该节点向上所有祖先节点，包含本节点，fff为回调函数
node.bubble(ay_cell_NodeChecked);
} else {
node.cascade(ay_cell_NodeNoChecked);// 遍历该节点下所有子节点，包含本节点，no_fff为回调函数
node.parentNode.bubble(ay_cell_ChildrenNodes);// 遍历该节点向上所有祖先节点，不包含本节点，no_ttt为回调函数
}
tree.resumeEvents();// 重新触发事件
}
}
});
/**
* 右边的checkTree
*
* @param {Object}
* node
* @param {Object}
* checked
*/
var tree1 = new Ext.tree.TreePanel({
height : 490,
useArrows : true,
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
rootVisible : false,
frame : true,
root : {
nodeType : 'async'
},
listeners : {
'checkchange' : function(node, checked) {
// 暂停触发所有的事件,true不暂停、false暂停
tree1.suspendEvents(false);
if (checked) {
// 遍历该节点下所有子节点，包含本节点，ay_cell_NodeChecked为回调函数
node.cascade(ay_cell_NodeChecked);
// 遍历该节点向上所有祖先节点，包含本节点，ay_cell_NodeChecked为回调函数
node.bubble(ay_cell_NodeChecked);
} else {
// 遍历该节点下所有子节点，包含本节点，ay_cell_NodeNoChecked为回调函数
node.cascade(ay_cell_NodeNoChecked);
// 遍历该节点向上所有祖先节点，不包含本节点，ay_cell_ChildrenNodes为回调函数
node.parentNode.bubble(ay_cell_ChildrenNodes);
}
// 重新触发事件
tree1.resumeEvents();
}
}
});
/**
* 小区
*
* @memberOf {TypeName}
*/
var ay_cell_formPanel = new Ext.form.FormPanel({
height : "99%",
border : false,
bodyStyle : 'padding:3px;',
layout : 'column',
items : [{
columnWidth : .5,
height : 520,
border : false,
bodyStyle : 'padding:3px;',
items : [{
id : 'search1',
xtype : 'textfield',
width : 191
}, {
id : '111',
border : false,
height : 550,
items : [tree]
}]
}, {
width : 25,
border : false,
bodyStyle : 'padding:1px 2px;',
items : [{
xtype : 'panel',
height : 200,
bodyStyle : "margin:2px",
hideLabel : true,
bodyBorder : false,
border : false
}, {
xtype : 'button',
text : ' > ', // 增加
labelStyle : 'color:red;font-weight:bold;',
width : '100%',
handler : function() {
var msg = '', selNodes = tree.getChecked();
var node1, node2;
Ext.each(selNodes, function(node) {
var radix = tree1.root;
if (node.getDepth() == 1) {
if (null == radix.findChild("id", node.id)) {
node1 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
radix.appendChild(node1);
}
}
if (node.getDepth() == 2) {
node1 = radix.findChild("id",
node.parentNode.id);
if (null == node1.findChild("id", node.id)) {
node2 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
node1.appendChild(node2);
}
}
if (node.getDepth() == 3) {
node2 = node1.findChild("id",
node.parentNode.id);
if (null == node2.findChild("id", node.id)) {
var node3 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
node2.appendChild(node3);
}
}
});
// 展开所有节点
for (var j = 0; j < tree1.root.childNodes.length; j++) {
tree1.root.childNodes[j].expand(true);
}
}
}, {
xtype : 'button',
// 删除
text : ' < ',
width : '100%',
handler : function() {
var selNodes = tree1.getChecked();
var node1, node2;
Ext.each(selNodes, function(node) {
var radix = tree.root;
if (node.getDepth() == 1) {
if (null == radix.findChild("id", node.id)) {
node1 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
radix.appendChild(node1);
}
}
if (node.getDepth() == 2) {
node1 = radix.findChild("id",
node.parentNode.id);
if (null == node1.findChild("id", node.id)) {
node2 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
node1.appendChild(node2);
}
}
if (node.getDepth() == 3) {
node2 = node1.findChild("id",
node.parentNode.id);
if (null == node2.findChild("id", node.id)) {
var node3 = new Ext.tree.TreeNode({
id : node.id,
text : node.text,
leaf : node.leaf,
checked : node.attributes.checked
});
node2.appendChild(node3);
}
}
});
// 去掉所有选中的叶子节点
for (var i = 0; i < selNodes.length; i++) {
if (selNodes[i].isLeaf()) {
selNodes[i].destroy();
}
}
// 去掉所有空子节点的父节点
for (var ii = (tree1.getChecked().length - 1); ii >= 0; ii--) {
if (tree1.getChecked()[ii].childNodes == "") {
tree1.getChecked()[ii].destroy();
}
}
// 展开所有节点
tree.getRootNode().expand(true);
}
}]
}, {
columnWidth : .5,
height : 520,
border : false,
bodyStyle : 'padding:3px;',
items : [{
id : 'search2',
xtype : 'textfield',
width : 191
}, {
id : 'tree1',
border : false,
height : 550,
items : [tree1]
}]
}]
});
/**
* 小区 窗体
*/
var ay_cell_win = new Ext.Window({
id : 'win1',
title : '选择小区',
width : 450,
height : 607,
modal : true,
bodyStyle : 'padding:5px;',
draggable : true,
constrain : true,
closeAction : 'hide',
items : [ay_cell_formPanel],
buttons : [{
id : 'sure',
text : '确定',
handler : function() {
// 树的内容显示到下面的textArae里面
ay_cell_win.hide();
var textStr = "";
var treeRoot = tree1.root;
var nodes = treeRoot.childNodes;
Ext.each(nodes, function(node) {
textStr += node.text;
textStr += " { ";
if (node.childNodes) {
Ext.each(node.childNodes, function(chlidNode) {
textStr += chlidNode.text;
textStr += ", ";
})
// 去掉最后一个逗号
textStr = textStr.substring(0, textStr.length - 2);
}
textStr += " }, ";
})
// 去掉最后一个逗号
textStr = textStr.substring(0, textStr.length - 2);
// console.log(textStr);
Ext.get("textareas").dom.value = textStr;
}
}, {
id : 'cancel',
text : '取消',
handler : function() {
ay_cell_win.hide();
}
}]
});
ay_btn = new Ext.Button({
id : 'button1',
xtype : 'button',
width : 80,
text : '选择'
});
ay_btn.on('click', function() {
// 在初始化时加载数据
ay_cell_win.show();
tree.root.expand(true);
tree1.root.expand(true);
});
分享到：
相关推荐
"EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中，它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性： 1. **树形结构**：每个节点...
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件，其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序，它提供了一系列...
2. **displayField**：指定在文本框中显示的字段名，当用户选择树中的一个节点时，这个字段的值将显示在输入框中。 3. **valueField**：用于保存选中节点的标识字段，这通常用于后续处理或提交表单时识别选定的值。...
Ext2.0的下拉树结合了下拉框和树的功能，用户可以像选择下拉列表中的项一样选择树形结构中的节点。创建下拉树需要使用`Ext.form.ComboBox`，并配置其`store`为树形数据的`TreeStore`，`displayField`为显示的字段，...
Ext下拉列表树是一种在ExtJS框架中实现的组件，它结合了下拉列表和树形结构的功能，为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见，尤其适用于需要展现多级...
下拉树（Dropdown Tree）是EXT中的一个组件，它结合了下拉菜单和树形结构，通常用于选择具有层级关系的数据，比如组织结构、目录树或者地区层级等。 在EXT中，创建下拉树的过程可能涉及到以下关键知识点： 1. **...
### 关于 Ext.js 中树目录开发使用的关键知识点 在现代 Web 开发中，Ext.js 是一个非常流行的 JavaScript 框架，它提供了丰富的 UI 组件和功能强大的数据处理能力。本文将详细介绍 Ext.js 中关于树目录开发使用的...
在本主题中，“ext树的控制选择和撤销”指的是EXT树组件提供的功能，允许用户进行多选、单选，并支持撤销这些操作。 EXT树的核心类是`Ext.tree.TreePanel`，它提供了丰富的配置项和方法来定制和操作树形结构。控制...
EXT COMBO是EXT库中的一个组件，它提供了一个可下拉的输入框，通常用于选择列表中的一个或多个项。而在某些情况下，我们可能需要在下拉框中展示树形结构的数据，这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是...
复选框树（Checked Tree）允许用户通过复选框来选择或取消选择树结构中的节点。这种功能对于需要用户进行多级选择的情况非常有用，例如在权限管理、目录结构操作或者配置设置中。以下是对这个特性的详细解释： 1. *...
Ext2.0不仅仅实现了复选框的树形菜单，而且使得在选中某个节点时，如果有子节点，那么就能够将所有的字节点全部选中，当然你也可以直接选择你希望的节点。但是，当你第一次选中某个有子节点但是子节点并没有展开的...
4. 将树转换为下拉菜单：使用Ext.form.field.ComboBox，配置其store为树数据模型，并设置displayField为显示的字段，valueField为选择项的标识字段。 下拉表格（ComboBox with Grid）： 下拉表格组件则是下拉菜单...
在Ext Grid中，你可以定义列（columns）来展示数据的不同属性，通过store来绑定数据源，以及使用各种插件和功能，如行选择、分组、自定义编辑等。在提供的"extdemo"压缩包中，可能包含了一个展示如何创建和配置Grid...
EXT 分页与树形结构是EXT JavaScript框架中的两种核心特性，它们在开发高效、互动性强的Web应用程序时扮演着重要角色。EXT是一个强大的客户端JavaScript库，用于构建富互联网应用程序（RIA）。在这里，我们将深入...
利用Ext实现静态树（一次加载所有节点的树） 在今天的IT行业中，树形结构是一种非常常见的数据结构，尤其是在Web应用程序中。在这种情况下，我们通常会遇到一个问题，即如何将树形结构的数据加载到前台，以便用户...
标题中的“Ext TreeCombo 树形下拉框”是指在ExtJS库中使用的一种特定的UI组件，TreeCombo。这是一个结合了树形结构和下拉框功能的控件，允许用户从一个层次化的数据结构中选择一个或多个项。在ExtJS中，TreePanel...
8. **多选与复选**：通过`selModel`配置，你可以实现树形菜单的多选或单选功能，甚至可以添加复选框来支持多级选择。 综上所述，创建Ext JS树形菜单需要理解数据模型、配置项、事件处理、样式定制等多个方面。通过...
【磁盘目录树（EXT-js）】是一种使用EXT-js库构建的前端应用，它主要用于在Web界面中展示计算机硬盘上的目录结构，使用户能够像在操作系统中那样浏览、选择和操作文件夹。EXT-js是一个强大的JavaScript组件库，提供...
TreeCombo是Ext JS库中的一个组件，它结合了树形结构和下拉框的功能，为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中，这种组件非常实用，尤其当用户需要从层次化的选项中进行选择时。 ...
在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能，即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性，使得操作更加直观和便捷。 在ExtJS中，树形...