Row Editing in DataGrid（easyui的行编辑的使用）

 

 

行编辑的使用主要由三段代码构成

（1）js部分

<script type="text/javascript">
	$(function(){
		//客户表
		$('#tableWorkpiece').datagrid({
			url:'${pageContext.request.contextPath}/product/workpiece/list',	
			singleSelect : true,
			method : 'GET',
			rownumbers : true,
			fit:true,
			pagination:true,
			nowrap : false,
			remoteSort : false,
			idField : 'id',
			//添加行单点击事件
			onClickRow: function (rowIndex)
            {
			
                var row = $('#tableWorkpiece').datagrid('getSelected');
                if (row) {
                	showProgressTable(row.wno,row.wid);
                }
            },
			columns : [ [{
				field:'ck',
				checkbox:true
			} , {
				title : 'ID',
				field : 'wid',
				align : 'center',
				width : 100,
				sortable : true,
				hidden:'true'
			}, {
				title : '零件编号',
				field : 'wno',
				align : 'center',
				width : 150,
				sortable : true

			},{
				title : '零件名称',
				field : 'wname',
				align : 'center',				
				width : 150
			} ] ],
		});
	})
	
	//展示出工序表
	function showProgressTable(wno1,wid1) {
		$('#tableProcess').datagrid({
			url:'${pageContext.request.contextPath}/product/process/list',
			iconCls: 'icon-edit',
			checkOnSelect: false,//选择checkbox则选择行
            selectOnCheck: true,//选择行则选择checkbox
            singleSelect: true,  //选中行唯一
            onDblClickRow: onClickCell,
			onEndEdit: onEndEdit,
			singleSelect : true,
			method : 'GET',
			rownumbers : true,
			fit:true,
			pagination:true,
			nowrap : false,
			remoteSort : false,
			queryParams: {
			        txt: wno1,
			    },
			idField : 'id',
			columns : [ [{
				field:'ck',
				checkbox:true
			} , {
				title : 'ID',
				field : 'pid',
				align : 'center',
				width : 100,
				sortable : true,
				hidden:'true'
			}, {
				title : '工序编号',
				field : 'pno',
				align : 'center',
				width : 150,
				sortable : true,
				editor:{
					type:'text',
					options:{
						required:true
					}
				}

			},{
				title : '工序名称',
				field : 'pname',
				align : 'center',				
				width : 150,
				editor:{
					type:'text',
				}
			},{
				title : '系数',
				field : 'xishu',
				align : 'center',				
				width : 150,
				editor:{
					type:'text',
				}
			},{
				title : '工时',
				field : 'worktime',
				align : 'center',				
				width : 150,
				editor:{
					type:'text',
				}
			},{
				title : '零件id',
				field : 'wid',
				align : 'center',				
				width : 150,
				hidden:true,
			} ] ],
		});
	}

	 //编辑的行
	var editIndex = undefined;
	function endEditing() {
		if (editIndex == undefined) {
			return true;
		}
		$('#tableProcess').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	}
	//修改行的点击事件（点击行的时候进入编辑状态）
	 function onClickCell(index, field){
		   if (editIndex != index) {
		    if (endEditing()) {
		     $('#tableProcess').datagrid('selectRow', index)
		       .datagrid('beginEdit', index);
		     var ed = $('#tableProcess').datagrid('getEditor', { index: index, field: field });
		     if (ed) {
		      ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
		     }
		     editIndex = index;
		    } else {
		     setTimeout(function () {
		      $('#tableProcess').datagrid('selectRow', editIndex);
		     }, 0);
		    }
		   }
		  }
	 
	 
	 
	 //结束编辑的时候
	 function onEndEdit(index, row){
		   var ed = $(this).datagrid('getEditor', {
		    index: index,
		    field: 'pid'
		   });
		  }
	 
	 
	 
	 //添加行
	 function append(){
		   var index = $('#tableProcess').datagrid('getRowIndex', $('#tableProcess').datagrid('getSelected'));
		   var row=$('#tableWorkpiece').datagrid('getSelected');
		   var wid1=row.wid;
		   if (index == -1)
		    index = 0;
		   $("#tableProcess").datagrid("insertRow", {
		    index: index+1,
		   /*  row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'} */
		   row:{workpiece:row}
		    });
		  }
	 
	 
	 //删除事件（点击顶部菜单Remove删除选中的行，点击列表的-号，删除减号行）
	 function removeit(){
		   if (editIndex == undefined){return}
		   $('#tableProcess').datagrid('selectRow', editIndex);
		 
		    $('#tableProcess').datagrid('cancelEdit', editIndex)
		     .datagrid('deleteRow', editIndex);
		   editIndex = undefined;
		  }
	 
	 
	 //保存（获得操作的记录，包括，增加，修改，删除中的记录）
	 function accept(){
		   if (endEditing()){
		    var $dg = $('#tableProcess');
		    var rows = $dg.datagrid('getChanges');
		    if (rows.length) {
		     var inserted = $dg.datagrid('getChanges', "inserted");
		     var deleted = $dg.datagrid('getChanges', "deleted");
		     var updated = $dg.datagrid('getChanges', "updated");
		     var effectRow = new Object();
		     if (inserted.length) {
		      //effectRow["inserted"] = JSON.stringify(inserted);
		     var insertedJson=JSON.stringify(inserted);
		     }
		     if (deleted.length) {
		     // effectRow["deleted"] = JSON.stringify(deleted);
		      var deletedJson=JSON.stringify(deleted);
		     }
		     if (updated.length) {
		     // effectRow["updated"] = JSON.stringify(updated);
		      var updatedJson=JSON.stringify(updated);
		     }
		     //alert(inserted);
		     //alert(deleted);
		     //alert(updated);
		     
		    }
		   }
		   //$.post("/Home/Commit", effectRow, function (rsp) {
		   // if (rsp) {
		   //  $dg.datagrid('acceptChanges');
		   //  bindData();
		   // }
		   //}, "JSON").error(function () {
		   // $.messager.alert("提示", "提交错误了！");
		   //});
			$.ajax({
				url:'${pageContext.request.contextPath}/product/process/saveChanges',
				data:{ inserted:insertedJson,
					   deleted:deletedJson,
					   updated:updatedJson
					},		
				success:function(map){
					if(map.msg=="1"){
						$.messager.alert('提示','保存操作成功！');
						
					}else{
						$.messager.alert('提示','保存操作失败：'+map.msg);
					}
				},
				error:function(xhr,status,error){
					$.messager.alert('提示',xhr.responseText);
				}
		    });
		  }
	 
	 
	 //撤销修改
	 function reject(){
		   $('#tableProcess').datagrid('rejectChanges');
		   editIndex = undefined;
		  }
	 
	 //获取改变数据的条数
	 function getChanges(){
		   var rows = $('#tableProcess').datagrid('getChanges');
		   alert(rows.length+' rows are changed!');
		  }
	 
	 
	 function contains(arr, obj) {
		   var i = arr.length;
		   while (i--) {
		    if (arr[i] === obj) {
		     return true;
		    }
		   }
		   return false;
		  }

	//根据零件编号查询
	function queryByWno() {
		var params = $('#tableWorkpiece').datagrid('options').queryParams;
		params.txt = $("#queryWno").val();
		$('#tableWorkpiece').datagrid('options').queryParams = params;
		$('#tableWorkpiece').datagrid('reload');
	}
</script>

（2）html部分

<div class="easyui-layout" data-options="fit:true">	
			<div data-options="region:'west',split:true"  style="width:600px;padding:5px">
				<div id="toolbarWorkpiece">		
	                 <input class="easyui-textbox" id="queryWno" name="wno"
			data-options="label:'零件编号:',labelWidth:60" style="width: 300px"> <a
			href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="queryByWno()">查  询</a> 
	       </div>
				<table id="tableWorkpiece" toolbar='#toolbarWorkpiece'></table>
			</div>

		<div data-options="region:'center'" style="padding: 5px">
			<!-- <div id="toolbarGerm">
		 			<input class="easyui-textbox" id="queryname" name="name" data-options="label:'种质名称:',labelWidth:60" style="width: 300px"> 
		 			   <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="querygerm()">查  询</a> 
				</div> -->
			<div style="margin-bottom: 10px" id="toolbartableProcess">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
			</div>
			<table id="tableProcess" toolbar="#toolbartableProcess"></table>
		</div>

（3）controller层

@RequestMapping("/saveChanges")
	@ResponseBody
	public Map<String, Object> saveChanges(HttpServletRequest request) {
		String rowsJson = request.getParameter("rows");
		    String insertedJson=request.getParameter("inserted");
	        String deletedJson=request.getParameter("deleted");
	        String updatedJson=request.getParameter("updated");
		//JSONArray jsonArray = JSONArray.fromObject(rowsJson);// 把String转换为jsonArray
		JSONArray deletedJsonArray = JSONArray.fromObject(deletedJson);// 把String转换为jsonArray
		JSONArray insertedJsonArray = JSONArray.fromObject(insertedJson);// 把String转换为jsonArray
		JSONArray updatedJsonArray = JSONArray.fromObject(updatedJson);// 把String转换为jsonArray
		//JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(new String[] { "yyyy-MM-dd" }));// 日期转化格式
		//List<Distribution> ls = JSONArray.toList(jsonArray, new Distribution(), new JsonConfig());// 新方法
		 //把字符串转换成list
	
		map.clear();
		try {
			 //把字符串转换成list
			if(deletedJson!=null)
			{
				List<Process> deletedList=JSONArray.toList(deletedJsonArray,new Process(),new JsonConfig());
				for(int i=0;i<deletedList.size();i++)
				{
					Process process=deletedList.get(i);
					processService.delete(process.getPid());
				}
			}
			if(insertedJson!=null)
			{
				List<Process> insertedList=JSONArray.toList(insertedJsonArray,new Process(),new JsonConfig());
				Process process=insertedList.get(0);
				processService.insertList2(insertedList);
			}
			if(updatedJson!=null)
			{
				List<Process> updatedList=JSONArray.toList(updatedJsonArray,new Process(),new JsonConfig());
				for(int k=0;k<updatedList.size();k++)
				{
					Process process=updatedList.get(k);
					processService.updatePro(process);
				}
			}
			//this.distributionService.addDist(ls);
			map.put("msg", "1");
		} catch (Exception e) {
			e.printStackTrace();
			map.put("msg", e.getMessage());
		}
		return map;
	}

其中关于datagrid的一些属性方法可以参考一下这个大佬的整理

http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html

而 Row Editing in DataGrid的demo在以下网址

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=&sort=asc