文章分類/Infragistics
概述:
插入
添加函數傳遞, 與數據源架構匹配的值數組, 來將數據添加到數據源。
$find(<GRID_CLIENT_ID>).get_rows().add(<NEW_VALUES_ARRAY>);
刪除行
請使用刪除函數。
$find(<GRID_CLIENT_ID>).get_rows().remove(<ROW_INSTANCE>,false);
更新
網格中保留數據更新,請將 WebDataGrid 包裝在 UpdatePanel 中以觸發服務器回發。
<asp:UpdatePanel runat=”server”> <ContentTemplate> <ig:WebDataGrid ID=”wdg” runat=”server” AutoGenerateColumns=”False” DataSourceID=”ods” DataKeyFields=”Id” Width=”400″> <Columns> <ig:BoundDataField DataFieldName=”FirstName” Header-Text=”First Name” Key=”FirstName” /> <ig:BoundDataField DataFieldName=”LastName” Header-Text=”Last Name” Key=”LastName” /> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing /> <ig:RowAdding /> <ig:RowDeleting /> </Behaviors> </ig:EditingCore> <ig:Selection CellClickAction=”Row” RowSelectType=”Single”> <SelectionClientEvents RowSelectionChanged=”onRowSelectionChanged” /> </ig:Selection> <ig:RowSelectors> </ig:RowSelectors> </Behaviors> </ig:WebDataGrid> <input type=”button” value=”Delete” onclick=”del();” /> <asp:Button Text=”Update” runat=”server” /> </ContentTemplate> </asp:UpdatePanel>
介紹
WebDataGrid 提供了豐富的 API 來執行服務器 CRUD 操作。您還可以在客戶端添加、修改和刪除數據源中的行。請參閱下面的 JavaScript 以在客戶端執行此操作。本教程將向您展示如何僅在客戶端的網格中插入、更新和刪除數據。
注意:我說過 CRUD 操作“僅限客戶端”,但讓我再解釋一下。所有持久性都在服務器端完成。客戶端 CRUD 方法使用 AJAX 將持久消息發送到服務器,而無需執行完整的回發。此外,使用客戶端 CRUD 方法,您無需編寫後台代碼即可與數據源交互。
以帶有網格和其他控件的頁面為例。
WebDataGrid 應以標準方式顯示數據。要從網格(和數據源)中刪除行,請單擊行選擇器,然後按刪除按鈕。網格數據的更新不會立即保存,因為我將它們與網格內聯。編輯網格中的多個字段,然後單擊“更新”按鈕保存更改。要將數據添加到數據源,請輸入新數據並單擊“添加”按鈕。
注意:WebDataGrid 包含提供向網格添加數據的界面的默認控件。默認情況下,使用網格下方的空行將使用 AJAX 請求將數據添加到源。本文使用與網格不關聯的輸入控件插入數據。
標記
此示例標記包含以下部分中描述的多個控件。第一組控件是WebDataGrid 和UpdatePanel。
WebDataGrid 和 UpdatePanel
此示例的標記以 ScriptManager 和 WebDataGrid 開始。還有一個包含網格和按鈕控件的 UpdatePanel。
WebDataGrid 支持付費模式。僅當行為有效時,才會向客戶端提供網格功能所需的腳本和其他資源。下面的行為編輯器圖像顯示了啟用客戶端 CRUD 所需的行為。
啟用單元格編輯、行添加和行刪除為客戶端提供了必要的腳本文件,以在網格中啟用此行為。啟用行選擇器行為以刪除行。用戶必須選擇一行。需要選擇行為來格式化行選擇。單擊單元格或行選擇器時,將選擇整行。 必須選擇整行,網格 才能觸發RowSelectionChanged事件。在此示例中, 它是在onRowSelectionChanged函數中處理的。此函數提供必要的掛鉤來引用代碼中選定的行。
UpdatePanel 和網格的標記是下面的代碼。
ObjectDataSource
WebDataGrid 需要 ASP.NET 數據源控件來提供用於訪問應用程序的持久性功能的接口。此示例使用 ObjectDataSource,但您也可以使用其他數據源控件。
數據源控件引用名為 PersonRepository 的類中的匹配方法來保存更改。
請參閱onobjectcreating 的事件處理程序。 該事件處理程序用於為數據源控件提供 PersonRepository 類的一個實例,而不是在執行每個數據源控件操作時創建一個新實例。 向控件提供對象實例需要在代碼隱藏中添加幾行代碼。
using System; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { private WebStateRepository _repository = new WebStateRepository(); protected void ods_ObjectCreating(object sender, ObjectDataSourceEventArgs e) { e.ObjectInstance = this._repository.Instance; } protected void Page_PreRender(object sender, EventArgs e) { if (this.Page.IsPostBack) { this._repository.Persist(); } } }
該代碼的重要部分是 ods_ObjectCreating 方法的主體。這裡我們提供了一個用於 ObjectDataSource 控件的對象實例。
注意:WebStateRepository 類是本示例中使用的實用程序類,用於存儲會話狀態中的對象集合。該實現將數據源控件引用到實際存儲庫類的實例。
HTML 輸入控件
下面的代碼提供了顯示文本框以供用戶輸入人員姓名所需的標記。當您單擊“添加”按鈕時,頁面上會執行一個名為“ add ”的 JavaScript 函數。
腳本
到目前為止的代碼應該看起來很熟悉,但最後一步是實現用於添加和刪除數據的客戶端消息。要批量更新服務器,請更改網格的內聯數據並在 UpdatePanel 中觸發到服務器的回發。
添加數據
function add() { var grid = $find("<%= wdg.ClientID %>"); var rows = grid.get_rows(); var newPerson = [$get("firstName").value, $get("lastName").value]; rows.add(newPerson); }
將新值數組傳遞給行集合添加函數,以向服務器發送插入請求。此函數使用 ASP.NET AJAX 選擇器 查找頁面上的firstName 和 lastName控件,並根據控件的值創建一個新數組。為了檢查插入,將數組傳遞給 add 函數。
刪除數據
刪除數據有兩個步驟。首先,用戶選擇要刪除的行。它檢索選定的行並允許您刪除該行。要處理選擇過程,請 在 RowSelectionChanged事件中 調用onRowSelectionChanged函數。
var selectedDataKey = ""; function onRowSelectionChanged(sender, eventArgs) { var rows = eventArgs.getSelectedRows(); var selectedRow = rows.getItem(0); selectedDataKey = selectedRow.get_dataKey(); }
創建selectedDataKey變量以在行選擇更改時存儲所選鍵。onRowSelectionChanged 函數 從eventArgs 獲取選定的行。由於我們已將網格配置為只能選擇一行,因此 我們調用row.getItem(0) 來設置selectedRow變量。selectedDataKey 的值 是通過調用selectedRow 實例 的get_dataKey()函數來設置的。
設置所選鍵後刪除數據源中的行。
function del() { if (selectedDataKey != "") { var grid = $find("<%= wdg.ClientID %>"); var rows = grid.get_rows(); var row = rows.get_rowFromKey(selectedDataKey); rows.remove(row, false); } else { alert("Please select a row to remove."); } }
通過傳遞網格行集合的實例,get_rowFromKey 方法檢索用戶選擇的行。將行實例傳遞給行集合的刪除函數會向服務器發送一條刪除消息。delete 方法的第二個參數稍微複雜一些。參數名稱 是noncommitting 。
如果要保存對數據源的更改,則應將 false 傳遞給此函數。