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.
  * [e-mail]
  * 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);  23          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" />' : '/>')) : '',  31                          '<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) {  74       this.checkbox = cs[3];  75        this.anchor = cs[4];  76        this.textNode = cs[4].firstChild;  77      } else {  78        this.anchor = cs[3];  79        this.textNode = cs[3].firstChild;  80      }
     },
 
     // 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文件包，大家可以下載了直接用。

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