extjs表格编辑、EditorGridPanel

EditorGridPanel连接后台数据库做更新操作.对于EditGridPanel编辑修改数据后更新到数据库的实现,通常有两种策略: 1.一种是监听EditorGridPanel的afteredit,每一次编辑表格后,都会触发该事件,在事件处理函数中运用Ajax将修改的数据更新到数据库; 2.建立单独的保存处理函数,提供一个保存按钮,所有编辑完成后,由用户点击触发,一次性将所有编辑改动的数据更新到数据库;
第一步：给EditorGridPanel添加afteredit事件处理代码
//给EditorGridPanel添加afteredit事件处理代码
gridPanel.on("afteredit",function(obj){

});

第二步：分析obj参数
可以看出,afteredit事件处理函数只有一个参数,是一个对象(Object e),通过这个对象,我们可以得到: 1.grid,即刚才编辑的表格对象 2.record,刚才编辑的记录 3.field,刚才编辑的是哪个字段 4.value,单元格中改动后的值 5.originalValue,单元格中改动前的值 6.row,刚才编辑的单元格在grid中的行索引位置 7.column,刚才编辑的单元格在grid中的列索引位置
//给EditorGridPanel添加afteredit事件处理代码
gridPanel.on("afteredit",function(obj){
  alert(obj.record.get("id"));
  alert(obj.field);
  alert(obj.value);
  alert(obj.originalValue);
  alert(obj.row);
  alert(obj.column);
});

第三步：发送异步请求。
//给EditorGridPanel添加afteredit事件处理代码
gridPanel.on("afteredit",function(obj){
  var id = obj.record.get("id");
  var field = obj.field;
  var value = obj.value;
  //发送异步请求
  Ext.Ajax.request({
   url:"updateUser.action",
   method:"post",
   params:{
    id:id,
    field:field,
    value:value
   },
   success:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("成功",jsonStr.msg);
   },
   failure:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("失败",jsonStr.msg);
   }
  })
});

第四步：Action操作

第五步：完成更新功能
1.修改成功后记录进行提交
   success:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("成功",jsonStr.msg);
    obj.record.commit();
   },

2.修改失败后回滚
   failure:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("失败",jsonStr.msg);
    obj.record.reject();
   }

extjs表格编辑、EditorGridPanel相关推荐

Layui 表格编辑
html代码 <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑()] function Layui_ ...
html.编辑数据回显,从HTML表格编辑/更新MySQL数据库值
我有一个表单,目前提交值到MySQL数据库.在每次提交完成后,刚刚插入到mysql数据库的数据将在表单下回显.该表格具有动态输入字段.我知道想要添加编辑以前插入的值的可能性.我放置了一个编辑按钮,将用 ...
php ajax 表格编辑,php ajax表格实时编辑 PHP Ajax实现表格实时编辑
想了解PHP Ajax实现表格实时编辑的相关内容吗,佛祖的腿毛在本文为您仔细讲解php ajax表格实时编辑的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:php,ajax表格实时编辑,a ...
element的表格index自定义_vue+element-ui实现表格编辑的三种实现方式
1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过 ...
VB为MSHFlexGrid添加表格编辑功能
虽然MSHFlexGrid的功能比较强大,样式比较丰富,可惜它不支持数据编辑.我以前俺用TextBox实现了它的编辑功能,总算弥补了MSHFlexGrid的不足. 首先,新建一个标准EXE工程,然后, ...
中职计算机应用基础word表格,计算机应用基础-word表格编辑.ppt
计算机应用基础-word表格编辑.ppt (25页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分计算机应用基础贵州交通职业技术学院信息 ...
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...
vue+element-ui实现表格编辑
三种实现方式 1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前 ...
bootstrap-table实现表格编辑
bootstrap-table实现表格编辑应用场景点击单元格可编辑.点击行对行数据修改.列表可伸缩.支持数据下载. 一. 表格行内编辑效果展示编辑前点击某个单元格数据编辑完成后 2．实现过 ...
计算机word表格求和怎么操作,Word表格编辑技巧：利用“公式”命令求和-word技巧-电脑技巧收藏家...
Word表格编辑技巧:利用"公式"命令求和要计算Word表格中的数据,请先将光标置于需要放置数据计算结果的单元格中,再单击"表格→公式"命令,弹出" ...

extjs表格编辑、EditorGridPanel

extjs表格编辑、EditorGridPanel相关推荐

最新文章

热门文章