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，操作上只需要双击和单击两个事件来完成操作，而另两个事件是在中间自动实现完成。