`

extjs-EditorGridPanel

JavaScript 
阅读更多

extjs-EditorGridPanel学习

this.grid.getStore().getModifiedRecords();

 

this.grid.getStore().commitChanges();

 

  1. HTML>  
  2.  <HEAD>  
  3.   <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />  
  6.   <mce:script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>  
  7.   <mce:script type="text/javascript" src="extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script>  
  8.   <mce:script type="text/javascript" src="extjs2.0/source/locale/ext-lang-zh_CN.js" mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>  
  9.   <mce:script type="text/javascript"><!--  
  10.  Ext.onReady(function(){  
  11.   Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';  
  12.   Ext.QuickTips.init();  
  13.   Ext.form.Field.prototype.msgTarget = 'qtip';  
  14.   //创建表格数据  
  15.   var data = [  
  16.    [1,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],  
  17.    [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],  
  18.    [3,'王五','男',new Date(1981,01,01),27,'wang@abc.com']  
  19.   ];  
  20.   //创建记录类型Person，mapping值为字段值对应数组中数据的索引位置  
  21.   var Person = Ext.data.Record.create([  
  22.    {name: 'personId',mapping: 0},  
  23.    {name: 'personName',mapping: 1},  
  24.    {name: 'personSex',mapping: 2},  
  25.    {name: 'personBirthday',mapping: 3},  
  26.    {name: 'personAge',mapping: 4},  
  27.    {name: 'personEmail',mapping: 5}  
  28.   ]);  
  29.   var dataStore=new Ext.data.Store({//配置数据集  
  30.     reader: new Ext.data.ArrayReader({id:0},Person),  
  31.     data: data  
  32.    });  
  33.   //创建Grid表格组件  
  34.   var grid = new Ext.grid.EditorGridPanel({  
  35.    title : 'Ext.grid.EditorGridPanel',  
  36.    applyTo : 'grid-div',  
  37.    width:430,  
  38.    height:280,  
  39.    frame:true,  
  40.    clicksToEdit:2,  
  41.    store: dataStore,  
  42.    //方式一：对所有修改结果集中式提交  
  43.    tbar:[{  
  44.     text:'提交修改',  
  45.     handler:function(){  
  46.      var mr=dataStore.getModifiedRecords();//获取所有更新过的记录  
  47.      var recordCount=dataStore.getCount();//获取数据集中记录的数量  
  48.      if(mr.length==0){  // 确认修改记录数量  
  49.        alert("没有修改数据！");  
  50.        return false;  
  51.      }  
  52.        
  53.      var recordModStr="[";//这里以josn方式保存  
  54.      for(var i=0;i<mr.length;i++){  
  55.       alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生  
  56.                                              //更改可用mr[i].dirty来判断  
  57.       recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:"  
  58.            +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";  
  59.        if(i<mr.length-1)  
  60.                 recordModStr+=",";  
  61.      }  
  62.      recordModStr+="]";  
  63.      alert(recordModStr);  
  64.      //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入  
  65.    }  
  66.    }],  
  67.    columns: [//配置表格列  
  68.     {header: "id", width: 40, dataIndex: 'personId'},  
  69.     {header: "姓名", width: 70, dataIndex: 'personName',  
  70.      editor:new Ext.form.TextField({  
  71.       allowBlank : false  
  72.      })  
  73.     },  
  74.     {header: "性别", width: 40, dataIndex: 'personSex',  
  75.      editor:new Ext.form.ComboBox({  
  76.       editable : false,  
  77.       displayField:'sex',  
  78.       mode: 'local',  
  79.       triggerAction: 'all',  
  80.       store:new Ext.data.SimpleStore({  
  81.        fields: ['sex'],  
  82.        data : [['男'],['女']]  
  83.       })  
  84.      })  
  85.     },  
  86.     {header: "生日", width: 100, dataIndex: 'personBirthday',  
  87.      editor:new Ext.form.DateField(),  
  88.      renderer:Ext.util.Format.dateRenderer('Y年m月d日')  
  89.     },  
  90.     {header: "年龄", width: 40, dataIndex: 'personAge',  
  91.      editor:new Ext.form.NumberField(),renderer:isEdit  
  92.     },  
  93.     {header: "电子邮件", width: 120, dataIndex: 'personEmail',  
  94.      editor:new Ext.form.TextField({  
  95.       vtype:'email'  
  96.      })  
  97.     }  
  98.    ]  
  99.   })  
  100.   //方式二：对修改结果实时提交，这里对年龄实时提交  
  101.   function isEdit(value,record){  
  102.     //向后台提交请求  
  103.    return value;  
  104.   }  
  105. function  afterEdit(obj){     //每次更改后，触发一次该事件   
  106.           alert("orginalValue:"+obj.originalValue+",value:"+obj.value);  
  107.       }  
  108.      grid.on("afteredit", afterEdit, grid);  
  109.  });  
  110.     
  111. // --></mce:script>   
  112.  </HEAD>  
  113.  <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">  
  114.  <div id='grid-div'></div>  
  115.  </BODY>  
  116. </HTML>  

listeners:{
      afterEdit: function(e){
       if(e.value && e.originalValue !== e.value){
        Ext.Ajax.request({
         url: 'jsp/insurance/ins_prove_bl/dispose/updateDate.jsp',
         success: function(response, opts){
          var resObj = Ext.decode(response.responseText);
          if(resObj.success){
           Ext.example.msg('系统提示','操作已完成');
           e.record.commit();
          } else {
           Ext.MessageBox.error("错误","服务器未正确响应。请稍候重试或与管理员联系。");
          }
         },
         failure: function(response, opts){
          Ext.MessageBox.error("错误","无法提交请求，请检查网络连接");
         },
         params: {
          ipId:recordId,
          ipdId: e.record.get('id'),
          updateField: e.field,    //列名
          updateValue: e.value ? Ext.util.Format.date(new Date(e.value),'Y-m-d') : ''   //值
         }
        });
      }
    }
  }

 

红色的两行是关键代码，updateField是你要修改的列名，updateValue是你修改之后的值，这是因为你页面上可能有多个可编辑项，这样动态的取是很科学滴

 

后台取值代码：

  String updateField = request.getParameter("updateField");
  String updateValue = request.getParameter("updateValue");

  updateField 就是你要修改的数据库的列名，updateValue 就是值

  if(updateField != null && updateValue!=null){
      updateString += " a."+updateField+" = '"+updateValue+"' ";
  }

 

分享到：
| ibatis中主键自动增长（Oracle，Ms sql ser ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs可编辑的EditorGridPanel

    NULL 博文链接：https://zxf-noimp.iteye.com/blog/629629

    Extjs EditorGridPanel中ComboBox列的显示问题

    在EXTJS中，EditorGridPanel是一种可编辑的表格组件，它允许用户直接在表格单元格内编辑数据。然而，当在EditorGridPanel中嵌入ComboBox（下拉选择框）作为编辑器时，可能会遇到一个问题，即ComboBox显示的不是其...

    extjs培训2011-12-17

    - `editorgrid`: `Ext.grid.EditorGridPanel` — 可编辑的表格。 - `grid`: `Ext.grid.GridPanel` — 表格。 - `panel`: `Ext.Panel` — 面板。 - `progressbar`: `Ext.ProgressBar` — 进度条。 - `splitbutton`: `...

    ExtJS.in.Action

    - EditorGridPanel的高级功能 - DataView与ListView的应用场景 - 图表绘制与数据可视化 ### 架构设计原理 在《ExtJS in Action》一书中，作者首先介绍了ExtJS框架的设计理念和架构原理。ExtJS是一个用于构建...

    extjs 导入导出 Exel

    文件"Extjs利用服务器实现Excel数据导入editorgridpanel中显示_寒冰_新浪博客.mht"可能讲解了如何将Excel 文件的数据导入到EXTJS 的EditorGridPanel 中。导入过程一般包括： 1. 用户上传Excel 文件，EXTJS 通过...

    ExtJS in Action－英文原版－完整版

    - 第三部分介绍数据驱动的组件，如网格面板（GridPanel）、编辑器网格面板（EditorGridPanel）、数据视图和列表视图（DataView和ListView）、图表（Charts）、树形结构（trees）以及菜单、按钮和工具栏（Menus, ...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架，它主要用于构建富客户端应用，提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构，允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    给Extjs的GridPanel增加“合计”行

    在EXTJS中，GridPanel是一种常用的组件，用于展示表格数据。在实际应用中，我们经常需要在GridPanel底部显示一行“合计”行，以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    Extjs in action

    - **编辑网格面板**：进一步探讨了`EditorGridPanel`，这是一种可以编辑表格数据的增强型网格面板。 - **数据视图和列表视图**：介绍了`DataView`和`ListView`组件，它们适用于显示大量数据。 - **图表组件**：讲解...

    extjs扩展标记

    1. **EXTJS组件**：EXTJS的核心是它的组件模型，包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面，...

    extjs xtype

    10. `editorgrid` - `Ext.grid.EditorGridPanel`：可编辑的表格，允许用户直接在表格中修改数据。 11. `grid` - `Ext.grid.GridPanel`：标准的表格组件，用于展示数据。 12. `paging` - `Ext.PagingToolbar`：分页...

    Extjs 性能优化 High Performance ExtJs

    另外需要注意的是，当 `form` 与 `EditorGridPanel` 结合使用时，应当特别注意表单的状态管理，确保每次提交都是有意义的。 #### 四、字符串与对象之间的转换 在 Extjs 开发过程中，常常需要将字符串转换为对象或...

    EXTJS实用开发指南_个人整理笔记.pdf

    1. 基本控件：Box、Button、ColorPalette、Component、Container、CycleButton、DataView、DatePicker、Editor、EditorGridPanel、Grid、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、...

    extjs的快速入门教程

    - **可编辑的表格(EditorGridPanel)**: - 在表格的基础上增加了编辑功能，用户可以直接修改数据。 #### 七、与服务器交互 - **数据存储(Store)**: - 存储和管理数据集，支持本地数据和远程数据加载。 - **...

    ExtJS下拉列表树控件

    对于ExtJS EditorGridPanel中ComboBox列的显示问题，可能是因为数据没有正确绑定或格式化问题，确保`store`已加载数据，并且在`renderer`函数中正确显示数据。 至于回显问题，即在编辑时显示已有的数据，需要确保在...

    EXTJS实用开发指南

    - 表单及元素组件：Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window等。 EXTJS通过其强大的组件模型和丰富的API，为开发者提供了...

    ssh+extjs4.0grid增删改查

    - 添加EditorGridPanel，允许在Grid中直接编辑单元格数据。 - 实现Model和Proxy，Model定义数据字段，Proxy配置数据源，如JsonP或Restful API。 4. **Grid的CRUD操作**： - 增加：通过Grid的行插入功能，调用...

    ExtJs组件类的对应表

    11. **`editorgrid`** - `Ext.grid.EditorGridPanel`，可编辑的表格组件，允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `Ext.grid.PropertyGrid`，属性表格组件，用于展示对象的属性。 13. **`...

Magicbox
Global site tag (gtag.js) - Google Analytics