jQuery-ui treegird 使用

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