Wijmo 更優美的jQuery UI組件集：用戶端更改C1GridView資料來源

很多時候，我們在使用 GridView 展示資料時，希望終端使用者可以編輯資料並且同步到資料來源中。這是一項繁瑣的工作。我們需要自訂模板列，並且在後台手動擷取更新值，最後使用 SQL 陳述式同步到資料庫中。

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

需要編輯時，我們可以通過雙擊儲存格使其進入編輯狀態即可。完成編輯後，選擇其它儲存格去儲存編輯值。

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

 

1.定義資料庫連接字串並且綁定到 C1GridView

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

參考代碼:

 

 

  
<wijmo:C1GridView ID="C1GridView1" runat="server" 
  
 
  
AutogenerateColumns="false" DataKeyNames="CustomerID" ClientSelectionMode="SingleRow" 
  
 
  
AllowClientEditing="true" ShowFilter="true" 
  
 
  
OnEndRowUpdated="C1GridView1_EndRowUpdated"> 
  
 
  
<CallbackSettings Action="Editing, Filtering" /> 
  
 
  
<Columns> 
  
 
  
<wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID"> 
  
 
  
</wijmo:C1BoundField> 
  
 
  
<wijmo:C1BoundField DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyName"> 
  
 
  
</wijmo:C1BoundField> 
  
 
  
<wijmo:C1BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName"> 
  
 
  
</wijmo:C1BoundField> 
  
 
  
<wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City"> 
  
 
  
</wijmo:C1BoundField> 
  
 
  
<wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country"> 
  
 
  
</wijmo:C1BoundField> 
  
 
  
</Columns> 
  
 
  
</wijmo:C1GridView> 
 

 

2.下面，我們定義 Oledb 資料庫連接字串。因為需要將更改同步到資料庫中，所以我們需要寫 SQL 陳述式去同步資料來源。

參考代碼：

 

 

  
public DataTable GetDataTable() 
  
 
  
{ 
  
 
  
DataTable dt = Page.Session["Customers"] as DataTable; 
  
 
  
OleDbConnection con = new OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb")); 
  
 
  
OleDbDataAdapter da = new OleDbDataAdapter(); 
  
 
  
da.SelectCommand = new OleDbCommand("SELECT * FROM [Customers] Order By [CustomerID]", con); 
  
 
  
da.UpdateCommand = new OleDbCommand("Update [Customers] set [CompanyName]=?, [ContactName]=?, [City]=?, [Country]=? where CustomerID = ?", con); 
  
 
  
da.UpdateCommand.Parameters.Add("@CompanyName", OleDbType.VarChar, 50, "CompanyName"); 
  
 
  
da.UpdateCommand.Parameters.Add("@ContactName", OleDbType.VarChar, 50, "ContactName"); 
  
 
  
da.UpdateCommand.Parameters.Add("@City", OleDbType.VarChar, 50, "City"); 
  
 
  
da.UpdateCommand.Parameters.Add("@Country", OleDbType.VarChar, 50, "Country"); 
  
 
  
da.UpdateCommand.Parameters.Add("@CustomerID", OleDbType.VarChar, 50, "CustomerID"); 
  
 
  
if (dt == null) 
  
 
  
{ 
  
 
  
dt = new DataTable(); 
  
 
  
da.Fill(dt); 
  
 
  
dt.PrimaryKey = new DataColumn[] { dt.Columns["CustomerID"] }; 
  
 
  
Page.Session["Customers"] = dt; 
  
 
  
} 
  
 
  
da.Update(dt); 
  
 
  
return dt; 
  
 
  
} 
 

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

 

  
protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e) 
  
 
  
{ 
  
 
  
DataTable customers = GetDataTable(); 
  
 
  
DataRow row = customers.Rows.Find(C1GridView1.DataKeys[e.RowIndex].Value); 
  
 
  
if (row != null) 
  
 
  
{ 
  
 
  
foreach (DictionaryEntry entry in e.NewValues) 
  
 
  
{ 
  
 
  
row[(string)entry.Key] = entry.Value; 
  
 
  
} 
  
 
  
} 
  
 
  
else 
  
 
  
{ 
  
 
  
throw new RowNotInTableException(); 
  
 
  
} 
  
 
  
Page.Session["Customers"] = customers; 
  
 
  
} 
 

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

 

 

  
protected void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e) 
  
 
  
{ 
  
 
  
C1GridView1.DataSource = GetDataTable(); 
  
 
  
C1GridView1.DataBind(); 
  
 
  
} 
 

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="1" border="0" alt="1" src="http://www.bkjia.com/uploads/allimg/131228/132220N63-0.png" width="296" height="164" />

 

不過，有時 C1GridView 中僅僅有一行資料例如：執行了過濾操作）。使用者編輯這一行，但是我們並沒有其他行可以點擊，從而無法儲存更改。不要著急！

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

 

  
<asp:Button ID="btn1" runat="server" Text="Update C1GridView"OnClientClick="btn_ClientClick(); return false;" /> 
 

 

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

 

 

  
function btn_ClientClick(sender, args) 
  
 
  
{ 
  
 
  
var grid = $("#C1GridView1"); 
  
 
  
grid.c1gridview("endEdit"); 
  
 
  
grid.c1gridview("update"); 
  
 
  
} 
 

 

好了，現在我們可以運行程式查看效果了。

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="2" border="0" alt="2" src="http://www.bkjia.com/uploads/allimg/131228/1322202956-1.png" width="595" height="325" />

Demo 下載：Sample_C1GridView_ClientSideUpdate.zip

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布2012.03.22更新）!