- 浏览: 25551 次
最新评论
easyui的datagrid行内编辑对于修改信息而言比较方便直观,下面举例说明:
需求说明:
在行内编辑员工状态
一、编辑jsp
二、编辑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方法,以提交至控制器。
三、编辑控制器
大功告成,效果如下:
需求说明:
在行内编辑员工状态
一、编辑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("修改失败!"); } }
大功告成,效果如下:
发表评论
-
struts2+easyui实现根据条件检索信息
2015-10-02 01:52 2032根据不同条件或组合条件检索信息是很常用的需求,下面将在stru ... -
struts2+easyui的datagrid显示列表信息
2015-10-02 01:22 2953easyui的datagrid主要用于显示列表信息,其中包含分 ... -
创建easyui-dialog实现增加/修改bean信息
2015-10-02 00:27 4281是否采用dialog增加/修改bean信息根据项目需求而定,一 ... -
easyui在datagrid中显示行详情(二)
2015-10-01 22:45 1426一、引用文件 注:1.datagrid-detailview. ... -
easyui在datagrid中显示行详情(一)
2015-09-30 13:34 7052一、页面引用 <!-- 1.页面引入样式 --> ...
相关推荐
最后,对于“easyui-datagrid-editor”这个压缩包文件,它可能包含了示例代码、样式文件或其他资源,帮助开发者理解并实现编辑状态下Datagrid列值的更新功能。如果需要进一步的帮助,可以查看该文件的内容或查阅...
根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...
- 如果使用了`datagrid`的行内编辑功能,则需要注意`index`参数的正确性。文中提到的第一种方法更为推荐,因为它避免了由于`index`计算错误导致的问题。 - 确保数据接口返回的数据格式与`combobox`的配置相匹配,...
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
EasyUI中的DataGrid行内编辑实现详解 EasyUI是一个流行的基于jQuery的前端UI框架,提供了许多实用的UI组件,其中包括DataGrid组件。DataGrid组件是EasyUI中最常用的一个组件,用于显示和编辑数据。然而,DataGrid...
"easyui-datagrid-rowediting"是一个关于EasyUI Datagrid组件的特定功能,允许用户在表格行内进行编辑,实现多行数据的增删改查。本文将详细探讨这个功能的实现原理和应用场景。 一、EasyUI Datagrid简介 EasyUI的...
下面我们将详细介绍如何在EasyUI的DataGrid中实现这一功能。 首先,我们需要在HTML页面中引入EasyUI的相关库文件,包括jQuery、EasyUI CSS和JavaScript文件。确保这些文件正确地链接到您的HTML文档中,以确保EasyUI...
在“easyui-datagrid12-demo.zip”这个压缩包中,我们主要关注的是EasyUI 的 DataGrid 组件,以及可能涉及到的行内编辑功能。DataGrid 是 EasyUI 提供的一个用于展示数据表格的组件,它具有强大的数据管理能力,包括...
在 EasyUI 中,实现行内编辑通常涉及到以下几个关键知识点: 1. **表格(Grid)组件**:EasyUI 的表格组件可以展示大量数据,并支持分页、排序、过滤等功能。在创建表格时,我们需要定义列(columns)和数据源...
启用DataGrid行内编辑器 继承扩展DataGrid的editors easyUI在可编辑的datagrid中计算两列的值 easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI ...
Datagrid支持行内编辑,用户可以直接在表格中修改数据。通过`editable`属性设定可编辑列,并监听`onRowClick`事件来启动编辑模式。`onBeforeEdit`, `onAfterEdit`和`onCancelEdit`等事件可以用来控制编辑过程和验证...
DataGrid的可编辑功能通常通过行内编辑或弹出窗口编辑实现。在Struts2框架下,我们可以在DataGrid的行上添加编辑按钮,当用户点击编辑时,触发AJAX请求,将当前行的数据发送到服务器。服务器端的Struts2动作类接收到...
5. 编辑功能:支持行内编辑,用户可以直接在表格中修改数据,方便快捷。 6. 表格操作:可以添加、删除和更新记录,与后端数据进行同步。 7. 自定义列:允许开发者自定义列的显示样式和内容,满足不同场景的需求。 8....
这些属性只是 DataGrid 的一部分配置选项,实际使用中还可以结合其他功能如筛选、编辑、行事件处理等,以实现更复杂的数据展示和交互需求。理解并熟练掌握这些属性,能帮助开发者构建出功能强大且易于使用的数据展示...
本篇文章主要讲述了如何利用jquery Easyui库中的Datagrid组件实现批量操作功能,包括编辑、删除以及添加新行。jquery Easyui 是一个基于jquery的前端UI框架,其中Datagrid组件专门用于展示和管理表格数据。通过这篇...
2. 编辑数据:Datagrid 支持行内编辑,通过 `editRow` 和 `saveRow` 方法进行编辑与保存。 3. 数据操作:提供 `insertRow`、`updateRow`、`deleteRow` 方法进行增删改操作。 四、Datagrid 功能扩展 1. 排序:通过...
7. **异步编辑**:EasyUI DataGrid支持行内编辑,可以设置`editIndex`属性开启。用户在编辑模式下保存数据,通常需要自定义`onBeforeEdit`和`onAfterEdit`事件来处理。 8. **扩展功能**:DataGrid还可以结合EasyUI...