jquery easyui treegrid使用小结

1. 在easyui中的datagrid和treegrid两个应用中，我们会用到对editor设置单行编辑时每列的编辑类型，这个的应用在easyui下载的包目录的Demo文件夹中也可找到应用例子，如：

   html:
    <table id="tt" title="TreeGrid" class="easyui-treegrid" style="width:600px;height:300px"
      url="treegrid_data3.json" idField="id" treeField="code"
      pagination="true" fitColumns="true">
     <thead>
      <tr>
       <th field="code" rowspan="2" width="150" editor="text">Code</th>
       <th colspan="2">Group Fields</th>
      </tr>
      <tr>
       <th field="name" width="200" editor="text">Name</th>
       <th field="addr" width="200" editor="text">Addr</th>
      </tr>
     </thead>
    </table>

   -----------datagrid---------------------------------

   <table id="tt" style="width:650px;height:auto"
      title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"
      idField="itemid" url="datagrid_data2.json">
     <thead>
      <tr>
       <th field="itemid" width="80">Item ID</th>
       <th field="productid" width="100" formatter="productFormatter"editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>
       <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
       <th field="unitcost" width="80" align="right"editor="numberbox">Unit Cost</th>
       <th field="attr1" width="150" editor="text">Attribute</th>
       <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
      </tr>
     </thead>
    </table>

   显示效果如下：

   
   
2. 在实际应用中可能会碰到不同的需求，比如会根据每行不同的参数或属性设置来设置同列不同的editor类型，这时原有的例子就显的有点太过简单，不能实现我们的需求，现在应用我在项目中的操作为例，显示下实现同列不同操作的情况：（在这，我把例子的情况完全整合到了js里面配置实现，如有习惯于js实现方式的也可参考）  
3.   
4. html:  
5.   
6. <table id="comTypeAndPropertyTree"></table>//个人觉得这样更显的页面清晰，所有的配置都放到js里实现  
7.   
8. js:  
9.   
10. var types = [  
11.       {typeId:0,typeName:'Normal'},  
12.       {typeId:1,typeName:'URL'},  
13.       {typeId:2,typeName:'Symbol'}  
14.   ];  
15.     
16. $(function(){  
17.      var lastIndex;  
18.    $('#comTypeAndPropertyTree').treegrid({  
19.     title:'产品库配置',  
20.     height:550,  
21.     rownumbers: true,  
22.     animate:true,  
23.     url:'getComTypeAndPropertyTreeRoot.action',  
24.     idField:'id',//id=productId_propId_largetypeId_midlletypeId_comtypeId;  
25.     treeField:'name',  
26.     frozenColumns:[[  
27.                  {title:'名称',field:'name',width:300,  
28.                   formatter:function(value){  
29.                    return '<span style="color:red">'+value+'</span>';  
30.                   }  
31.                  }  
32.     ]],  
33.     columns:[[  
34.         {title:'library',field:'library',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
35.          formatter:function(value,row){  
36.          if(!row.leaf){  
37.           if(value==1){  
38.             return '<img src="images/checkbox_checked.jpg"/>';  
39.            }else{  
40.             return '<img src="images/checkbox_unchecked.jpg"/>';  
41.            }  
42.          }else{  
43.           return '';  
44.          }  
45.          }},  
46.      {title:'显示名称',field:'displayName',width:100,editor:'text'},  
47.      {title:'type',field:'type',width:100,  
48.       editor:{type:'combobox',options:{valueField:'typeId',textField:'typeName',data:types}},  
49.          formatter:function(value,row){  
50.           if(row.leaf){  
51.            for(var i=0; i<types.length; i++){  
52.          if (types[i].typeId == value) return types[i].typeName;  
53.         }  
54.         return types[0].typeName;  
55.        }else{  
56.         return '';  
57.        }  
58.                   }  
59.         },  
60.      {title:'Expose',field:'expose',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
61.          formatter:function(value,row){  
62.          if(row.leaf){  
63.            if(value==1){  
64.             return '<img src="images/checkbox_checked.jpg"/>';  
65.            }else{  
66.             return '<img src="images/checkbox_unchecked.jpg"/>';  
67.            }  
68.           }else{  
69.            return '';  
70.           }  
71.          }},  
72.      {title:'Annotate',field:'annotate',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
73.          formatter:function(value,row){  
74.           if(row.leaf){  
75.            if(value==1){  
76.             return '<img src="images/checkbox_checked.jpg"/>';  
77.            }else{  
78.             return '<img src="images/checkbox_unchecked.jpg"/>';  
79.            }  
80.           }else{  
81.            return '';  
82.           }  
83.          }  
84.         },  
85.      {title:'Load',field:'load',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
86.          formatter:function(value,row){  
87.           if(row.leaf){  
88.            if(value==1){  
89.             return '<img src="images/checkbox_checked.jpg"/>';  
90.            }else{  
91.             return '<img src="images/checkbox_unchecked.jpg"/>';  
92.            }  
93.           }else{  
94.            return '';  
95.           }  
96.          }  
97.         },  
98.      {title:'Name Available',field:'nameAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
99.          formatter:function(value,row){  
100.           if(row.leaf){  
101.            if(value==1){  
102.             return '<img src="images/checkbox_checked.jpg"/>';  
103.            }else{  
104.             return '<img src="images/checkbox_unchecked.jpg"/>';  
105.            }  
106.           }else{  
107.            return '';  
108.           }  
109.          }  
110.         },  
111.      {title:'Value Available',field:'valueAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
112.          formatter:function(value,row){  
113.           if(row.leaf){  
114.            if(value==1){  
115.             return '<img src="images/checkbox_checked.jpg"/>';  
116.            }else{  
117.             return '<img src="images/checkbox_unchecked.jpg"/>';  
118.            }  
119.           }else{  
120.            return '';  
121.           }  
122.          }  
123.         },  
124.      {title:'Export As OAT',field:'exportAsOAT',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
125.          formatter:function(value,row){  
126.           if(row.leaf){  
127.            if(value==1){  
128.             return '<img src="images/checkbox_checked.jpg"/>';  
129.            }else{  
130.             return '<img src="images/checkbox_unchecked.jpg"/>';  
131.            }  
132.           }else{  
133.            return '';  
134.           }  
135.          }  
136.         },  
137.      {title:'Required',field:'required',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
138.          formatter:function(value,row){  
139.           if(row.leaf){  
140.            if(value==1){  
141.             return '<img src="images/checkbox_checked.jpg"/>';  
142.            }else{  
143.             return '<img src="images/checkbox_unchecked.jpg"/>';  
144.            }  
145.           }else{  
146.            return '';  
147.           }  
148.          }  
149.         },  
150.      {title:'Units',field:'units',width:100,editor:'text',  
151.       formatter:function(value,row){  
152.        if(row.leaf){  
153.         return value;  
154.        }else{  
155.         return '';  
156.        }  
157.       }},  
158.      {title:'VM',field:'vm',width:100,editor:'text',  
159.       formatter:function(value,row){  
160.        if(row.leaf){  
161.         return value;  
162.        }else{  
163.         return '';  
164.        }  
165.       }}  
166.     ]]  
167.     ,onClickRow:function(row){//运用单击事件实现一行的编辑结束，在该事件触发前会先执行onAfterEdit事件  
168.      var rowIndex = row.id;  
169.      if (lastIndex != rowIndex){  
170.       $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);  
171.      }  
172.     }  
173.     ,onDblClickRow:function(row){//运用双击事件实现对一行的编辑  
174.      var rowIndex = row.id;  
175.      if (lastIndex != rowIndex){  
176.       $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);  
177.       $('#comTypeAndPropertyTree').treegrid('beginEdit', rowIndex);  
178.       lastIndex = rowIndex;  
179.      }  
180.     }  
181.     ,onBeforeEdit:function(row){  
182.            beforEditRow(row);//这里是功能实现的主要步骤和代码  
183.     }  
184.     ,onAfterEdit:function(row,changes){  
185.      var rowId = row.id;  
186.      $.ajax({  
187.           url:"saveProductConfig.action" ,  
188.           data: row,  
189.           success: function(text){  
190.          $.messager.alert('提示信息',text,'info');    
191.           }  
192.         });  
193.     }  
194.    });  
195.   });  
196.   function beforEditRow(row){//这个是核心的，很有用的，如有同样需求的话可以借鉴实现  
197.       var libraryCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','library');  
198.          var exposeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','expose');  
199.          var annotateCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','annotate');  
200.          var loadCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','load');  
201.          var nameAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','nameAvailable');  
202.          var valueAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','valueAvailable');  
203.          var exportAsOATCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','exportAsOAT');  
204.          var requiredCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','required');  
205.           
206.          var unitsCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','units');  
207.          var vmCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','vm');  
208.           
209.           var typeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','type');  
210.           
211.          var checkboxOptionsObj = new Object();  
212.     checkboxOptionsObj.on='1';  
213.     checkboxOptionsObj.off='0';  
214.       var checkboxEditorObj = new Object();  
215.     checkboxEditorObj.type='checkbox';  
216.     checkboxEditorObj.options=checkboxOptionsObj;  
217.       
218.    var comboboxOptionsObj = new Object();  
219.     comboboxOptionsObj.valueField='typeId';  
220.     comboboxOptionsObj.textField='typeName';  
221.     comboboxOptionsObj.data=types;  
222.    var comboboxEditorObj = new Object();  
223.     comboboxEditorObj.type='combobox';  
224.     comboboxEditorObj.options=comboboxOptionsObj;  
225.    if(row.leaf){  
226.     libraryCoclum.editor=null;  
227.     exposeCoclum.editor=checkboxEditorObj;  
228.     annotateCoclum.editor=checkboxEditorObj;  
229.     loadCoclum.editor=checkboxEditorObj;  
230.     nameAvailableCoclum.editor=checkboxEditorObj;  
231.     valueAvailableCoclum.editor=checkboxEditorObj;  
232.     exportAsOATCoclum.editor=checkboxEditorObj;  
233.     requiredCoclum.editor=checkboxEditorObj;  
234.       
235.     unitsCoclum.editor='text';  
236.     vmCoclum.editor='text';  
237.       
238.     typeCoclum.editor=comboboxEditorObj;  
239.    }else{  
240.     libraryCoclum.editor=checkboxEditorObj;  
241.     exposeCoclum.editor=null;  
242.     annotateCoclum.editor=null;  
243.     loadCoclum.editor=null;  
244.     nameAvailableCoclum.editor=null;  
245.     valueAvailableCoclum.editor=null;  
246.     exportAsOATCoclum.editor=null;  
247.     requiredCoclum.editor=null;  
248.       
249.     unitsCoclum.editor=null;  
250.     vmCoclum.editor=null;  
251.       
252.     typeCoclum.editor=null;  
253.    }  
254.     }  
255.   
256. 实现效果图：实现流程：onDblClickRow --（ onBeforeEdit -- onAfterEdit） -- onClickRow，操作上只需要双击和单击两个事件来完成操作，而另两个事件是在中间自动实现完成。