使用Ext.grid.column.Action操作表格数据
2014-03-21 15:10
363 查看
6.8.10 使用Ext.grid.column.Action操作表格数据
2013-02-28 12:31 李刚 电子工业出版社 字号:T | T综合评级:
想读(1) 在读(0) 已读(0) 品书斋鉴(0) 已有1人发表书评
《疯狂Ajax讲义(第3版)--jQuery/Ext JS/Prototype/DWR企业应用前端开发实战》本书详细介绍了jQuery 1.8、Ext JS 4.1、Prototype 1.7.1、DWR这4个最常用的Ajax框架的用法,并针对每个框架提供了一个实用案例,让读者理论联系实际。这部分内容是"疯狂软件教育中心"的标准讲义,它既包含了实际Ajax开发的重点和难点,也融入了大量学习者的学习经验和感悟。本节为大家介绍使用Ext.grid.column.Action操作表格数据。
AD:51CTO学院:IT精品课程在线看!
6.8.10 使用Ext.grid.column.Action操作表格数据
前面已经提到,通过使用Ext.grid.column.Action列类型,可以为表格增加"按钮"列,但用户单击不同按钮时将会激发不同的事件处理函数,比如用户单击"编辑"按钮时,系统弹出浮动窗口修改当前记录;当用户单击"删除"按钮时,系统删除指定记录。
如下示例示范了使用Ext.grid.column.Action按钮列来操作表格数据的方法。
程序清单:codes\06\6.8\Ext.grid\Ext.grid.Panel_Action.html
<body> <script type="text/javascript"> Ext.onReady(function(){ Ext.define('Book', { extend: 'Ext.data.Model', fields: [ {name: 'id' , type: 'int'}, {name: 'name', type: 'string'}, {name: 'author', type: 'string'}, {name: 'price', type: 'float'}, ] }); // 创建一个Ext.data.Store对象 var bookStore = Ext.create('Ext.data.Store', { // 指定使用Book Model管理记录 model: 'Book', // 使用proxy指定加载远程数据 proxy: { type: 'ajax', url: 'getAllBooks',// 向该URL发送Ajax请求 reader: { // 使用Ext.data.reader.Json读取服务器数据 type: 'json', root: 'data' // 直接读取服务器响应的data数据 }, }, autoLoad:true// 自动加载服务器数据 }); var editWin; // 定义单击“编辑”按钮的事件处理函数 var editFn = function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); if(editWin) { editWin.setTitle('编辑《' + rec.get('name') + '》'); var formFields = editWin.items.get(0).items; formFields.get(0).setValue(rec.get('id')); formFields.get(1).setValue(rec.get('name')); formFields.get(2).setValue(rec.get('author')); formFields.get(3).setValue(rec.get('price')); } else { editWin = Ext.create("Ext.window.Window", { title : '编辑《' + rec.get('name') + '》', items: [ { url: 'updateBook', xtype: 'form', width: '100%', bodyPadding: 10, items: [ { xtype: 'textfield', name: 'id', readOnly: true, value: rec.get('id'), // 指定该表单控件的值 fieldLabel: 'ID', // 指定该表单控件的标签 }, { xtype: 'textfield', name: 'name', value: rec.get('name'), // 指定该表单控件的值 fieldLabel: '书名', // 指定该表单控件的标签 }, { xtype: 'textfield', name: 'author', value: rec.get('author'), // 指定该表单控件的值 fieldLabel: '作者', // 指定该表单控件的标签 }, { xtype: 'textfield', name: 'price', value: rec.get('price'), // 指定该表单控件的值 fieldLabel: '价格', // 指定该表单控件的标签 } ] } ], listeners: { beforedestroy : function(cmp) { this.hide(); return false; } }, bbar: [ {xtype: 'tbfill' ,}, {text:'确定' , handler: function() { // 获取表单,实际返回的是Ext.form.Basic对象 var form = editWin.items.get(0).getForm(); // 如果表单输入校验通过 if (form.isValid()) { // 以Ajax方式提交表单 form.submit( { // 修改成功的回调函数 success: function(form, action) { bookStore.reload(); editWin.hide(); alert(action.result.tip); } }); } } }, {text:'取消' , handler:function() { editWin.hide(); }}, {xtype: 'tbfill' ,} ] }); } editWin.setVisible(true); }; // 定义单击“删除”按钮的事件处理函数 var deleteFn = function(grid, rowIndex, colIndex) { if(confirm("确认删除" , "您是否真想删除该记录")) { var rec = grid.getStore().getAt(rowIndex); Ext.Ajax.request({ url: 'deleteBook', // 向此处发送Ajax请求 method: 'POST', params: { // 指定请求参数 id: rec.get('id') }, // 指定服务器响应完成的回调函数 success: function(response){ bookStore.reload(); alert(Ext.JSON.decode(response.responseText).tip); } }); } }; var grid = Ext.create('Ext.grid.Panel', { title: '查看服务器端图书', width: 550, // 指定表单宽度 renderTo: Ext.getBody(), // 定义该表格包含的所有数据列 columns: [ { text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列 // 第2个数据列 { text: '书名', dataIndex: 'name' , flex: 1, editor: {xtype: 'textfield', allowPattern: false}}, // 第3个数据列 { text: '作者', dataIndex: 'author', flex: 1, editor: {xtype: 'textfield', allowPattern: false}}, // 第4个数据列 { text: '价格', dataIndex: 'price' , flex: 1, editor: {xtype: 'numberfield', allowPattern: false}}, { text: '操作', xtype:'actioncolumn', width: 50, items: [ { icon: 'edit.gif', // 指定图标 tooltip: '编辑', handler: editFn // 指定单击“编辑”按钮的事件处理函数 }, { icon: 'delete.gif', // 指定图标 tooltip: '删除', handler: deleteFn // 指定单击“删除”按钮的事件处理函数 } ] } ], store: bookStore }); }); </script> </body>
上面页面代码中的最后一段粗体字代码指定了在该列增加两个按钮,当用户单击该列的 "编辑"按钮时,系统会激发editFn函数,该函数将会根据需要创建一个Ext.window.Window窗口来编辑当前记录;当用户单击该列的"删除"按钮时,系统将会激发"deleteFn"函数,该函数将会弹出一个确认框,让用户确认是否需要删除当前记录。
在浏览器中浏览该页面,单击"编辑"按钮,将可以看到如图6.82所示界面。
(点击查看大图)图6.82 编辑数据 |
相关文章推荐
- 使用Ext.grid.column.Action操作表格数据
- 【ExtJs】表格控件Grid的增删改查,利用renderer让操作列actioncolumn使用文字而不是图标
- DhtmlxGrid组件应用---结合Ajax实现对表格数据的无刷新操作
- ExtJs actioncolumn根据grid数据动态显示按钮
- 使用pgadmin3操作数据库 简介,误删数据表格后用Django重新生成表
- 使用Ext.grid.Panel显示远程数据
- 表格数据分组:Ext.grid.GroupingView
- 使用Ext.grid.Panel生成表格
- 使用LayUI操作数据表格
- EXT EditorGridPanel 中使用Ext.grid.CheckColumn
- 使用LayUI操作数据表格
- JS操作DOM 使用表格动态展示数据
- php使用PDO事务配合表格读取大量数据插入操作实现方法
- Ext.grid.Panel远程加载数据分页,提供添加删除修改等操作
- 表格数据分组:Ext.grid.GroupingView
- 17个使用AJAX技术的数据表格控件解决方案(Data Grids with AJAX, DHTML and JavaScript)
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- ExtJS4 grid表格数据选取和使用
- Ext.grid.ColumnModel——给表格加行号
- 表格数据分组:Ext.grid.GroupingView