开发动态编辑的表格
开发动态编辑的表格
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版）》
李刚 编著
电子工业出版社出版
