easyui实现datagrid行内编辑

[size=large]easyui的datagrid行内编辑对于修改信息而言比较方便直观，下面举例说明：[/size]

[size=large]需求说明：[/size]
[size=medium]在行内编辑员工状态[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1027/06c09eb5-f62f-38f2-b1f9-f97d8c69bef3.png[/img]

[size=large]一、编辑jsp[/size]

...
               <a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
               <a href="#" id="redo" onclick="obj.redo()" class="easyui-linkbutton" iconCls="icon-redo" plain="true">取消编辑</a>
           </form>
...

[size=large]二、编辑js[/size]
[size=medium]说明：
1.根据需求，除了status列，其它列均不要求被编辑，故设置readonly:'true',disabled:true，禁止其被编辑。
2.对obj对象设置editRow的意义在于限制用户只能对一行进行修改操作，即在this.editRow == undefined前提下进行修改。
3.$('#dg').datagrid('beginEdit',index);是修改操作的开始，$('#dg').datagrid('endEdit',this.editRow);结束修改。需注意的是，只有提交的信息通过验证（如果存在的话）才能结束修改。结束修改后会进入datagrid的onAfterEdit方法，以提交至控制器。[/size]

obj = {
			//编辑行属性
			editRow:undefined,
			//保存
			save:function(){
				//结束当前编辑行.注：1.只有填写的信息通过验证后才能结束编辑.2.结束编辑后进入datagrid的onAfterEdit方法。
				$('#dg').datagrid('endEdit',this.editRow);
			},
			//取消
			redo:function(){
				this.editRow = undefined
				$('#dg').datagrid('rejectChanges')//回滚已编辑数据
			},
			//datagrid行内修改用户状态。index：当前行索引值。
			editStatus:function(index){
				//获取选择行
				var rows = $('#dg').datagrid('getSelections');
				if(currUserStatus!=0){
					$.messager.alert('警告', '您不是管理员，无权执行此操作！', 'warning');
				}else{
					//修改操作需选中一行
					if(rows.length == 1 ){
						//如果已有编辑行，则关闭当前编辑行
						if(this.editRow != undefined) $('#dg').datagrid('endEdit',this.editRow);
						//如果未有编辑行，则进行编辑
						if(this.editRow == undefined){
							//设置当前行为编辑状态
							$('#dg').datagrid('beginEdit',index);
							//将当前行索引值赋给obj的editRow
							this.editRow = index;
							//取消选择当前行
							$('#dg').datagrid('unselectRow',index);
						}
					}else{
						$.messager.alert('警告', '修改必须选中仅且一行！', 'warning');
					}
				}
			},
			...

	}
...
$('#dg').datagrid({
		//条纹
		striped:true, 
		//标题
		title:'用户管理',
		//提交的url地址
		url:'emplAction!listEmpl.action',
		//允许收缩数据
		collapsible:'true',
		//分页
		pagination:'true',
		//自适应
		fit:'true',
		//默认页容量
		pageSize:'10',
		//分页工具位置
		pagePosition:'top',
		//列自适应
		fitColumns:'true',
		//显示编号
		rownumbers:'true',
		//排序
		sortable:'true',
		sortName:'id',
		//主键
		idField:'id',
		...
		//在datagrid中进行添加或修改操作。注：当前业务没有在datagrid中“添加操作”的需求，只有更新操作，故省去了“添加操作”的判定。
		onAfterEdit:function(rowIndex,rowData,changes){
			var updated = $('#dg').datagrid('getChanges','updated');
			var url = '';
			//如果选择了修改，但实际未做任何改变，则直接返回false
			if(updated.length==0){
				obj.editRow = undefined;
				return false
			}
			//修改用户
			if(updated.length>0){
				url='emplAction!editStatus.action';
			}
			//ajax提交，rowData是行数据
			$.ajax({
				timeout:1000,//超时时间设置，单位：毫秒
				type:'post',
				url:url,
				data:{
					row:rowData,
				},
			   /* beforeSend:function(){
			    	console.log("提交前..")
			    	console.log(rowData);
			    	console.log(url);
			    	$('#dg').datagrid('loading');
			    },*/
			    success:function(data){
			    	if(data){
			    		$('#dg').datagrid('loaded');
			    		$('#dg').datagrid('load');
			    		$('#dg').datagrid('unselectAll');
			    		//当前行结束编辑
			    		$('#dg').datagrid('endEdit',obj.editRow);
			    		$.messager.show({
			    			title:'提示',
			    			msg:data,
			    		})
			    		obj.editRow = undefined;
			    	}
			    },
			    complete:function(XMLHttpRequest,status){
			    	if(status=='timeout'){
			    		alert('修改失败，超时..')
			    	}
			    },
			    error:function(XMLHttpRequest,errorThrown){
			    	if(errorThrown=='408'){
			    		alert('修改失败，超时..')
			    	}
			    }

			})
		},
		//列字段
		columns:[[
		          {
		        	  field:'ck',
		        	  checkbox:true
		          },
		          {
		        	  field:'eid',
		        	  title:'用户编号',
		        	  height:30,
		        	  width:100,
		        	  align:'center',
		        	  sortable:'true',//排序
		        	  readonly:'true',
		        	  disabled:true//禁止编辑
		        	  /*editor:{
		        		  type:'numberbox',
		        		  options:{
		        			  required:true,
		        			  disabled:true//禁止编辑
		        		  }
		        	  }*/
		          },
		          {
		        	  field:'ename',
		        	  title:'用户名',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'hiredate',
		        	  title:'入职时间',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'jname',
		        	  title:'职位描述',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'dname',
		        	  width:100,
		        	  height:30,
		        	  title:'所属部门',
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'status',
		        	  width:100,
		        	  height:30,
		        	  title:'状态',
		        	  align:'center',
		        	  editor:{//编辑选项
		        		  type:'combobox',
		        		  options:{
		        			  url:"emplAction!getJobStatusList.action",//请求地址
		        			  required:true,
		        			  panelHeight: 'auto',
		        			  valueField:'jsid',//下拉框的值
		        			  textField:'status'//下拉框显示的文本
		        		  }
		        	  }

		          },
		          {
		        	  field:'process',
		        	  title:'操作',
		        	  width:150,
		        	  height:30,
		        	  align:'center',
		        	  //格式化列值（设置列值在页面的显示样式）
		        	  formatter:function(value,row,index){
		        		  return "<a href='javascript:obj.editStatus("+index+")'>修改状态</a>"
	        			  +"  <a href='javascript:obj._delete("+row.eid+")'>删除</a>"
		        	  }
		          }
		          ...
		]],

	})

[size=large]三、编辑控制器[/size]

//获取职位信息
	public void getJobStatusList() throws IOException{
		   resp.setCharacterEncoding("UTF-8");
		   jobStatus=jobStatusService.listJobStatus();
		   List<Map<String,String>> list = new ArrayList<>();
		   Map<String,String> map = null;
		   if(jobStatus.size()!=0){
			   for (int i = 0; i < jobStatus.size(); i++) {
				   map = new HashMap<String, String>();
				   map.put("jsid", String.valueOf(jobStatus.get(i).getJsid()));
				   map.put("status", jobStatus.get(i).getStatus());
				   list.add(map);
			   }
		   }
		   String s = JSON.toJSONString(list);
		   PrintWriter out = resp.getWriter();
		   out.println(s);
	}
	//修改用户状态
	public void editStatus()
			throws IOException {
	   resp.setCharacterEncoding("UTF-8");	
           //获取提交的datagrid中的行数据
	   int eid = Integer.parseInt(req.getParameter("row[eid]"));
	   int status = Integer.parseInt(req.getParameter("row[status]"));
	   boolean b = false;
	   b = empService.editStatus(status, eid);
	   PrintWriter out = resp.getWriter();
	   if(b){
			out.print("修改成功！");
	   }else{
			out.print("修改失败！");
	   }
    }

[size=small]大功告成，效果如下：[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1029/83a109b8-5641-3a91-962f-af2265360f4d.png[/img]