extjs4 tree 父子节点联级勾选，半选节点半透明处理

最新推荐文章于 2023-09-14 18:36:22 发布

diaotan3238

最新推荐文章于 2023-09-14 18:36:22 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/zhuri/archive/2013/01/28/2879621.html

版权

1.extjs3有节点半选，有node.getUI（）

1 node.getUI().toggleCheck(parentChk);//节点选中状态
2 node.getUI().checkbox.indeterminate = true; //半选中状态
3 node.getUI().checkbox.indeterminate = false;取消半选中状态

extjs4中没有。因此对于节点的子节点未全部选中，复选框须做区别显示的问题，常规API中找不到对应方式方法。参考优快云上处理节点disable的显示处理方法，做类似处理。

参考链接：http://blog.youkuaiyun.com/kunoy/article/details/7930045

2.父子节点联级勾选，网上有说用fireEvent( String eventName, Object... args )递归触发事件，反正我这么处理是没有效果，做不到所有父子节点都联级，变通一下用递归方法处理也可以解决此问题。

思路：直接改js生成页面css。因为extjs在节点收缩展开时都有对节点css做更改，所以在收缩时，展开后都要处理一下节点及其子节点的样式（此方式效果不理想，有延迟的迹象）。

后记：重定义源码来解决显示问题，只需要修改Ext.tree.Column中的treeRenderer函数即可,能完美解决半选中的显示问题。

原思路代码展示：

  1 //我这里用的是treeStore，其实直接用treePanel也是一样的
  2 treeStore.on('itemcollapse', function (node,opt) {setNode(treeStore,node,node.isHalfSelected)}, treeStore);
  3 treeStore.on('afteritemexpand', function (node,opt) {setNode(treeStore,node,node.isHalfSelected);setChildStyle(treeStore,node)}, treeStore);
  4 treeStore.on('checkchange', function (node, checked, opt) {treeStoreSelectedSon(node,checked);treeStoreSelectedFather(node,checked);}, treeStore);
  5     //递归选子节点    
  6     var treeStoreSelectedSon = function(node,checked) 
  7     {              
  8            //node.expand();
  9            node.isHalfSelected = false;
 10            node.eachChild(function(child) {         //循环下一级的所有子节点 
 11                   if (null != child.get('checked')) //这里这么写是因为后台有些节点的checked没赋值，其在web上不显示复选框，这里就过滤掉对它们
 12                   {
 13                         child.set('checked', checked);       //选中 
 14                         treeStoreSelectedSon(child,checked);          //递归选中子节点
 15                   }                                       
 16            });  
 17     }   
 18     
 19     //递归选父节点    
 20     var treeStoreSelectedFather = function(node,checked) 
 21     {
 22         var parent = node.parentNode;   //获取父节点 
 23         var flag = false;           
 24         var hasUnCheckedChild = false;
 25         var isHalfSelected = false;
 26         if (null != parent) {                 //是否有子节点            
 27           parent.eachChild(function(child) {         //循环下一级的所有子节点 
 28                     
 29                   if (child.get('checked') == true)
 30                   {
 31                         flag = true;
 32                         if (child.isHalfSelected)
 33                         {
 34                               isHalfSelected = true;
 35                         }
 36                   } 
 37                   else if (child.get('checked') == false)
 38                   {
 39                         hasUnCheckedChild = true;
 40                   }
 41            });
 42 
 43              parent.set('checked', flag);
 44              if ((flag && hasUnCheckedChild) || isHalfSelected)
 45              {
 46                    parent.isHalfSelected = true;
 47                    setNode(codeChangeTree,parent,true);
 48              }
 49              else
 50              {
 51                    parent.isHalfSelected = false;
 52                    setNode(codeChangeTree,parent,false);
 53              }
 54              treeStoreSelectedFather (parent,flag);
 55                        
 56         } 
 57     } 
 58 
 59 function setNode(tree,node,value){
 60         var checkbox=getCheckbox(tree,node);
 61         //checkbox.disabled=value;
 62         //半选中状态
 63         if (node.isHalfSelected != null)
 64         {
 65             if(value==true)
 66             {
 67                 checkbox.className=checkbox.className.replace('Diy-mask','')+' Diy-mask';
 68             }
 69             //取消半选中
 70             else
 71             {
 72                 checkbox.className=checkbox.className.replace('Diy-mask','');
 73             }
 74         }        
 75     }
 76     
 77     function getCheckbox(tree,node){
 78         var td=tree.getView().getNode(node).firstChild.firstChild;
 79         var checkbox=td.getElementsByTagName('input')[0];
 80         return checkbox;
 81     } 
 82     
 83     function setChildStyle(tree,node) 
 84     {          
 85         if (node.isExpanded())
 86         {
 87             node.eachChild(function(child) {         //循环下一级的所有子节点                      
 88                   if (child.isHalfSelected != null)
 89                   {
 90                         var checkbox=getCheckbox(tree,child);
 91                          //半选中状态
 92                       if(child.isHalfSelected == true)
 93                       {                     
 94                            checkbox.className=checkbox.className.replace(' Diy-mask','')+' Diy-mask';
 95                       }
 96                         //取消半选中
 97                       else
 98                       {
 99                           checkbox.className=checkbox.className.replace(' Diy-mask','');
100                       }              
101                       setChildStyle(tree,child);
102                   }                     
103             });
104         }           
105     }

css

1 .Diy-mask {
2     opacity: 0.5;                   //chrome
3     z-index: 100;
4     filter:alpha(opacity=50);  //IE必须加这句
5    -moz-opacity: 0.5;             //火狐    
6 }

----------------------------------------------------------华丽分割线，以下是一些extjs零碎-------------------------------------------------------------------------

另附更换树叶子节点图标的css，直接放到css中即可，但是css要放到extjs css之后引入，目的是覆盖extjs css中的样式。

.x-tree-icon-leaf{
 background-image:url(../images/test.png);
}

更换进度条样式，对进度条的字体加粗，居中显示

.x-progress-text {
  overflow: hidden;
  position: absolute;
  padding: 0 5px;
  height: 14px;
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  text-align: center; 
}

树节点被选中后的样式，节点被选中后文字呈蓝色

.x-tree-checked{
text-decoration:none !important;;
color:blue !important;
}

标签水平垂直居中样式

.lableCentre{
    line-height:20px;
    vertical-align:middle;
    font-weight:bold;
}
//引用
{
  xtype: 'label',
  id : 'testLabel',
  text : '',
  cls : 'lableCentre'
}

请求大量数据时，param中参数过长，用get请求浏览器会报错，需要post请求

 proxy: {
        type: 'ajax',
        url: basePath + 'TestSelect?parameter=getTestList',
        actionMethods: { read: 'POST' },//post设置
        reader: {
            type: 'json',            
            idProperty: 'name'
        }
    },

树中文本可以被选中用于复制粘贴

viewConfig:{   
           enableTextSelection:true  
},

--OVER

转载于:https://www.cnblogs.com/zhuri/archive/2013/01/28/2879621.html