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

}

1

 

不過,有時 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");

}

 

 

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

2

Demo 下載:Sample_C1GridView_ClientSideUpdate.zip

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM