(轉)jquery easyui treegrid使用小結 （主要講的是如何編輯easyui中的行信息包括添加 下拉列表等）

在實際應用中可能會碰到不一樣的需求，好比會根據每行不一樣的參數或屬性設置來設置同列不一樣的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，操做上只須要雙擊和單擊兩個事件來完成操做，而另兩個事件是在中間自動實現完成。  

View Code