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方法,以提交至控制器。
需求说明:
在行内编辑员工状态
![](https://i-blog.csdnimg.cn/blog_migrate/ac01f6dbc3d14a98be09afe0fe3d94b5.png)
一、编辑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方法,以提交至控制器。
影音先锋电影 http://www.iskdy.com/
伦理片 http://www.dotdy.com/
三、编辑控制器
大功告成,效果如下:
- 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>"
- }
- }
- ...
- ]],
- })
伦理片 http://www.dotdy.com/
三、编辑控制器
- //获取职位信息
- 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("修改失败!");
- }
- }
大功告成,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ec518d3779f47db74e0e18a70914318c.png)