ASP.NET中使用JqGrid完整實現__.net

  文章提綱 介紹 & 使用情境 JqGrid的一些說明 JqGrid和ASP.NET整合詳細步驟

　　前置準備

　　架構搭建

　　資料填充

　　資料增/刪/改

　　其他  介紹&使用情境

JqGrid不是一個新鮮玩意，已經是一個久經證明的開來源資料顯示控制項了。

園子裡也有一些介紹文章，為什麼還要寫這篇文章呢。

因為還找不到可以完整講述JqGrid整合的文章，我指的是從頭至尾的完整的講述，而不是其中一些片段或介紹一些參數。

正好在看到一篇文章完整的講述了這個步驟： http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

本文主要參考了這篇文章，講述jqGrid和ASP.NET整合。

使用情境：

資料多且雜時，如果想要給表格式資料的顯示增加方便的查詢/刪選功能。

JqGrid免費，開源，使用方便，是一個不錯的選擇。

  JqGrid的一些說明 外觀時髦，功能齊全 JS控制項，用來顯示和動作表格資料 使用AJAX方式 可以被整合到任何伺服器端技術，例如ASP, JavaServelets, JSP, PHP 等等. 由Trirand公司Tony Tomov開發. 和ASP.NET整合非常簡單 JqGrid和ASP.NET整合詳細步驟 下載JqGrid，添加所需的檔案到ASP.NET應用程式 (主要是一些Scripts and CSS). 在需要使用的頁面中初始化JqGrid. 綁定資料 其他一些操作，如增刪改  

1. 我提到的第一點，你可以在以下地址下載JqGrid和相關的檔案

http://www.trirand.com/blog/?page_id=6 

下載得到jquery.jqGrid-4.5.2.zip. 

將檔案解壓，裡面是一些css和script檔案夾， 讓我們去看看如何去使用這些檔案。
為了更好的理解, 按照國際慣例我建立了一個demo程式：JQGridPOC，用來展示整合的步驟和所具有的功能。

我們需要引入的主要檔案是jQuery, 因為jqGrid依賴於jQuery .

在解決方案中專門建立一個檔案夾JQGridReq用來放JqGrid相關的檔案。

第一步，添加jQuery檔案（我添加了jQuery 1.9）。

第二步，如果我們要如何使用jQuery中任何UI相關的東西? 是的，CSS檔案. 去jQuery的官網下載。 

最後一步，添加Jquery-ui-1.9.2.custom.css 到程式中。

請確保你同時添加了相關的圖片檔案夾，因為我們添加的CSS可能也會用到相關的圖片。

這樣jQuery的東西就準備好了。

下面再開始逐個添加我們JqGrid檔案。 jquery.jqGrid-4.5.2\src\ jquery.jqGrid.js  jquery.jqGrid-4.5.2\js\i18n\ grid.locale-en.js jquery.jqGrid-4.5.2\js\i18n\ grid.locale-cn.js jquery.jqGrid-4.5.2\css\ ui.jqgrid.css

你看到上面添加的locale-en.js/local-en.js檔案了嗎? 他們非常重要，可以在裡面更改一些預設的參數。

同樣的，我們也添加了CSS檔案.

現在我們先決條件都完成了。

如下圖，你可以看到我們添加後的檔案和檔案夾結構.

 

讓我們去.aspx 頁面添加JqGrid吧。

這個簡單的樣本項目中我使用了簡單的客戶管理的案例，使用Default.aspx 做為例子。

需要將所有需要的檔案先引用到HTML頁的head部分，如下圖。

現在需要做的是先將HTML table標籤放置到頁面中，給這個table指定一個ID jQgridPOC (這個table就是我們即將要轉變成的JqGrid)。

 

 

 

2. 在需要使用的頁面中初始化JqGrid.

下面將要將這個table轉變成JqGrid.

準備好我們將要打算顯示在Grid中的欄位，我們初始化table的時候必須帶上這些欄位。

我們準備顯示的是： UniqueID First Name Last Name City State Address.

你可以使用下面指令碼將HTML table初始化成grid.

程式碼片段：     <script>         $(function () {             $("#jQgridPOC").jqGrid({                 url: 'http://localhost:58404/JQGridHandler.ashx',                 datatype: "json",                 colNames: ['Id', '大名', '尊姓', "地址", '城市', '州'],                 colModel: [                             { name: 'id', index: 'id', width: 20, stype: 'text' },                             { name: 'FirstName', index: 'FirstName', width: 80, stype: 'text', sortable: true, editable: true },                             { name: 'LastName', index: 'LastName', width: 80, align: "right", editable: true },                             { name: 'Address1', index: 'Address1', width: 150, align: "right", editable: true },                             { name: 'City', index: 'City', width: 80, align: "right", editable: true },                             { name: 'State', index: 'State', width: 100, sortable: false, editable: true }                 ],                 rowNum: 10,                 loadonce: true,                 sortname: '_id',                 viewrecords: true,                 sortorder: 'desc',                 caption: "客戶列表"               });         });  

    </script>

運行程式，你將會得到下圖所示表格（目前還沒資料）。

我想根據表格顯示內容，你應該能讀懂我寫的初始化指令碼。

colNames代表表格頭部.

colModel是JSON對象資料的屬性，用來配置表格中的每一列。

可以說要在表格中顯示的資料模型。colNames中的屬性順序應該和colModel中數組的順序相匹配。 3. 綁定資料

你也許注意到url屬性留著沒有填。

那是供AJAX調用的，下面就完成這部分內容，填充這個grid.

我使用SQL Server的樣本資料庫PETSHOP作為後端.

URL如何完成填充資料。

我所做的是, 建立一個HTTP handler, handler裡面的函數去取表 [MSPetShop4Profile].[dbo].[Account] 中的資料並且寫到HTTP Response中去。

HTTP response將會是一個JSON字串，按照之前提到的colModel的格式。

我們的JqGrid讀取JSON返回字串，在colModel的協助下顯示在JqGrid裡。

你需要留意一下，目前我們使用JSON對象。

JqGrid可以使用XML，JSON，數組，我們使用的是JSON。

正如我所說的，我建立了一個.ashx handler，叫JQGridHandler.ashx

相應的url地址為：http://localhost:58404/JQGridHandler.ashx.

下面就向你展示資料如何從handler中讀取。從grid中訪問handler僅僅只需要調用URL

通常，如果我們需要傳遞資料到handler或從handler中讀取資料，我們在哪找傳遞的參數。

是的，我們顯然會首先去context.Request中找，不是嗎。

此時我們也會去看看在 context request 中是否有表單參數資料傳遞進來。
讓我們去調試看看。

通過查看調試器（如上圖），你可以看到我在通過調用forms.Get(“oper”) 找 oper  的值。

希望你已經注意到了 Form{} 屬性是空的。

那麼為什麼我會取oper的值呢。

我想你已經猜到了，grid操作資料時會依賴oper 參數。

繼續往下看，我將會向你展示oper中的所有資料。

現在我們假設 oper==null 時代表grid是第一次載入。不要感到困惑。

下面我使用SQL Server資料庫作為我的資料存放區。

關於ADO.NET這塊我不做討論，主要用了一個類檔案SQLHelper和兩個函數