开发动态编辑的表格

开发动态编辑的表格

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

 

上面的第一段粗体字代码通过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 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版）》

李刚 编著

电子工业出版社出版