Jquery可编辑grid

本人不太会叙述,喜欢直接看代码:

<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" onclick="submintTypeParam();">
        <input class="close" value="取消" type="button" >
    </div>
    <div class="Setb_right">
        <input value="应用" type="button">
        <input value="重置" type="button" onclick="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>

注意:编辑好值后,一定要让其失去焦点,否则将不能修改值.