Ext的TreeGrid增加复选框(CheckBox)与复选框操作

最近项目开发要求用树形列表显示多列数据，结构例如：

研发部

|--张三  男 25岁

|--李四  女 25岁

项目部

|--王二 男 18岁

 

接到任务后，首先想到的时Ext的Tree控件，但Ext.Tree.Treepanel只能显示单列数据，也就是说无法显示 "性别"和"年龄"这两个字段。

到网上查了相关资料后发现Ext拓展的TreeGrid是Table数,可以满足自己的需求，但TreeGrid在用的时候遇到了一个棘手的问题：没有原生TreeNode的CheckBox功能。

查了半天资料也到了比较完美的解决方案：

 

一、解决方法：

　　打开TreeGridNodeUI.js文件，将下面记为绿色的代码插入到相应位置，并保存文件。

 

 /*!
  * Ext JS Library 3.4
  * Copyright(c) 2006-2010 Sencha Inc.
  * licensing@sencha.com
  * http://www.sencha.com/license
  */
 /**
  * @class Ext.ux.tree.TreeGridNodeUI
  * @extends Ext.tree.TreeNodeUI
  */
 Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
     isTreeGridNodeUI: true,
 
     renderElements : function(n, a, targetNode, bulkRender){
         var t = n.getOwnerTree(),
             cols = t.columns,
             c = cols[0],
             i, buf, len;
 
         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
 
     var cb = Ext.isBoolean(a.checked);
         buf = [
              '<tbody class="x-tree-node">',
                 '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
                     '<td class="x-treegrid-col">',
                         '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on" />',
             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
                         '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
                             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
                         '<span unselectable="on">',
             (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text),
             '</span></a>',
                     '</td>'
         ];
 
         for(i = 1, len = cols.length; i < len; i++){
             c = cols[i];
             buf.push(
                     '<td class="x-treegrid-col ', (c.cls ? c.cls : ''), '">',
                         '<div unselectable="on" class="x-treegrid-text"', (c.align ? ' style="text-align: ' + c.align + ';"' : ''), '>',
                             (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
                         '</div>',
                     '</td>'
             );
         }
 
         buf.push(
             '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
             '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>'
         );
         for(i = 0, len = cols.length; i<len; i++) {
             buf.push('<col style="width: ', (cols[i].hidden ? 0 : cols[i].width) ,'px;" />');
         }
         buf.push('</colgroup></table></td></tr></tbody>');
 
         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
         }else{
             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
         }
 
         this.elNode = this.wrap.childNodes[0];
         this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
         var cs = this.elNode.firstChild.childNodes;
 
         this.indentNode = cs[0];
         this.ecNode = cs[1];
         this.iconNode = cs[2];
 
     if (cb) {
      this.checkbox = cs[3];
       this.anchor = cs[4];
       this.textNode = cs[4].firstChild;
     } else {
       this.anchor = cs[3];
       this.textNode = cs[3].firstChild;
     }
     },
 
     // private
     animExpand : function(cb){
         this.ctNode.style.display = "";
         Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
     }
 });
 
 Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
     isTreeGridNodeUI: true,
 
     // private
     render : function(){
         if(!this.rendered){
             this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
             this.node.expanded = true;
         }
 
         if(Ext.isWebKit) {
             // weird table-layout: fixed issue in webkit
             var ct = this.ctNode;
             ct.style.tableLayout = null;
             (function() {
                 ct.style.tableLayout = 'fixed';
             }).defer(1);
         }
     },
 
     destroy : function(){
         if(this.elNode){
             Ext.dd.Registry.unregister(this.elNode.id);
         }
         delete this.node;
     },
 
     collapse : Ext.emptyFn,
     expand : Ext.emptyFn
 });

二、使用方法：

　　PS：TreeGrid的CheckBox使用方法与Ext.Tree.Treepanel的CheckBox使用方法完全一样，包括数据生成和前台的方法、属性、事件。

　　1、添加CheckBox(生成Json字符串时在Item中加入checked属性即可,注意区分大小写)

　　　 例如：

　　　　{ [id:'1',text:'张三'],

　　　　　[id:'0',text:'张三',checked:true],

　　　　　[id:'1',text:'张三',checked:false] }

 

 

 

　　　以上我列出了三种情况：

　　　①不使用CheckBox，不需要加"checked"属性，因为TreeNode认为，如果有checked属性就会在节点中自动增加CheckBox;

　　　②使用CheckBox并默认为勾选状态，需要添加"checked"属性，并设置值为"false";

　　　③使用CheckBox并默认为不勾选状态，需要添加"checked"属性,并设置值为"true";

　　2、在js中获取CheckBox选中状态的值。

　　　 直接调用TreeNode的atributes.checked方法即可。

　　　 例如:

TreeGrid.root.childNodes[0].attributes.checked

 

　　3、在js中设置CheckBox状态为选中或取消选中。

　　     这里需要分两步

　　　　①设置CheckBox为选中或取消。

　　　　②设置checked属性：因为TreeNode不会自动设置TreeNode的TreeNode.attributes.checked属性。

 　　　　下面请看代码：第一行是设置Checkbox的选中状态

　　　　　　　　　　    第二行是设置checked属性。

TreeGrid.root.childNodes[0].getUI().checkbox.checked = true;
TreeGrid.root.childNodes[0].attributes.checked=true;

 

这是第一次写博客，排版不是很专业，请大家包涵一下，还在加班中，要发布程序了，就到此结束吧。。。有问题可以跟帖，我回答复。

下次会写关于Ext TreeGrid 左右相互拖拽(拖动)货单相拖拽的相关操作文章。

下面是带CheckBox的TreeGrid文件包，大家可以下载了直接用。

 https://files.cnblogs.com/yon2068/TreeGridCheckBox.zip