关于Ext的EditorGridPanel实时修改数据后保存到数据库

最新推荐文章于 2016-09-07 12:26:05 发布
最新推荐文章于 2016-09-07 12:26:05 发布
阅读量5.8k 收藏 1
点赞数 2
分类专栏： Ajax技术 JSP学习 JQuery技术

直接上代码：


MoneyGridPanel=Ext.extend(Ext.grid.EditorGridPanel,{
 

         queryTypeCmb:null,
          constructor:function(){
              this.queryTypeCmb=new Ext.form.ComboBox({
                             triggerAction:"all",
                             mode:"local",
                             displayField:"type",
                             value:"全部",
                             store:new Ext.data.JsonStore({
                               data:[{type:"全部"},{type:"收入"},{type:"支出"}],
                               fields:["type"]
                             }),
                             listeners:{
                               "select":{
                                 fn:this.onSelectQueryType,
                                 scope:this
                               }
                             }
               });
              MoneyGridPanel.superclass.constructor.call(this,{
                     renderTo:Ext.getBody(),
                     id:"moneyGridPanel",
                     autoHeight:true,
                     frame:true,
                     width:400,
                     tbar:[{
                       text:"保存",
                       handler:this.onSaveButtonClick,
                       scope:this
                            
                     },"-",{
                       text:"添加",
                       handler:this.onInsertButtonClick,
                       scope:this
                            
                     },"-",{
                       text:"删除",
                       handler:this.onDeleteButtonClick,
                       scope:this
                            
                     },"-","查看类型",{xtype: 'tbspacer'}, this.queryTypeCmb],
                     sm: new Ext.grid.RowSelectionModel({
                           singleSelect:true
                     }),
                     store:new Ext.data.JsonStore({
                           pruneModifiedRecords:true,//这个很重要,可以使每次commitChanges后重新计算 getModifiedRecords()
                           url:"Moneyaction_moneyInfoShow.action",
                           fields:["id","type","money"],
                           autoLoad:true
                     }),
                     columns:[{
                        header:"类型",
                        dataIndex:"type",
                        editor:new Ext.form.ComboBox({
                             triggerAction:"all",
                             mode:"local",
                             displayField:"type",
                             store:new Ext.data.JsonStore({
                               data:[{type:"收入"},{type:"支出"}],
                               fields:["type"]
                             })
                        })
                       },{
                        header:"金额",
                        dataIndex:"money",
                        editor : new Ext.form.NumberField({
                               maxValue:10000,
                               minValue:1  
                        })
                     }]
           
             });
          },
          onSelectQueryType:function(_combo){
               var queryType=_combo.getValue();
               if(queryType=="全部"){
                 this.getStore().clearFilter();
               }else{
                 this.getStore().filter("type",queryType);
               }
          },
         onSaveButtonClick:function(){
                
              //后台更新
              var recs=this.getStore().getModifiedRecords();//这个记录数会被保持到store下次load之前
              alert("被修改记录的个数"+recs.length)
            
                //后台得到整条记录
         
        
       
        if(recs.length==0){
            return
        }else{
             var tempUpdate=[];
             var tempInsert=[];
             for(var i=0;i<recs.length;i++){
                  if(recs[i].get("id")!=""){
                      tempUpdate.push(recs[i].data);
                    }else{
                      tempInsert.push(recs[i].data);
                    }
             }
             if(tempUpdate.length>0){
                this.updateMoneyInfo(tempUpdate);
  
             }
             if(tempInsert.length>0){
                this.insertMoneyInfo(Ext.util.JSON.encode(tempInsert));
        
             }
        }
       
          },
          completeUpdate:function(){
                  this.getStore().commitChanges();
                  this.onSelectQueryType(this.queryTypeCmb);
         
          },
          onInsertButtonClick:function(){
            var rec=new Ext.data.Record({
                          id:"",
                          type:"",
                          money:""         
            });
               this.getStore().add(rec);
               rec.set("type","收入");
               rec.set("money",1);
               this.startEditing(this.getStore().getCount()-1,0);
          },
          onDeleteButtonClick:function(){
             if(this.getSelectionModel().getCount()==0){
                  Ext.Msg.show({
        title : "系统提示",
        msg : "请您选择您要删除的信息",
        buttons : Ext.Msg.OK,
        icon : Ext.Msg.INFO
       });
             }else{
                Ext.Msg.confirm("系统询问","您确定要删除选中的记录吗?",this.OnRemoveQuestion,this);
             }
          },
          OnRemoveQuestion:function(_btn){
             if(_btn=="yes"){
                 var rec=this.getSelectionModel().getSelected();
                 var moneyInfoId=rec.get("id");
              if(moneyInfoId!=""){//判断是否是删除的刚添加且未保存的数据,如果是只在客户端删除就可以
                     alert("服务器端删除");
               var msgTip = Ext.MessageBox.show({
        title:'提示',
        width : 250,
        msg:'正在更新信息请稍后......'
       });
       Ext.Ajax.request({
       url : 'Moneyaction_moneyInfoDelete.action',
       params : {moneyInfoId : moneyInfoId},
       method : 'POST',
       success : function(response,options){
        msgTip.hide();
        var result = Ext.util.JSON.decode(response.responseText);
        if(result.success){
         //服务器端数据成功更新后，同步更新 客户端列表中的数据
           Ext.getCmp("moneyGridPanel").removeMoneyInfo();//怎么不用调组件直接调方法啊？？
       
        }else{
         Ext.Msg.alert('提示 ','更新信息失败！');
        }
       },
       failure : function(response,options){
        msgTip.hide();
        Ext.Msg.alert('提示','更新信息 请求失败！');
       }
      });
       }else{
         alert("只在客户端删除");
         Ext.getCmp("moneyGridPanel").removeMoneyInfo();//怎么不用调组件直接调方法啊？？
       }
             }
          },
          insertMoneyInfo:function(_moneyInfo){
            var msgTip = Ext.MessageBox.show({
     title:'提示',
     width : 250,
     msg:'正在更新信息请稍后......'
     });
     Ext.Ajax.request({
     url : 'Moneyaction_moneyInfoAdd.action',
     params : {moneyInfo : _moneyInfo},
     method : 'POST',
     success : function(response,options){
      msgTip.hide();
      var result = Ext.util.JSON.decode(response.responseText);
      if(result.success){
       //服务器端数据成功更新后，同步更新客户端列表中的数据
       //将刚插入的数据进行commit和filter
       Ext.getCmp("moneyGridPanel").completeUpdate();// 怎么不用调组件直接调方法啊？？
          //reload的目的是将刚插入的记录从数据库中重新调，这样可以将没有id的记录附上id
       Ext.getCmp("moneyGridPanel").getStore().reload();
      
      }else{
       Ext.Msg.alert('提示','添加信息失败！');
      }
     },
     failure : function(response,options){
      msgTip.hide();
      Ext.Msg.alert('提示','添加信息请求失败！');
     }
    });
          },
          removeMoneyInfo:function(){
              this.getStore().remove(this.getSelectionModel().getSelected());
          },
          updateMoneyInfo:function(tempUpdate){
              var moneyInfo=Ext.util.JSON.encode(tempUpdate);
              var msgTip = Ext.MessageBox.show({
      title:'提示',
      width : 250,
      msg:'正在更新信息请稍后......'
        });
     Ext.Ajax.request({
     url : 'Moneyaction_moneyInfoUpdate.action',
     params : {moneyInfo : moneyInfo},
     method : 'POST',
     success : function(response,options){
      msgTip.hide();
      var result = Ext.util.JSON.decode(response.responseText);
      if(result.success){
       //服务器端数据成功更新后，同步更新客户端列表中的数据
       Ext.getCmp("moneyGridPanel").completeUpdate();// 怎么不用调组件直接调方法啊？？
       
       Ext.Msg.alert('提示','更新信息成功。');
      }else{
       Ext.Msg.alert('提示','更新信息失败！');
      }
     },
     failure : function(response,options){
      msgTip.hide();
      Ext.Msg.alert('提示','更新信息请求失败！');
     }
    });
         
          }
});


（转自：http://cache.baiducontent.com/c?m=9d78d513d98101e804ba837f7d498a304200db346ac0d1653f83c215d3321a564616f4ba5435117495853b3015e80902e5aa7034751421c486d5d81480ee8528588b2335671cf1104f8c04f88f15798467c907b5fa04b7e4ad678eef9480990f02d750047c8af18f5c0b13ca6df31635e0a29a4b165a11b8ed3462e2&p=93769a46dc8115e905a6c4710d16d423&newp=9b759a45d6c05add0be297745f59a5295c5bc4387ebad6167ccfe1&user=baidu&fm=sc&query=pruneModifiedRecords%3Atrue&qid=&p1=16）

山代王
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DataGridView中修改后的数据保存到数据库
weixin_41053472的博客
02-20 3909
导出数据库内容到datagridview，修改单元格的内容后变为蓝色，点击保存按钮后数据保存到数据库中，提示修改成功，单元格内容恢复为白色。昨天在网上看到的，很实用。 private void treeView1_AfterSelect(object sender, TreeViewEventArgs e) { DataRow dr = (DataRow)t...
可编辑表格Ext.grid.EditorGridPanel
04-17
3. 提交更改：编辑完成后，EditorGridPanel会触发相应的事件，如afteredit，开发者可以通过监听这些事件来处理数据更新。 四、使用步骤 1. 创建Store：定义数据模型并加载数据。 2. 定义列模型：配置每列的字段名、...
Ext限制输入的数据类型
Donny的专栏
12-25 548
数字类型——NumberField { header : '年龄', dataIndex : 'age', width : 100, sortable : true, editor:new Ext.Editor(new Ext.form.NumberField({ allowBlank:false,//不能为空 allowNegative:false,//不能输入负号 minV...
extjs学习笔记（六) grid中数据的保存，添加和删除
热门推荐
niuyongjie的专栏
11-01 1万+
本文转载自http://www.cnblogs.com/yage/archive/2009/10/30/1591785.html在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通
Ext，保存输入记录并在输入时进行提示
07-08 2056
Ext的ComboBox组件用法很多，通过配置可以让其变成一个输入框，并且可以cunch
关于Ext的EditorGridPanel实时修改数据后保存到数据库的一点心得
Jack的专栏
04-03 1488
EditorGridPanel并不难,我想很多人都可以写出来,但是对于修改数据后怎样保存到数据库我想还是有好多人不太明白,下面我关于这一点就我个人的见解说一下,这里首先的配置好可以修改的列   var colM = new Ext.grid.ColumnModel([{        header: "编号",        dataIndex: "id",        sortable: tr
Extjs TextField 同步输入 监听事件
evilcry2012的专栏
09-07 8140
Extjs TextField 同步输入 监听事件 标签： Extjs   文本框   监听   textfield   2010-04-07 11:24阅读(3069)评论(0)     Extjs TextField 同步输入 监听事件：有两个文本框，当输入第一个文本框内容时，第二个文本框也同时显示和第一个文本框相同的内容，我做了一个监听事件，供大家参考，希望对大家有
Ext可编辑的tree,EditorGridPanel
11-02
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
ext3 gridRowEditor本地数据简单demo，有注释
03-09
标题中的"ext3 gridRowEditor本地数据简单demo"是指基于ExtJS 3.x版本的一个示例，它展示了如何使用GridPanel的RowEditor组件来编辑表格数据。ExtJS是一个流行的JavaScript库，用于构建富客户端应用程序，而ext3是其...
Extjs EditorGridPanel中ComboBox列的显示问题
12-12
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性，重新渲染，方法如下： 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
Ext 连接数据库的相关操作
05-11
在这个例子中，我们将探讨如何使用EXT连接SQL Server数据库，实现Editgridpanel的数据展示、分页、查询和删除功能。 首先，EXT中的Editgridpanel是一个可编辑的表格组件，用于显示和编辑数据。它集成了数据绑定和行...
Ext，保存输入记录，并会提示输入
weixin_33951761的博客
10-27 151
　　Ext的ComboBox组件使用非常多，通过配置输入框可以被允许成为一个。并可以存储输入记录，记录提示的基础，然后进行再次进入，以提高的用户体验输入操作。 　　代码非常easy，基本操作，如以下： // 输入提示 Ext.create("Ext.form.ComboBox", { renderTo: "放置的组件ID", name: "input", labelWi...
extjs中的事件监听方法
沉浮
06-05 9089
事件监听方法： （1） 这个方法主要给dom对象来监听事件              Ext.get(document).on('事件',function(){ 处理方法}); （2）写在容器里面 如panel         listeners｛'事件',function(){处理方法}｝; （3）对定义的js类进行事件监听        var eastpanel=new Ext.
关于Ext.form.ComboBox在Ext.grid.EditorGridPanel中的小应用
秋风瑟瑟
05-24 3771
随着ExtJS框架变得越来越流行普及，更多应用系统在客户端的选择上倾向于它，因为ExtJS框架的一些应用为客户准备得更为周详。 但是随着客户越来越挑剔的行为，我们有时候很无奈，但又不能违背客户的医院，只好硬着头皮尽力去实现客户的需求。 下面以简单的可编辑的Ext.form.ComboBox为例，具体说说实现过程： 1、定义Grid的实体为Ext.grid.EditorGridPanel；
如果使用Ext.form.ComboBox 作为editor，并设置了store，在选择后，在表格单元中显示的是store中的displayfield 而不是valuefield
xiaorj的专栏
04-09 1837
 Ext.override(Ext.grid.GridView, {          getColumnData : function() {              var cs = [], cm = this.cm, colCount = cm.getColumnCount();              for (var i = 0; i                   var na
在editorgrid中加入combox的使用
liuyangan2008的专栏
01-16 1281
在editorgrid中加入combox（转） 在gird中加入comboBox（下拉列表）来实现选择comboBox的值来补充grid（表格）单元格中的值，这是一种富客户端的表现，可以大量减少用户的输入，提高用户的工作效率。           然而在初学Ext的时候，会经常遇到一个问题：如何使得用户在comboBox中选择的值显示在grid中？          1、 问
在grid在编辑状态下的获得本行的record
z_j_009的专栏
08-13 119
以下为对应的列定义： { header:"性别", dataIndex:'sex', editor: new Ext.form.ComboBox({ store: ['male','female'], triggerAction: 'all', ...
extjs的EditorGridPanel修改数据后怎样保存到数据库
soul的技术杂记
07-10 6829
extjs的EditorGridPanel并不难,我想很多人都可以写出来,但是对于修改数据后怎样保存到数据库我想还是有好多人不太明白,下面我关于这一点就我个人的见解说一下,这里首先的配置好可以修改的列var colM = new Ext.grid.ColumnModel([{ h
ext.grid.editorGridPanel样式自定义
最新发布
06-08
要自定义`Ext.grid.EditorGridPanel`的样式，可以使用CSS。以下是一些常见的样式类： - `x-grid3`：网格面板的基础样式类。 - `x-grid3-header`：网格头部单元格的样式类。 - `x-grid3-row`：网格行的样式类。 - `x...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值