首页 > 代码库 > jquery easyui treegrid使用小结

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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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=http://www.mamicode.com/=1){            return ‘<img src="http://www.mamicode.com/images/checkbox_checked.jpg"/>‘;           }else{            return ‘<img src="http://www.mamicode.com/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,操作上只需要双击和单击两个事件来完成操作,而另两个事件是在中间自动实现完成。

 

jquery easyui treegrid使用小结