`
wql025
  • 浏览: 25596 次
社区版块
存档分类
最新评论

easyui实现datagrid行内编辑

阅读更多
easyui的datagrid行内编辑对于修改信息而言比较方便直观,下面举例说明:

需求说明:
在行内编辑员工状态


一、编辑jsp
...
               <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>
...


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

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>"
		        	  }
		          }
		          ...
		]],
		
	})


三、编辑控制器
//获取职位信息
	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("修改失败!");
	   }
    }


大功告成,效果如下:


  • 大小: 4 KB
  • 大小: 3.2 KB
0
1
分享到:
评论

相关推荐

    easyui datagrid在编辑状态下更新列的值

    最后,对于“easyui-datagrid-editor”这个压缩包文件,它可能包含了示例代码、样式文件或其他资源,帮助开发者理解并实现编辑状态下Datagrid列值的更新功能。如果需要进一步的帮助,可以查看该文件的内容或查阅...

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    easyui的datagrid中editor和combobox的级联

    - 如果使用了`datagrid`的行内编辑功能,则需要注意`index`参数的正确性。文中提到的第一种方法更为推荐,因为它避免了由于`index`计算错误导致的问题。 - 确保数据接口返回的数据格式与`combobox`的配置相匹配,...

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...

    EasyUI中的dataGrid的行内编辑

    EasyUI中的DataGrid行内编辑实现详解 EasyUI是一个流行的基于jQuery的前端UI框架,提供了许多实用的UI组件,其中包括DataGrid组件。DataGrid组件是EasyUI中最常用的一个组件,用于显示和编辑数据。然而,DataGrid...

    easyui-datagrid-rowediting

    "easyui-datagrid-rowediting"是一个关于EasyUI Datagrid组件的特定功能,允许用户在表格行内进行编辑,实现多行数据的增删改查。本文将详细探讨这个功能的实现原理和应用场景。 一、EasyUI Datagrid简介 EasyUI的...

    EasyUI的DataGrid每行数据添加操作按钮的实现代码

    下面我们将详细介绍如何在EasyUI的DataGrid中实现这一功能。 首先,我们需要在HTML页面中引入EasyUI的相关库文件,包括jQuery、EasyUI CSS和JavaScript文件。确保这些文件正确地链接到您的HTML文档中,以确保EasyUI...

    easyui-datagrid12-demo.zip

    在“easyui-datagrid12-demo.zip”这个压缩包中,我们主要关注的是EasyUI 的 DataGrid 组件,以及可能涉及到的行内编辑功能。DataGrid 是 EasyUI 提供的一个用于展示数据表格的组件,它具有强大的数据管理能力,包括...

    easyUI行内可编辑

    在 EasyUI 中,实现行内编辑通常涉及到以下几个关键知识点: 1. **表格(Grid)组件**:EasyUI 的表格组件可以展示大量数据,并支持分页、排序、过滤等功能。在创建表格时,我们需要定义列(columns)和数据源...

    EasyUI tutorial 中文版 chm

    启用DataGrid行内编辑器 继承扩展DataGrid的editors easyUI在可编辑的datagrid中计算两列的值 easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI ...

    easyui Datagrid 数据列表比较上一个上传的增加了超链接并传值、条件清空、日期控件清空和数据修改功能

    Datagrid支持行内编辑,用户可以直接在表格中修改数据。通过`editable`属性设定可编辑列,并监听`onRowClick`事件来启动编辑模式。`onBeforeEdit`, `onAfterEdit`和`onCancelEdit`等事件可以用来控制编辑过程和验证...

    jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    本篇文章主要讲述了如何利用jquery Easyui库中的Datagrid组件实现批量操作功能,包括编辑、删除以及添加新行。jquery Easyui 是一个基于jquery的前端UI框架,其中Datagrid组件专门用于展示和管理表格数据。通过这篇...

    struts2+easyui 基于maven实现单元格可编辑表格datagrid

    DataGrid的可编辑功能通常通过行内编辑或弹出窗口编辑实现。在Struts2框架下,我们可以在DataGrid的行上添加编辑按钮,当用户点击编辑时,触发AJAX请求,将当前行的数据发送到服务器。服务器端的Struts2动作类接收到...

    WebForm中EasyUI DataGrid

    5. 编辑功能:支持行内编辑,用户可以直接在表格中修改数据,方便快捷。 6. 表格操作:可以添加、删除和更新记录,与后端数据进行同步。 7. 自定义列:允许开发者自定义列的显示样式和内容,满足不同场景的需求。 8....

    JQuery_EasyUI_DataGrid_中文文档

    这些属性只是 DataGrid 的一部分配置选项,实际使用中还可以结合其他功能如筛选、编辑、行事件处理等,以实现更复杂的数据展示和交互需求。理解并熟练掌握这些属性,能帮助开发者构建出功能强大且易于使用的数据展示...

    jquery easyui datagrid 教程

    2. 编辑数据:Datagrid 支持行内编辑,通过 `editRow` 和 `saveRow` 方法进行编辑与保存。 3. 数据操作:提供 `insertRow`、`updateRow`、`deleteRow` 方法进行增删改操作。 四、Datagrid 功能扩展 1. 排序:通过...

    easyuiDataGrid绑定

    7. **异步编辑**:EasyUI DataGrid支持行内编辑,可以设置`editIndex`属性开启。用户在编辑模式下保存数据,通常需要自定义`onBeforeEdit`和`onAfterEdit`事件来处理。 8. **扩展功能**:DataGrid还可以结合EasyUI...

Global site tag (gtag.js) - Google Analytics