EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
2010-01-02 09:46
281 查看
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有：
* 一、支持只对树的叶子进行选择
* 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
* 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
*
* 二、支持对树的单选
* 只允许选择一个结点
* 使用时，只需在声明树时，加上属性 checkModel: "single" 既可
*
* 二、支持对树的级联多选
* 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
* 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
*
* 三、添加"check"事件
* 该事件会在树结点的checkbox发生改变时触发
* 使用时，只需给树注册事件,如：
* tree.on("check",function(node,checked){...});
*
* 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
*
* 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
**/
实例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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>
<script language="javascript">
Ext.tree.TreeCheckNodeUI = function(){ //Ext.tree.TreeCheckNodeUI插件
//'multiple':多选; 'single':单选; 'cascade':级联多选
this.checkModel = 'multiple';
//only leaf can checked
this.onlyLeafCheckable = false;
Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
renderElements: function(n, a, targetNode, bulkRender){
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
// add some indent caching, this helps performance when rendering a large tree
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var cb = (!this.onlyLeafCheckable || a.leaf);
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = ['<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">', '<span class="x-tree-node-indent">', this.indentMarkup, "</span>", '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />', '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />', cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '', '<a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ', a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a></div>", '<ul class="x-tree-node-ct" style="display:none;"></ul>', "</li>"].join('');
var nel;
if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
}
else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
Ext.fly(this.checkbox).on('click', this.check.createDelegate(this, [null]));
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
},
// private
check: function(checked){
var n = this.node;
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
if (checked === null) {
checked = this.checkbox.checked;
}
else {
this.checkbox.checked = checked;
}
n.attributes.checked = checked;
tree.fireEvent('check', n, checked);
if (!this.onlyLeafCheckable && this.checkModel == 'cascade') {
var parentNode = n.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
if (!n.expanded && !n.childrenRendered) {
n.expand(false, false, this.childCheck);
}
else {
this.childCheck(n);
}
}
else
if (this.checkModel == 'single') {
var checkedNodes = tree.getChecked();
for (var i = 0; i < checkedNodes.length; i++) {
var node = checkedNodes[i];
if (node.id != n.id) {
node.getUI().checkbox.checked = false;
node.attributes.checked = false;
tree.fireEvent('check', node, false);
}
}
}
},
// private
childCheck: function(node){
var a = node.attributes;
if (!a.leaf) {
var cs = node.childNodes;
var csui;
for (var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
if (csui.checkbox.checked ^ a.checked)
csui.check(a.checked);
}
}
},
// private
parentCheck: function(node, checked){
var checkbox = node.getUI().checkbox;
if (typeof checkbox == 'undefined')
return;
if (!(checked ^ checkbox.checked))
return;
if (!checked && this.childHasChecked(node))
return;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
},
// private
childHasChecked: function(node){
var childNodes = node.childNodes;
if (childNodes || childNodes.length > 0) {
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},
toggleCheck: function(value){
var cb = this.checkbox;
if (cb) {
var checked = (value === undefined ? !cb.checked : value);
this.check(checked);
}
}
});
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo: 'container',
width: 568,
height: 300,
checkModel: 'cascade',
onlyLeafCheckable: false,
animate: false,
rootVisible: false,
autoScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: '../manager/user.jsp?type=menuupdate',
baseAttrs: {
uiProvider: Ext.tree.TreeCheckNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
id: '0',
text: '根结点'
})
});
tree.getEl().center();
tree.getRootNode().expand();
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有：
* 一、支持只对树的叶子进行选择
* 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
* 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
*
* 二、支持对树的单选
* 只允许选择一个结点
* 使用时，只需在声明树时，加上属性 checkModel: "single" 既可
*
* 二、支持对树的级联多选
* 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
* 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
*
* 三、添加"check"事件
* 该事件会在树结点的checkbox发生改变时触发
* 使用时，只需给树注册事件,如：
* tree.on("check",function(node,checked){...});
*
* 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
*
* 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
**/
实例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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>
<script language="javascript">
Ext.tree.TreeCheckNodeUI = function(){ //Ext.tree.TreeCheckNodeUI插件
//'multiple':多选; 'single':单选; 'cascade':级联多选
this.checkModel = 'multiple';
//only leaf can checked
this.onlyLeafCheckable = false;
Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
renderElements: function(n, a, targetNode, bulkRender){
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
// add some indent caching, this helps performance when rendering a large tree
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var cb = (!this.onlyLeafCheckable || a.leaf);
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = ['<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">', '<span class="x-tree-node-indent">', this.indentMarkup, "</span>", '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />', '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />', cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '', '<a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ', a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a></div>", '<ul class="x-tree-node-ct" style="display:none;"></ul>', "</li>"].join('');
var nel;
if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
}
else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
Ext.fly(this.checkbox).on('click', this.check.createDelegate(this, [null]));
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
},
// private
check: function(checked){
var n = this.node;
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
if (checked === null) {
checked = this.checkbox.checked;
}
else {
this.checkbox.checked = checked;
}
n.attributes.checked = checked;
tree.fireEvent('check', n, checked);
if (!this.onlyLeafCheckable && this.checkModel == 'cascade') {
var parentNode = n.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
if (!n.expanded && !n.childrenRendered) {
n.expand(false, false, this.childCheck);
}
else {
this.childCheck(n);
}
}
else
if (this.checkModel == 'single') {
var checkedNodes = tree.getChecked();
for (var i = 0; i < checkedNodes.length; i++) {
var node = checkedNodes[i];
if (node.id != n.id) {
node.getUI().checkbox.checked = false;
node.attributes.checked = false;
tree.fireEvent('check', node, false);
}
}
}
},
// private
childCheck: function(node){
var a = node.attributes;
if (!a.leaf) {
var cs = node.childNodes;
var csui;
for (var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
if (csui.checkbox.checked ^ a.checked)
csui.check(a.checked);
}
}
},
// private
parentCheck: function(node, checked){
var checkbox = node.getUI().checkbox;
if (typeof checkbox == 'undefined')
return;
if (!(checked ^ checkbox.checked))
return;
if (!checked && this.childHasChecked(node))
return;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
},
// private
childHasChecked: function(node){
var childNodes = node.childNodes;
if (childNodes || childNodes.length > 0) {
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},
toggleCheck: function(value){
var cb = this.checkbox;
if (cb) {
var checked = (value === undefined ? !cb.checked : value);
this.check(checked);
}
}
});
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo: 'container',
width: 568,
height: 300,
checkModel: 'cascade',
onlyLeafCheckable: false,
animate: false,
rootVisible: false,
autoScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: '../manager/user.jsp?type=menuupdate',
baseAttrs: {
uiProvider: Ext.tree.TreeCheckNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
id: '0',
text: '根结点'
})
});
tree.getEl().center();
tree.getRootNode().expand();
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
- .NET漫游指南-004-在dataGrid中添加CheckBox支持单选，多选，全选功能
- Ext JS4百强应用: combobox+tree下拉树 支持单选多选级联选择 --第7强
- EXTjS4下拉树 支持单选多选级联选择 comboxtree
- 如何在Android的ListView中构建CheckBox和RadioButton列表(支持单选和多选的投票项目示例)
- Android在listview添加checkbox实现单选多选操作问题
- 解决Android在listview添加checkbox实现单选多选操作问题
- iOS：图片选择器（单选、多选、支持arc、支持iOS7+）
- checkbox实现单选多选
- Angular Js 里面table, checkbox制作可多选，单选的表格
- EXT2.0 checkbox树的扩展
- android学习总结（16.08.29）单选按钮（RadioButton）,多选按钮(CheckBox)和开关按钮（Switch）
- 开源DataGridView扩展（6） 简单实现checkbox行选级联。
- Android中ListView + CheckBox实现单选、多选效果
- JQuery表格插件：鼠标移过变色，双击打开新页面，单选（支持多选）变色
- winform 两个listBox左右互移，支持多选或单选移动，移动时源listBox除移已除动的Items
- 设计一个JFrame窗口，输入学生的基本信息，包括学号、姓名、学院、专业（下拉列表）、班级、籍贯（级联）、性别（单选按钮）、爱好（多选）、备注等，在界面中包括提交和重填按钮。提交后弹出窗口显示学生信息
- ExpandbleListview 二级、三级数据显示，CheckBox 单选、多选
- 完美解决Android在listview添加checkbox实现单选多选操作问题
- Android在listview添加checkbox实现单选多选操作问题