easyui datagrid可编辑字段设置多种类型示例

<table id="dg"></table>
<div id="toolbar">    
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">提交</a>    
</div>

  1 <script  type="text/javascript">
  2 $(function(){
  3     $.extend($.fn.datagrid.methods, {
  4         addEditor : function(jq, param) {
  5             if (param instanceof Array) {
  6                 $.each(param, function(index, item) {
  7                     var e = $(jq).datagrid('getColumnOption', item.field);
  8                     e.editor = item.editor;
  9                 });
 10             } else {
 11                 var e = $(jq).datagrid('getColumnOption', param.field);
 12                 e.editor = param.editor;
 13                 console.log("param.editor->" + param.editor.type);
 14             }
 15         },
 16         removeEditor : function(jq, param) {
 17             if (param instanceof Array) {
 18                 $.each(param, function(index, item) {
 19                     var e = $(jq).datagrid('getColumnOption', item);
 20                     e.editor = {};
 21                 });
 22             } else {
 23                 var e = $(jq).datagrid('getColumnOption', param);
 24                 e.editor = {};
 25             }
 26         }
 27     });
 28     
 29     $('#dg').datagrid({
 30         url:'${pageContext.request.contextPath}/riskdataupload/list.do',
 31         iconCls:'icon-edit',
 32         toolbar:'#toolbar' ,
 33         rownumbers:'true',
 34         fitColumns:'true',
 35         nowrap: 'false',
 36         singleSelect:'true', 
 37         striped:'true',
 38         nowrap:'false',
 39         autoRowHeight:'false',
 40         loadMsg:'加载数据中...',
 41         columns:[[
 42                   {field: 'outitemCode', title: '条目编码', hidden: true},
 43                   {field: 'outItemCodeName', title: '条目名称', width: 200},
 44                   {field: 'data', title: '填报数据', width: 250, align: 'right'},
 45                   {field: 'year', title: '报送年度', width: 50, align: 'center'},
 46                   {field: 'quarter', title: '报送季度', width: 50, align: 'center'},
 47                   {field: 'reportTypeName', title: '报送类型', width: 50, align: 'center'},
 48                   {field: 'deptNoName', title: '所属部门', width: 50, align: 'center'},
 49                   {field: 'comCodeName', title: '所属机构', width: 80, align: 'center'}
 50                 ]],
 51         onClickCell: function (rowIndex, field, value) {
 52             if (endEditing()){
 53                 console.log("------------开始-----------");
 54                 console.log('rowIndex->' + rowIndex);
 55                 $('#dg').datagrid('selectRow', rowIndex)
 56                         .datagrid('beginEdit', rowIndex);
 57                 editIndex = rowIndex;
 58             } else {
 59                 $('#dg').datagrid('selectRow', editIndex);
 60             }  
 61        },
 62        onBeforeEdit:function(index,row){
 63             add(index);    //编辑前设置单元格类型
 64         }
 65     });
 66 
 67 });
 68 
 69 var editIndex = undefined;
 70 function endEditing(){
 71     console.log("------------结束-----------");
 72     if (editIndex == undefined){return true;}
 73     if ($('#dg').datagrid('validateRow', editIndex)){
 74         $('#dg').datagrid('endEdit', editIndex);
 75         editIndex = undefined;
 76         return true;
 77     } else {
 78         return false;
 79     }
 80 }
 81 
 82 function add(rowIndex){
 83     $('#dg').datagrid('selectRow', rowIndex);
 84     var row = $('#dg').datagrid('getSelected');
 85     
 86    
 87     //判断是否为combobox类型
 88     if(row.inputType == '1'){
 89         console.log("inputType->1");
 90         $("#dg").datagrid('addEditor', {
 91             field : 'data',
 92             editor : {
 93                 type : 'combobox',
 94                 options : {
 95                     url:'${pageContext.request.contextPath}/codeSelect/tencodeSelect.do?type='+ row.outitemCode,
 96                     valueField : 'value',
 97                     textField : 'text',
 98                     method : 'get',
 99                     editable : false
100                 }
101             }
102         });
103     }
104 
105     if(row.inputType == '2'){
106         console.log("inputType->2");
107         $("#dg").datagrid('addEditor', {
108             field : 'data',
109             editor : {
110                 type : 'text'
111             }
112         });
113     }
114 }
115 
116 function remove(rowIndex){
117     $('#dg').datagrid('removeEditor', 'data');
118 }
119 </script>