论坛首页 Web前端技术论坛

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

浏览 82935 次
精华帖 (6) :: 良好帖 (18) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-04-12  
http://www.iteye.com/topic/164424
如果能实现和这个结合就好了
0 请登录后投票
   发表时间: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;
};
0 请登录后投票
   发表时间:2008-04-16  
该怎样得到所有选中点的字符串呢?
0 请登录后投票
   发表时间:2008-04-16  
goodboy 写道
http://www.iteye.com/topic/164424
如果能实现和这个结合就好了


这个实现起来很简单,
下拉树的整体方法不变,
只要将下拉使用的树换成本例子的就行了.
0 请登录后投票
   发表时间:2008-04-16  
goodboy 写道
终于搞定取值问题
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;
};


不错!!
也可以使用EXT自带的方法 getChecked( [String attribute], [TreeNode startNode] ) ,得到所有选中结点的数组,再来遍历取结点ID
0 请登录后投票
   发表时间:2008-04-16  
qyp71529 写道
怎么让根接点不出现checkbox???
或者,怎么去掉checkbox不响应后台???


将属性onlyLeafCheckable设为true既可,意思是只有叶子才可选,目录没有checkbox
如:
var tree = new Ext.tree.TreePanel({
    el:'tree-ct',
    width:568,
    height:300,
    checkModel: 'cascade',   //对树的级联多选
    onlyLeafCheckable: true,//只能选择树的叶子
    animate: false,
    rootVisible: false,
    autoScroll:true,
    loader: new Ext.tree.DWRTreeLoader({
        dwrCall:Tmplt.getTmpltTree,
        baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性
    }),
    root: new Ext.tree.AsyncTreeNode({ id:'0' })
});
tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
tree.render();
0 请登录后投票
   发表时间:2008-04-17  
Ext的1.1以及1.1.1版本的树也有CheckBox,只要在构造树中的数据中有checked属性就行。
如某个树节点的json形式
{
   text:"test",
   uid:""
   leaf:false,
   checked:true
}

其中uid为自定义的(对其他人无意义)。
checked属性为true则显示checkbox被打勾,为false则不打勾。

如果某个没有设置checked属性,则不显示checkbox。
0 请登录后投票
   发表时间:2008-04-21  
很好 测试过了 用起来还是不错的
0 请登录后投票
   发表时间:2008-04-21  
xiexueze ,你好,你告诉我了如何得到所选节点的字符串,我做了一个按钮,但不知如何显示。你帮我看看好吗?谢谢了。

var tb = new Ext.Toolbar('toolbar-div'); //创建一个工具条
tb.add(new Ext.Toolbar.Button({
text:'确认选中',
handler:onItemClick,
cls:'x-btn-text-icon blist'
}),

//抄用你的代码 :)
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;
};

//点击实行的函数
function onItemClick(checked){
     alert(checked)
};

0 请登录后投票
   发表时间:2008-04-23  
Ext.tree.TreePanel已经自带方法getChecked,意思是得到树中所有选中的结点集合.

如果使用Ext.tree.TreePanel.prototype.getChecked = function(node){....
重写getChecked方法,这方法得到的是树中所有选中的结点的ID集合,是不一样的哦....

如果是使用自带的,可以这样取到树的所有选中的结点ID

//点击实行的函数
function onItemClick(checked){
    var checkedNodes = tree.getChecked();//tree必须事先创建好.
    var checkedIds = [];
    for(var i=0;i<checkedNodes.length;i++){
        chekcedIds.push(checkedNodes[i].id)
    }
    alert(chekcedIds.join(','));
};


如果使用重写getChecked方法
//点击实行的函数
function onItemClick(checked){
    var chekcedIds = tree.getChecked();//tree必须事先创建好.
    alert(chekcedIds.join(','));
};
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics