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>