天天看點

Wijmo 更優美的jQuery UI部件集:用戶端更改C1GridView資料源

很多時候,我們在使用 GridView 展示資料時,希望最終使用者可以編輯資料并且同步到資料源中。這是一項繁瑣的工作。我們需要自定義模闆列,并且在背景手動擷取更新值,最後使用 SQL 語句同步到資料庫中。 

但是,現在我們有了 C1 Wijmo GridView ,這些繁瑣的工作都成為曆史。C1GridView 僅僅通過一個屬性-AllowClientEditing 便允使用者在用戶端編輯單元格内容。

需要編輯時,我們可以通過輕按兩下單元格使其進入編輯狀态即可。完成編輯後,選擇其它單元格去儲存編輯值。 

這篇文章将叙述在不執行任何 PostBack 的情況下,如何輕而易舉的更新資料庫。 

1.定義資料庫連接配接字元串并且綁定到 C1GridView

C1GridView 可以綁定 Oledb 資料源或 SQL 資料源。本文中,我們将使用 Oledb 資料源。請根據下面的代碼設定 DataKeyNames 和 C1GridView 相關列。同時,我們需要設定 CallbackSettings 值為 editing ,這樣在我們儲存時,不會發生 Postback。

參考代碼:

2.下面,我們定義 Oledb 資料庫連接配接字元串。因為需要将更改同步到資料庫中,是以我們需要寫 SQL 語句去同步資料源。

參考代碼:

3.我們僅需在 RowUpdating 和 EndRowUpdated 事件中更新被編輯的行。在用戶端使用 C1 Wijmo GridView 修改資料源。

 在 EndRowUpdated 事件中重新綁定 C1GridView 資料源。

Wijmo 更優美的jQuery UI部件集:用戶端更改C1GridView資料源

不過,有時 C1GridView 中僅僅有一行資料(例如:執行了過濾操作)。使用者編輯這一行,但是我們并沒有其他行可以點選,進而無法儲存更改。不要着急!

我們隻需要添加 button 去調用 C1GridView 的前台方法 Update即可。

使用下面代碼調用 Update() 方法:

好了,現在我們可以運作程式檢視效果了。

Wijmo 更優美的jQuery UI部件集:用戶端更改C1GridView資料源