jquery easyui treegrid使用小結：二

在實際應用中可能會碰到不同的需求，比如會根據每行不同的參數或屬性設定來設定同列不同的editor類型，這時原有的例子就顯的有點太過簡單，不能實作我們的需求，現在應用我在項目中的操作為例，顯示下實作同列不同操作的情況：（在這，我把例子的情況完全整合到了js裡面配置實作，如有習慣于js實作方式的也可參考）

html:

<table id="comTypeAndPropertyTree"></table>//個人覺得這樣更顯的頁面清晰，所有的配置都放到js裡實作

js:

var types = [
      {typeId:0,typeName:'Normal'},
      {typeId:1,typeName:'URL'},
      {typeId:2,typeName:'Symbol'}
  ];
  
$(function(){
     var lastIndex;
   $('#comTypeAndPropertyTree').treegrid({
    title:'産品庫配置',
    height:550,
    rownumbers: true,
    animate:true,
    url:'getComTypeAndPropertyTreeRoot.action',
    idField:'id',//id=productId_propId_largetypeId_midlletypeId_comtypeId;
    treeField:'name',
    frozenColumns:[[
                 {title:'名稱',field:'name',width:300,
                  formatter:function(value){
                   return '<span style="color:red">'+value+'</span>';
                  }
                 }
    ]],
    columns:[[
        {title:'library',field:'library',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
         if(!row.leaf){
          if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
         }else{
          return '';
         }
         }},
     {title:'顯示名稱',field:'displayName',width:100,editor:'text'},
     {title:'type',field:'type',width:100,
      editor:{type:'combobox',options:{valueField:'typeId',textField:'typeName',data:types}},
         formatter:function(value,row){
          if(row.leaf){
           for(var i=0; i<types.length; i++){
         if (types[i].typeId == value) return types[i].typeName;
        }
        return types[0].typeName;
       }else{
        return '';
       }
                  }
        },
     {title:'Expose',field:'expose',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
         if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }},
     {title:'Annotate',field:'annotate',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Load',field:'load',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Name Available',field:'nameAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Value Available',field:'valueAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Export As OAT',field:'exportAsOAT',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Required',field:'required',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return '<img src="images/checkbox_checked.jpg"/>';
           }else{
            return '<img src="images/checkbox_unchecked.jpg"/>';
           }
          }else{
           return '';
          }
         }
        },
     {title:'Units',field:'units',width:100,editor:'text',
      formatter:function(value,row){
       if(row.leaf){
        return value;
       }else{
        return '';
       }
      }},
     {title:'VM',field:'vm',width:100,editor:'text',
      formatter:function(value,row){
       if(row.leaf){
        return value;
       }else{
        return '';
       }
      }}
    ]]
    ,onClickRow:function(row){//運用單擊事件實作一行的編輯結束，在該事件觸發前會先執行onAfterEdit事件
     var rowIndex = row.id;
     if (lastIndex != rowIndex){
      $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);
     }
    }
    ,onDblClickRow:function(row){//運用輕按兩下事件實作對一行的編輯
     var rowIndex = row.id;
     if (lastIndex != rowIndex){
      $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);
      $('#comTypeAndPropertyTree').treegrid('beginEdit', rowIndex);
      lastIndex = rowIndex;
     }
    }
    ,onBeforeEdit:function(row){
           beforEditRow(row);//這裡是功能實作的主要步驟和代碼
    }
    ,onAfterEdit:function(row,changes){
     var rowId = row.id;
     $.ajax({
          url:"saveProductConfig.action" ,
          data: row,
          success: function(text){
         $.messager.alert('提示資訊',text,'info');  
          }
        });
    }
   });
  });
  function beforEditRow(row){//這個是核心的，很有用的，如有同樣需求的話可以借鑒實作
      var libraryCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','library');
         var exposeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','expose');
         var annotateCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','annotate');
         var loadCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','load');
         var nameAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','nameAvailable');
         var valueAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','valueAvailable');
         var exportAsOATCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','exportAsOAT');
         var requiredCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','required');
        
         var unitsCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','units');
         var vmCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','vm');
        
          var typeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','type');
        
         var checkboxOptionsObj = new Object();
    checkboxOptionsObj.on='1';
    checkboxOptionsObj.off='0';
      var checkboxEditorObj = new Object();
    checkboxEditorObj.type='checkbox';
    checkboxEditorObj.options=checkboxOptionsObj;
    
   var comboboxOptionsObj = new Object();
    comboboxOptionsObj.valueField='typeId';
    comboboxOptionsObj.textField='typeName';
    comboboxOptionsObj.data=types;
   var comboboxEditorObj = new Object();
    comboboxEditorObj.type='combobox';
    comboboxEditorObj.options=comboboxOptionsObj;
   if(row.leaf){
    libraryCoclum.editor=null;
    exposeCoclum.editor=checkboxEditorObj;
    annotateCoclum.editor=checkboxEditorObj;
    loadCoclum.editor=checkboxEditorObj;
    nameAvailableCoclum.editor=checkboxEditorObj;
    valueAvailableCoclum.editor=checkboxEditorObj;
    exportAsOATCoclum.editor=checkboxEditorObj;
    requiredCoclum.editor=checkboxEditorObj;
    
    unitsCoclum.editor='text';
    vmCoclum.editor='text';
    
    typeCoclum.editor=comboboxEditorObj;
   }else{
    libraryCoclum.editor=checkboxEditorObj;
    exposeCoclum.editor=null;
    annotateCoclum.editor=null;
    loadCoclum.editor=null;
    nameAvailableCoclum.editor=null;
    valueAvailableCoclum.editor=null;
    exportAsOATCoclum.editor=null;
    requiredCoclum.editor=null;
    
    unitsCoclum.editor=null;
    vmCoclum.editor=null;
    
    typeCoclum.editor=null;
   }
    }

實作效果圖：實作流程：onDblClickRow --（ onBeforeEdit -- onAfterEdit） -- onClickRow，操作上隻需要輕按兩下和單擊兩個事件來完成操作，而另兩個事件是在中間自動實作完成。