EXT2.0checkbox树的扩展(支持单选,级联多选,只选叶子等)-搜索墙

1 2 3 4 5 6 7 8 9

EXT2.0checkbox树的扩展(支持单选,级联多选,只选叶子等)

1楼 xiexueze 2008-02-23

在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的

Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现

还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度

在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决

对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性

扩展的功能点有：
一、支持只对树的叶子进行选择
??? 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
??? 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false

二、支持对树的单选
??? 只允许选择一个结点
??? 使用时，只需在声明树时，加上属性 checkModel: "single" 既可

三、支持对树的级联多选
??? 当选择结点时，自动选择该结点下的所有子结点，或该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
??? 使用时，只需在声明树时，加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
??? cascade ：级联选中所有父结点和子结点
??? parentCascade ：级联选中所有父结点
??? childCascade? ：级联选中所有子结点

四、添加"check"事件
??? 该事件会在树结点的checkbox发生改变时触发
??? 使用时，只需给树注册事件,如：
??? tree.on("check",function(node,checked){...});

默认情况下，checkModel为'multiple'，也就是多选；onlyLeafCheckable为false，所有结点都可选

使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.

例如：

    var tree = new Ext.tree.TreePanel({
        el:'tree-ct',
        width:568,
        height:300,
        checkModel: 'cascade',   //对树的级联多选
        onlyLeafCheckable: false,//对树所有结点都可选
        animate: false,
        rootVisible: false,
        autoScroll:true,
        loader: new Ext.tree.DWRTreeLoader({
            dwrCall:Tmplt.getTmpltTree,
            baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
        }),
        root: new Ext.tree.AsyncTreeNode({ id:'0' })
    });
    tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
    tree.render();

需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 就行了

TreeCheckNodeUI.rar (3.9 KB)
描述: 2008-07-31 修改single单选不起效
下载次数: 2080

2楼 goodboy 2008-02-23

非常感谢，正好用着，测试一下。

3楼 shanliren1986 2008-02-25

太感谢了。马上就用上了。

4楼 godson_2003 2008-02-26

楼主返回的json字符串是什么格式的阿

我的怎么出不来checkbox呢？

我返回的字符串：[{

        id: 1,

        text: 'A leaf Node',

        leaf: true

    },{

        id: 2,

        text: 'A folder Node',

        children: [{

            id: 3,

            text: 'A child Node',

            leaf: true

        }]

   }]

5楼 xiexueze 2008-02-26

不知您的树是怎样创建的呢，我试了一下你返回的JSON字符串，是正确的
我的代码如下：

<%@ page language="java" contentType="text/html; charset=GB2312" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>

	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ext-all.css" />
 	
 	<script src="<%=request.getContextPath() %>/js/ext/ext-base.js"></script>
 	<script src="<%=request.getContextPath() %>/js/ext/ext-all.js"></script>
    <script type="text/javascript" src="TreeCheckNodeUI.js"></script>

	<script>
		var imagePath = '../../../images';
		Ext.BLANK_IMAGE_URL = imagePath+'/default/s.gif';
		Ext.onReady(function(){
		    var tree = new Ext.tree.TreePanel({
		        applyTo:'tree-ct',
		        width:568,
		        height:300,
		        checkModel: 'cascade',
		        onlyLeafCheckable: false,
		        animate: false,
		        rootVisible: true,
		        autoScroll:true,
				loader: new Ext.tree.TreeLoader({
					dataUrl:'getNodes.jsp',
					baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
		        }),
		        root: new Ext.tree.AsyncTreeNode({
		            id:'0',text:'根结点'
		        })
		    });
			tree.getEl().center();
		    tree.getRootNode().expand();
		});
	</script>
</head>
<body>

<div id="tree-ct">

</body>
</html>

getNodes.jsp直接返回你那JSON字符串:

<%@ page language="java" contentType="text/html; charset=GB2312" %>
<%
	String nodes = "[{ id: 1, text: 'A leaf Node', leaf: true },{ id: 2, text: 'A folder Node', children: [{ id: 3, text: 'A child Node', leaf: true }] }]";
	out.print( nodes );
%>

查看图片附件

6楼 godson_2003 2008-02-27

找到问题在哪了

我是根据你在extjs上的例子做的，那里代码有点问题
baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI}
改成
baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI}
就没有问题了

7楼 jyfln1234 2008-03-21

在ie下面，选中子结点，收起父节点，再打开父节点，刚才选中的子结点都取消选择了！不知道是哪里的问题啊！
在firefox下没有这个问题！
这是怎么回事那！？

8楼 xiexueze 2008-03-25

jyfln1234 写道

我觉得这是EXT的一个BUG,将animate改成 false,就行了

9楼 qyp71529 2008-04-03

怎么让根接点不出现checkbox？？？
或者，怎么去掉checkbox不响应后台？？？

10楼 goodboy 2008-04-12

这个非常不错，不会如何在form中应用

11楼 goodboy 2008-04-12

http://www.javaeye.com/topic/164424
如果能实现和这个结合就好了

12楼 goodboy 2008-04-16

终于搞定取值问题
Ext.tree.TreePanel.prototype.getChecked = function(node){
var checked = [], i;
var root = false;
if( typeof node == 'undefined' ) {
node = this.getRootNode();
root = true;
}
if( node.attributes.checked || root) {
if (!root)
checked.push(node.id);
if( !node.isLeaf() ) {
for( i = 0; i < node.childNodes.length; i++ ) {
checked = checked.concat( this.getChecked(node.childNodes[i]) );
}}}
return checked;
};

1 2 3 4 5 6 7 8 9

热门关注
标题	回复	点击
EXT2.0checkbox树的扩展(支持单选,级联多选,只选叶子等)	96	742
ExtJS发布2.1版本，但是更改了License，希望大家就此展开讨论	216	659
EXT开发的oa界面赏析最新更新	92	526
Gwt-Ext学习笔记之基础篇	61	491
谈一谈我对于目前国人对于EXTJS的错误看法	95	436
终于可以在EXT中随便使用iframe了	77	333
讨论Ext项目的性能优化	69	305
最新EXTJS2.2离线帮助文档CHM版制作Hahaman	17	292
下拉多选的树（Ext.ux.ComboBoxCheckTree）	13	289
也来秀秀，我的Ext学习成果	95	273