• 热门专题

extjs treepanel的ctrl、shift多选、连选功能实现

作者:小雷的博客  发布日期:2011-11-07 11:04:39
Tag标签:extjs  treepanel  ctrl  shift多选  
  •        最近需要实现一个树的多选连选功能,但发现extjs的多选模型MultiSelectionModel只提供了类似ctrl的多选功能,并没有提供shift连选的功能。 网上也没有关于实现此功能的例子,于是自己重写了onNodeClick方法,供大家参考。

     

    // 存放第一次点击的节点id   
    var node1 = null;  
    var mst=new Ext.tree.MultiSelectionModel({  
      
    // 实现ctrl,shift多选 by menglei   
    onNodeClick : function(n, e) {  
        // 获取该父节点下所有子节点   
        var childNodes = n.parentNode.childNodes;  
        if (e.shiftKey) {  
            if (node1 != null) {  
                var v1 = v2 = v3 = 0;  
                // 获取第一次点击的节点位置   
                for (var i = 0; i < childNodes.length; i++) {  
                    if (childNodes[i].id == node1) {  
                        v1 = i;  
                        break;  
                    }  
                }  
                // 获取按shift点击的节点位置   
                for (var i = 0; i < childNodes.length; i++) {  
                    if (childNodes[i].id == n.attributes.id) {  
                        v2 = i;  
                        break;  
                    }  
                }  
                // alert('v1:'+v1+" v2:"+v2);   
                // 反向选择   
                if (v1 > v2) {  
                    v3 = v2;  
                    v2 = v1;  
                    v1 = v3;  
                }  
                // 选中当前节点   
                this.select(n, e);  
                // alert('v1:'+v1+" v2:"+v2);   
                // 选择所选区间内节点   
                for (var i = 0; i < childNodes.length; i++) {  
                    if (i >= v1 && i < v2 + 1) {  
                        this.select(childNodes[i], e,  
                        e.shiftKey);  
                    } else {  
                        continue;  
                    }  
                }  
            } else {  
                // 选中当前节点   
                this.select(n, e);  
                node1 = n.attributes.id;  
            }  
      
        } else if (e.ctrlKey) {  
            this.select(n, e, e.ctrlKey);  
            node1 = null;  
        } else {  
            // 选中当前节点   
            this.select(n, e);  
            node1 = n.attributes.id;  
        }  
      
    }  
    })  
    
About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规