easyUI中的table的标签为下拉选择东西动态改变值

今天项目需求，需要在datagrid某个单元格格式化为下拉框，在此做一个笔记，以备日后再用。

1：创建一个datagrid

[html] view plain copy

 print?

1. <table id="dg">  
2. </table>  

[javascript] view plain copy

 print?

1. <script type="text/javascript">  
2.                 var row;  
3.                 var baseSqlUrl = '/jsvc/service/OM_OilMonthly/';  
4.                 var startDate = "";//起止值  
5.                 var year = startDate.substring(0, 4);  
6.                 var lastRowIndex = -1;  
7.                 var versionData = [];  
8.                 $(function() {  
9.                     //初始化工具条页面  
10.                     $('#main-layout').layout('panel', 'north').panel({  
11.                         href: 'OilMonthlyTools.jsp'  
12.                     });  
13.                     //初始化datagrid  
14.                     $('#dg').datagrid({  
15.                         url: "/jsvc/service/document/searchFileByNameAndDateAndTreeCodeAndFileType",  
16.                         queryParams: {  
17.                             treeCode: '4nhqglm62tnt3z5uurq48pcc',  
18.                             fileName: '2014'  
19.                         },  
20.                         fit: true,  
21.                         nowrap: false,  
22.                         pagination: true,  
23.                         singleSelect: true,  
24.                         rownumbers: true,  
25.                         autoRowHeight: true,  
26.                         columns: [[  
27.                                 {  
28.                                     field: 'ck',  
29.                                     checkbox: true  
30.                                 },  
31.                                 {  
32.                                     field: 'fileName',  
33.                                     title: '文件名称',  
34.                                     width: 260,  
35.                                     align: 'center',  
36.                                     halign: 'center'  
37.                                 },  
38.                                 {  
39.                                     field: 'fileCreated',  
40.                                     title: '文件生成时间',  
41.                                     width: 150,  
42.                                     align: 'center',  
43.                                     halign: 'center'  
44.                                 },  
45.                                 {  
46.                                     field: 'fileVersion',  
47.                                     title: '文件版本',  
48.                                     width: 100,  
49.                                     align: 'center',  
50.                                     halign: 'center',  
51.                                     formatter: function(value, row, index) {  
52.                                         return "V" + row['fileVersion'];  
53.                                     },  
54.                                     editor: {  
55.                                         type: 'combobox',  
56.                                         options: {  
57.                                             data: versionData,  
58.                                             valueField: 'versionId',  
59.                                             textField: 'versionNumber',  
60.                                             panelHeight: 'auto'  
61.                                         }  
62.                                     }  
63.                                 },  
64.                                 {  
65.                                     field: 'fileId',  
66.                                     title: '操作',  
67.                                     width: 200,  
68.                                     align: 'center',  
69.                                     halign: 'center',  
70.                                     formatter: formatShow  
71.                                 }  
72.                             ]],  

[javascript] view plain copy

 print?

1. //选中事件，取消上一个选中行的编辑，然后设置versionData为空  
2.                         onSelect: function(rowIndex, rowData) {  
3.                             if (lastRowIndex != -1 && lastRowIndex != rowIndex) {  
4.                                 $(this).datagrid('endEdit', lastRowIndex);  
5.                                 versionData = [];  
6.                             }  
7.                             lastRowIndex = rowIndex;  
8.                             row = rowData;  
9.                         },  

[javascript] view plain copy

 print?

1. //添加一个row双击事件，来动态加载下拉框里边的内容  
2.                         onDblClickRow: function(rowIndex, rowData) {  
3.                             $(this).datagrid('selectRow', rowIndex);//选中这一行  
4.                             $(this).datagrid('beginEdit', rowIndex);//设置可编辑状态  
5.                             var ed = $(this).datagrid('getEditor', {index: rowIndex, field: "fileVersion"});  
6.                             $.ajax({//加载数据  
7.                                 url: '/jsvc/service/document/getFileVersions.json?logicId=' + rowData.stringFileId,  
8.                                 dataType: 'json',  
9.                                 type: 'POST',  
10.                                 success: function(data) {  
11.                                     versionData = [];  
12.                                     $.each(data, function(i, item) {  
13.                                         var obj = {};  
14.                                         obj.versionId = data[i].versionNumber;  
15.                                         obj.versionNumber = 'V' + data[i].versionNumber;  
16.                                         obj.id = data[i].stringVersionId;  
17.                                         versionData.push(obj);  
18.                                     });  
19.                                     $(ed.target).combobox('loadData', versionData);  
20.                                 }  
21.                             });  
22.                         }  
23.                     });  
24.                 });

[javascript] view plain copy

 print?

1. //格式化数据  
2.                 function formatShow(value, row) {  
3.                     return '<a title="预览" href="javascript:showFile()">预览</a>    <a title="下载" href="javascript:downLoad()">下载</a>';  
4.                 }  
5.                 function formatDowmLoad(value, row) {  
6.                     return '<a title="下载" href="javascript:downLoad()">下载</a>';  
7.                 }  
8.                 //文件预览  
9.                 function showFile() {  
10.                     var fileName = row.fileName;  
11.                     var fileId = row.stringFileId;  
12.                     $('#MainPanel').window({  
13.                         title: '预览',  
14.                         modal: true,  
15.                         fit: true,  
16.                         maximized: true,  
17.                         collapsible: true,  
18.                         maximizable: false,  
19.                         minimizable: false,  
20.                         content: '<iframe  width=100% height=100%  src="/epcwebsite/CommonComponent/DocumentMgr/doc/center/preview/flashPreview.jsp?WMode=transparent&fileName=' + fileName + '&logicId=' + fileId + '" frameborder="0" style="margin:0px;padding:0px;border:0;overflow:hidden;" ></iframe>'  
21.                     });  
22.                 }  
23.                 //下载文件  
24.                 function downLoad() {  
25.                     if (versionData.length != 0) {  
26.                         var versionId = "";  
27.                         $.each(versionData, function(i, item) {  
28.                             if (row.fileVersion = item.versionId) {  
29.                                 versionId = item.id;  
30.                                 return;  
31.                             }  
32.                         });  
33.                         location.href = "/jsvc/service/file/writeFileContentByVersion?versionId=" + versionId;  
34.                     } else {  
35.                         location.href = "/jsvc/service/file/writeFileContent?logicId=" + row.stringFileId;  
36.                     }  
37.                 }  
38.                 //触发选中年月日历控件月份重新刷新表格  
39.                 function customFunction(yearMonth) {  
40.                     if (year != yearMonth.substring(0, 4)) {  
41.                         $('#dg').datagrid('load', {  
42.                             treeCode: '4nhqglm62tnt3z5uurq48pcc',  
43.                             fileName: yearMonth.substring(0, 4)  
44.                         });  
45.                         year = yearMonth.substring(0, 4);  
46.                     }  
47.   
48.                 }