|
精华帖 (6) :: 良好帖 (18) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-23
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
例如： 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 } 就行了 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-02-23
非常感谢，正好用着，测试一下。
|
| 返回顶楼 | |
|
发表时间：2008-02-25
太感谢了 。马上就用上了。
|
| 返回顶楼 | |
|
发表时间：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 }] }] |
| 返回顶楼 | |
|
发表时间：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 );
%>
|
| 返回顶楼 | |
|
发表时间：2008-02-27
找到问题在哪了
我是根据你在extjs上的例子做的，那里代码有点问题 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 改成 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 就没有问题了 |
| 返回顶楼 | |
|
发表时间：2008-03-21
在ie下面，选中子结点，收起父节点，再打开父节点，刚才选中的子结点都取消选择了！不知道是哪里的问题啊！
在firefox下没有这个问题！ 这是怎么回事那！？ |
| 返回顶楼 | |
|
发表时间：2008-03-25
jyfln1234 写道 在ie下面，选中子结点，收起父节点，再打开父节点，刚才选中的子结点都取消选择了！不知道是哪里的问题啊！
在firefox下没有这个问题！ 这是怎么回事那！？ 我觉得这是EXT的一个BUG,将animate改成 false,就行了 |
| 返回顶楼 | |
|
发表时间：2008-04-03
怎么让根接点不出现checkbox？？？
或者，怎么去掉checkbox不响应后台？？？ |
| 返回顶楼 | |
|
发表时间：2008-04-12
这个非常不错，不会如何在form中应用
|
| 返回顶楼 | |
