`

开发动态编辑的表格

 
阅读更多

开发动态编辑的表格

Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能,该包下提供了如下3个与表格编辑有关的类。

  • Ø Ext.grid.plugin.Editing:为表格增加编辑功能的基类。
  • Ø Ext.grid.plugin.RowEditing:为表格行增加编辑功能的插件类。
  • Ø Ext.grid.plugin.CellEditing:为单元格增加编辑功能的插件类。

当使用Ext.grid.plugin.RowEditing、Ext.grid.plugin.CellEditing为表格增加编辑时,可以指定如下4种常见的事件处理函数。

  • Ø beforeedit:在编辑之前触发的事件处理函数。
  • Ø canceledit:取消编辑时触发的事件处理函数。
  • Ø edit:编辑完成时触发的事件处理函数。
  • Ø validateedit:指定编辑完成之后,值被保存到Store之前触发该事件处理函数。如果该事件处理函数返回false,将可以取消编辑。

为该表格增加动态编辑功能,需要完成如下两步:

 使用Ext.grid.Panel定义表格时,可通过plugins选项为表格单击单元格编辑插件或行编辑插件。

 使用Ext.grid.Panel定义表格,并且使用fields选项定义表格列时,为需要编辑的单元格通过editor选项指定单元格编辑器。

如下示例开发了一个允许异步、动态编辑表格数据的页面。

程序清单:codes\06\6.8\Ext.grid\Ext.grid.Panel_edit.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 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}},

         ],

         selType: 'rowmodel', // 指定选择模式:行选择模式

         plugins:

         [

               // 增加表格行编辑插件

               {

                    ptype: 'rowediting',

                    clicksToEdit: 1

               }

         ],

         store: bookStore

    });

    // 当表格编辑完成后,触发该事件处理函数

    grid.on('edit', function(editor, e)

    {

         Ext.Ajax.request({

               url: 'updateBook', // 向此处发送Ajax请求

               method: 'POST',

               params: { // 指定请求参数

                    id: e.newValues.id,

                    name: e.newValues.name,

                    author: e.newValues.author,

                    price: e.newValues.price,

               }, // 指定服务器响应完成的回调函数

               success: function(response){

                    alert(Ext.JSON.decode(response.responseText).tip);

                    e.record.commit();

               }

         });

    });

});

</script>

</body>

 

上面的第一段粗体字代码通过fields选项配置了该表格的所有表格列,配置各表格列时通过editor选项指定了各单元格的编辑器;接下来第二段粗体字代码通过plugins选项为表格增加了表格行编辑的功能;第三段代码为表格的编辑事件增加了事件处理函数,但表格编辑完成后,将会通过Ajax请求动态地修改底层数据。

当前台页面的记录修改完成后,该页面会向updateBook发送请求,该Servlet的代码如下。

程序清单:codes\06\6.8\Ext.grid\WEB-INF\src\org\crazyit\exts\web\UpdateBookServlet.java

@WebServlet(urlPatterns="/updateBook")

public class UpdateBookServlet extends HttpServlet

{

    public void service(HttpServletRequest request ,

         HttpServletResponse response)

         throws IOException , ServletException

    {

         request.setCharacterEncoding("utf-8");

         // 获取请求参数

         String id = request.getParameter("id");

         String name = request.getParameter("name");

         String author = request.getParameter("author");

         String price = request.getParameter("price");

         Map<String , Object> result = new HashMap<>();

         boolean rvtVal = new BookService().updateBook(

               Integer.parseInt(id) , name , author ,

               Double.parseDouble(price));

         result.put("tip" , rvtVal ? "修改成功!" : "修改失败!");

         // 准备输出服务器响应

         response.setContentType("text/html;charset=utf-8");

         PrintWriter out = response.getWriter();

         // 将Map包装成JSONObject后输出

         out.print(new JSONObject(result));

    }

}

 

上面的Servlet调用了业务逻辑组件BookService的updateBook()方法更新图书,这样即可动态地以Ajax方式修改底层数据。

在浏览器中浏览该页面,并单击任意行就会进入“行编辑”状态,效果如图6.79所示。

 

图6.79 编辑行

 

本文节选自

《疯狂Ajax讲义(第3版)》

李刚 编著

电子工业出版社出版

分享到:
评论

相关推荐

    基于net的超市管理系统源代码(完整前后端+sqlserver+说明文档+LW).zip

    功能说明: 环境说明: 开发软件:VS 2017 (版本2017以上即可,不能低于2017) 数据库:SqlServer2008r2(数据库版本无限制,都可以导入) 开发模式:mvc。。。

    LABVIEW程序实例-公式节点.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    大米商城开源版damishop(适合外贸)

    大米外贸商城系统 简称damishop 完全开源版,只需做一种语言一键开启全球133中语言自动翻译功能,价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式,自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台,API导入产品方便对接其他系统(带json示例数据)。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行,命令行生成语言翻译包 4、后台一键开启自动翻译模式,支持全球133中语言,由于google代理翻译需要收费,这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口,方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插

    LABVIEW程序实例-通过全局变量接收数据.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    LABVIEW程序实例-日历控件.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频.zip

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频

Global site tag (gtag.js) - Google Analytics