easyui datagrid 动态改变列编辑类型示例

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

JS代码片段： 

<script type="text/javascript"> $(function(){ $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $.each(param, function(index, item) { var e = $(jq).datagrid('getColumnOption', item.field); e.editor = item.editor; }); } else { var e = $(jq).datagrid('getColumnOption', param.field); e.editor = param.editor; console.log("param.editor->" + param.editor.type); } }, removeEditor : function(jq, param) { if (param instanceof Array) { $.each(param, function(index, item) { var e = $(jq).datagrid('getColumnOption', item); e.editor = {}; }); } else { var e = $(jq).datagrid('getColumnOption', param); e.editor = {}; } } }); $('#dg').datagrid({ url:'${pageContext.request.contextPath}/riskdataupload/list.do', iconCls:'icon-edit', toolbar:'#toolbar' , rownumbers:'true', fitColumns:'true', nowrap: 'false', singleSelect:'true', striped:'true', nowrap:'false', autoRowHeight:'false', loadMsg:'加载数据中...', columns:[[ {field: 'outitemCode', title: '条目编码', hidden: true}, {field: 'outItemCodeName', title: '条目名称', width: 200}, {field: 'data', title: '填报数据', width: 250, align: 'right'}, {field: 'year', title: '报送年度', width: 50, align: 'center'}, {field: 'quarter', title: '报送季度', width: 50, align: 'center'}, {field: 'reportTypeName', title: '报送类型', width: 50, align: 'center'}, {field: 'deptNoName', title: '所属部门', width: 50, align: 'center'}, {field: 'comCodeName', title: '所属机构', width: 80, align: 'center'} ]], onClickCell: function (rowIndex, field, value) { if (endEditing()){ console.log("------------开始-----------"); console.log('rowIndex->' + rowIndex); $('#dg').datagrid('selectRow', rowIndex) .datagrid('beginEdit', rowIndex); editIndex = rowIndex; } else { $('#dg').datagrid('selectRow', editIndex); } }, onBeforeEdit:function(index,row){ add(index); //编辑前设置单元格类型 } }); }); var editIndex = undefined; function endEditing(){ console.log("------------结束-----------"); if (editIndex == undefined){return true;} if ($('#dg').datagrid('validateRow', editIndex)){ $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function add(rowIndex){ $('#dg').datagrid('selectRow', rowIndex); var row = $('#dg').datagrid('getSelected'); //判断是否为combobox类型 if(row.inputType == '1'){ console.log("inputType->1"); $("#dg").datagrid('addEditor', { field : 'data', editor : { type : 'combobox', options : { url:'${pageContext.request.contextPath}/codeSelect/tencodeSelect.do?type='+ row.outitemCode, valueField : 'value', textField : 'text', method : 'get', editable : false } } }); } if(row.inputType == '2'){ console.log("inputType->2"); $("#dg").datagrid('addEditor', { field : 'data', editor : { type : 'text' } }); } } function remove(rowIndex){ $('#dg').datagrid('removeEditor', 'data'); } </script>