開發動態編輯的表格

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

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();

}

});

});

上面的第一段粗體字程式碼透過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 ut = response.getWriter();

// 將Map包裝成JSONObject後輸出

out.print(new JSONObject(result));

}

上面的Servlet呼叫了業務邏輯元件BookService的updateBook()方法更新圖書，這樣即可動態地以Ajax方式修改底層資料。

在瀏覽器中瀏覽該頁面，並單擊任意行就會進入“行編輯”狀態，效果如圖6.79所示。

圖6.79　編輯行

本文節選自

《瘋狂Ajax講義（第3版）》

李剛編著

電子工業出版社出版

開發動態編輯的表格

相關文章