1. 程式人生 > >jquery easyui treegrid使用小結:二

jquery easyui treegrid使用小結:二

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

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

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述