本人不太会叙述,喜欢直接看代码:
<div class="Setting"> <div class="SettingTop"> <img src="<%=CONTEXT_PATH %>resources/images/i5.png"> <div class="Settoptxt"> <h3>类型设置</h3> </div> </div> <div class="clear"></div> <div class="SetDiv int"> <input value="清除值" type="button"> <input value="清除所有值" type="button" > </div> <div class="clear"></div> <table id="gridTab"></table> <!-- <div class="SetDiv"> <div class="Settable"> </div> </div> --> </div> <div class="SettingBottom clear"> <div class="Setb_Left"> <input value="确定" type="button" οnclick="submintTypeParam();"> <input class="close" value="取消" type="button" > </div> <div class="Setb_right"> <input value="应用" type="button"> <input value="重置" type="button" οnclick="resetDataGrid();"> </div> </div> <script type="text/javascript"> var parentId = "<%=request.getParameter("parentId")%>"; var stepId = "<%=request.getParameter("stepId")%>"; function initGrid(){ var url = '<%=CONTEXT_PATH%>typeParam/getColumnAttr?parentStepId='+parentId+"&stepId="+stepId; createDateGrid(url); } function resetDataGrid(){ var url = '<%=CONTEXT_PATH%>typeParam/getColumnAttr?parentStepId='+parentId+"&stepId="+stepId+"&reset=1" createDateGrid(url); } function createDateGrid(url){ $("#gridTab").datagrid({ iconCls: 'icon-edit', singleSelect: true, url: url, method:'get', height : 200, fitColumns : true, onClickCell: onClickCell, columns :[[ {field:'columnName',width:80,title:'字段'}, {field:'measure',width:100,title : 'measure',align:'center', formatter :function(value,row,index){//对真实值转换成前台可视化数据 switch(value){ case '1' : return '名义'; case '2' : return '连续'; case '3' : return '分类'; case '4' : return '标准'; case '5' : return '有序'; case '6' : return '无类型'; }; } ,editor:{ type : 'combobox', options: { data : [{ value : '1', text : '名义', selected :true },{ value : '2', text : '连续' },{ value : '3', text : '分类' },{ value : '4', text : '标准' },{ value : '5', text : '有序' },{ value :'6', text : '无类型' }], panelHeight:"auto" } }}, {field:'role',width:80,title:'角色',align:'center',formatter :function(value,row,index){ switch(value){ case '1' : return '输入'; case '2' : return '输入输出'; case '3' : return '结果'; case '4' : return '无'; }; },editor:{ type:'combobox', options:{ data:[{ value : '1', text : '输入' },{ value : '2', text : '输入输出' },{ value : '3', text : '结果' },{ value : '4', text : '无' }], panelHeight:"auto" } }} ]] }); } $.extend($.fn.datagrid.defaults.editors, { combobox: { init: function(container, options){ var input = $("<input type=\"text\" style='width:80px;'>").appendTo(container); input.combobox(options || {}); return input; }, destroy: function(_620) { $(_620).combobox("destroy"); }, getValue: function(_621) { var opts = $(_621).combobox("options"); if (opts.multiple) { return $(_621).combobox("getValues").join(opts.separator); } else { return $(_621).combobox("getValue"); } return opts.data[0].text; }, setValue: function(_622, _623) { var opts = $(_622).combobox("options"); if (opts.multiple) { if (_623) { $(_622).combobox("setValues", _623.split(opts.separator)); } else { $(_622).combobox("clear"); } } else { $(_622).combobox("setValue", _623); } }, resize: function(_624, _625) { $(_624).combobox("resize", _625); } } }); $.extend($.fn.datagrid.methods, { editCell: function(jq,param){ return jq.each(function(){ var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields')); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field){ col.editor = null; } } $(this).datagrid('beginEdit', param.index); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true;} if ($('#gridTab').datagrid('validateRow', editIndex)){ $('#gridTab').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field){ if (endEditing()){ $('#gridTab').datagrid('selectRow', index) .datagrid('editCell', {index:index,field:field}); editIndex = index; } } function submintTypeParam(){ var gridData = $("#gridTab").datagrid("getData"); var columnList = JSON.stringify(gridData.rows); $.post("<%=CONTEXT_PATH%>typeParam/saveTypeParam",{ columnList : columnList, stepId : stepId, flowCfgId : flowCfgId },function(env){ if(env.result){ var d = GLOB.dlg.typeParamDlg; d.hide(); MessageSlide(env.msg); }else{ MessageAlert(env.msg); } }); } </script>
注意:编辑好值后,一定要让其失去焦点,否则将不能修改值.