JQuery FlexiGrid的asp.net完美解決方案-dotNetFlexGrid使用指南(一）Ajax異步表格

做者: 華磊 發表於 2010-08-17 21:39 原文連接 閱讀: 1939 評論: 38

dotNetFlexGrid-asp.net的異步表格控件 使用指南

 

1. 簡介

JQuery FlexiGrid的asp.net完美解決方案

dotNetFlexGrid是一款asp.net原生的異步表格控件，它的前身是Jquery FlexiGrid插件，咱們重構了FlexiGrid的大部分Javascript代碼，使其工做的更有效率，BUG更少；同時將其封裝爲asp.net 控件，提供了簡單易用的使用方式。

dotNetFlexGrid做爲一個輕量級的表格控件，同時提供了大量實用和高效的功能：

• 控件自己是全異步的工做模式，表格數據的刷新無需從新刷新整個頁面。
• 咱們提供了若干易用的客戶端方法，讓你的程序在添加、修改、刪除表格數據時無需從新加載大量的表格數據，而僅須要更新客戶端展示結果，這樣使得程序的後臺訪問次數大大下降。
• 咱們採用了相似AjaxPro的異步回調方式，使得您沒必要從新爲異步請求單獨開發頁面，經過簡單的數據提供函數，您可以在同一個頁面中完成全部的表格異步操做。
• dotNetFlexGrid提供了做爲一個Grid應有的所有功能，包括表格排序、列拖動、首行的複選框、斑馬色、快速查詢、顯示和隱藏列等等。

1. 下載和配置
2. 下載

您能夠訪問http://dotnetflexgrid.codeplex.com/ 下載控件的最新版本，包括最新的控件代碼、演示項目和說明文檔。

同時您能夠訪問http://www.cnblogs.com/hualei 獲取控件的最新消息和使用指導，咱們將爲您提供最新的全中文的指導，同時咱們歡迎您提供更好的建議和指正。

1. 配置在您的項目中

請檢查您下載的文件中包含dotNetFlexGrid v1.1.rar（此處採用v1.1版進行演示），該壓縮包包含dotNetFlexGrid的所有源碼，請將壓縮包中的全部文件解壓縮到如dotNetFlexGridControl的目錄（固然，您能夠設定任意的文件夾名）。

根據您的項目狀況，將dotNetFlexGridControl文件夾複製到您的asp.net站點目錄的任意目錄下，若是您使用的是Asp.net WebApplication，請在項目中至少包含以下文件：

• dotNetFlexGridControl\dotNetFlexGrid.ascx
• dotNetFlexGridControl\dotNetFlexGrid.ascx.cs
• dotNetFlexGridControl\dotNetFlexGridAsyn.aspx
• dotNetFlexGridControl\dotNetFlexGridAsyn.aspx.cs

請打開dotNetFlexGridControl\dotNetFlexGrid.ascx.cs文件，修改以下代碼爲您的項目中的控件路徑。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///

/// 配置點：根據控件的實際路徑配置

///

public string ControlCurrentPath

{

get

{

// TODO:ControlCurrentPath 配置點：根據控件的實際路徑配置

return "/dotNetFlexGridControl/";

}

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

同時，請在您的項目中引用Newtonsoft.Json.Net20.dll（該文件在Bin目錄中提供）

一切完畢，如今您能夠在您的項目中正式使用dotNetFlexGrid了。

Btw:彷佛的確麻煩了點，如今dotNetFlexGrid是採用Asp.net用戶控件的方式進行封裝的，大多數的開發中測試均是使用的Asp.net網站項目；在發佈的時候，咱們考慮到易用性以及便於修改，故沒有采用自定義控件的方式進行封裝；不過，這樣彷佛對使用者更加有利。

1. 第一個Grid

好了，咱們開始咱們的第一個Gird，咱們將實現演示項目中的FirstGrid.aspx的效果；這個例子展現一個模擬的用戶列表。

首先，打開Visual Studio 2005/2008/2010；咱們須要在頁面中加入控件，將您的頁面切換到設計視圖（在源代碼中複製粘貼也是不錯的主意），從解決方案資源管理器找到控件目錄下的dotNetFlexGrid.ascx，直接拖拽到頁面上合適的位置，注意檢查下你的控件ID（本例直接使用默認的"dotNetFlexGrid1"）。

其次，咱們須要寫一段代碼初始化Grid，將以下代碼複製到你的頁面的Page_Load中。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

this.dotNetFlexGrid1.InitConfig(

new string[]{

"striped=true",//是否顯示行交替色

"selectedonclick=true",//是否點擊行自動選中checkbox

"usepager=true",//使用分頁器

"showcheckbox=true",//顯示覆選框

"height=200",//高度，可爲auto或具體px值

"width=600"//寬度，可爲auto或具體px值

},

new dotNetFlexGrid.FieldConfig[]{

new dotNetFlexGrid.FieldConfig("Guid","編號",60,true,dotNetFlexGrid.FieldConfigAlign.Left),

new dotNetFlexGrid.FieldConfig("String1","用戶名",120,true,dotNetFlexGrid.FieldConfigAlign.Right),

new dotNetFlexGrid.FieldConfig("String2","地址",60,true,dotNetFlexGrid.FieldConfigAlign.Left),

new dotNetFlexGrid.FieldConfig("String3","建立時間",60,true,dotNetFlexGrid.FieldConfigAlign.Left)

}

 

);

//this.dotNetFlexGrid1.DataHandler = new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

dotNetFlexGrid1.InitConfig方法提供初始化表格主控參數、列配置的功能，例子中，咱們設定表格寬600px，高200px，並綁定 "編號""用戶名""地址""建立時間"四個字段，自此，其實咱們的Grid已經可使用了，瀏覽該頁面，咱們看到了以下界面：

很簡單，不是嗎；咱們看到了一個最簡單的空表格，仔細看看，如此簡單的表格其實擁有了以下強大的功能：

• 您能夠點擊其中一列將其拖放到合適的位置上（固然僅限表頭）。
• 您能夠將鼠標移動到列的分割線上，左右拖動來調整列寬。
• 你能夠將鼠標移動到表頭的列的分割線左邊，點擊出現的按鈕來選擇須要顯示和隱藏的列。
• 您能夠在表格的最左邊和最下邊拖動表格的大小。
• 在表頭移動鼠標，你會發現字段排序的指示（雖然如今沒用：-）後面咱們將用到它）。
• 顯示了內置的分頁器和刷新按鈕，固然，如今是無用的。

接下來，咱們爲表格填充數據，從新轉到Page_Load中，咱們增長一行，並在頁面中增長一個提供數據的方法。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Page_Load中

this.dotNetFlexGrid1.DataHandler = new dotNetFlexGrid.DataHandlerDelegate(DotNetFlexGrid1DataHandler); //提供數據的方法

新增方法

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p)

{

dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult();

result.page = p.page;//設定當前返回的頁號

result.total = 100;//總計的數據條數，此處用100進行模擬

result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//調用演示的數據生成函數產生模擬數據

return result;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

DotNetFlexGrid1DataHandler方法接收一個類型爲dotNetFlexGrid.DataHandlerParams的參數，該參數提供控件的動做所產生的全部參數，如p.page(當前請求的頁號)、p.rp(當前請求所但願返回的行數)等等，實際上，該參數包含衆多的屬性，具體請查看控件說明文檔中的詳細描述。

DotNetFlexGrid1DataHandler方法須要返回一個類型爲dotNetFlexGrid.DataHandlerResult的對象，該對象必須提供屬性page(當前返回的頁號)、屬性total（總共的數據條數）、屬性table(包含數據的DataTable)。

在這裏，咱們模擬爲Grid提供數據，咱們使用控件內置的DemoMemoryTable()產生一個虛擬的DataTable,實際應用中，您須要根據您的需求構建儲存數據的DataTable。

咱們再次瀏覽頁面，您會發現表格中填充了一些模擬的數據，同時分頁器、排序功能、刷新功能均能正常使用了。

其實，咱們會發現排序功能彷佛無效，表格刷新後但並無按照咱們預期的進行排序，實際上，與其餘控件不一樣，dotNetFlexGrid建議使用服務端排序，大多數需求中，咱們指望的排序功能是針對整個數據庫查詢的結果集進行排序，而大多數控件或JS 插件提供的僅僅是單頁的客戶端排序；既然這樣，咱們爲這個例子增長排序處理，請修改你的DotNetFlexGrid1DataHandler方法。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p)

{

dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult();

result.page = p.page;//設定當前返回的頁號

result.total = 100;//總計的數據條數，此處用100進行模擬

result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//調用演示的數據生成函數產生模擬數據

//若是傳遞的參數包含排序設置的話，經過DataView.Sort功能模擬進行當頁排序

if (p.sortname.Length > 0 && p.sortorder.Length > 0)

{

System.Data.DataView dv = result.table.DefaultView;

dv.Sort = (p.sortname + " " + p.sortorder);

result.table = dv.ToTable();

}

return result;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

好了，如今能夠排序了，同時請原諒我又偷懶了，咱們採用DataView.Sort功能模擬進行當前的數據集排序，實際上仍是單頁排序，但實際上，此處的數據處理邏輯是應該鏈接數據庫執行實際的查詢，排序是否應該交給數據庫？的確，分頁和排序是很廣泛的問題，咱們在dotNetFlexGrid的說明文檔中同時提供了一個通用的分頁、排序、查詢的存儲過程配套dotNetFlexGrid使用和參考，請你們自行下載。

最後，彷佛還不夠，通常咱們的表格都會根據用戶的條件更改查詢結果，咱們實現一個異步的查詢效果。

咱們在頁面上增長一個id爲"txtName"的文本框和id爲"btnSubmit"的按鈕以及一小段javascript，像下面這個樣子。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<script language="javascript">

function doSearch() {

var txt = document.getElementById("txtName").value;

if (txt) {

var extP = [{ name: "String1", value: txt}];

dotNetFlexGrid1.applyQueryReload(extP);

}

}

script>

<div>

<input id="txtName" type="text" /> <input id="btnSubmit" type="button" value="查詢" onclick="doSearch();"/>

div> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

更改下DotNetFlexGrid1DataHandler方法，讓其支持查詢。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

public dotNetFlexGrid.DataHandlerResult DotNetFlexGrid1DataHandler(dotNetFlexGrid.DataHandlerParams p)

{

dotNetFlexGrid.DataHandlerResult result = new dotNetFlexGrid.DataHandlerResult();

result.page = p.page;//設定當前返回的頁號

result.total = 100;//總計的數據條數，此處用100進行模擬

result.table = dotNetFlexGrid.DemoMemoryTable(p.page * 100, p.rp);//調用演示的數據生成函數產生模擬數據

//若是傳遞的參數包含排序設置的話，經過DataView.Sort功能模擬進行當頁排序

if (p.sortname.Length > 0 && p.sortorder.Length > 0)

{

System.Data.DataView dv = result.table.DefaultView;

dv.Sort = (p.sortname + " " + p.sortorder);

result.table = dv.ToTable();

}

//若是傳遞的參數包含附加參數的話，再來模擬查詢，原諒我真的很懶。

if (p.extParam.ContainsKey("String1"))

{

System.Data.DataView dv = result.table.DefaultView;

dv.RowFilter = "String1 Like '%" + p.extParam["String1"]+"%'";

result.table = dv.ToTable();

}

return result;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

咱們經過p.extParam獲取到Javascript送出的查詢數據（注意以前的js代碼中的賦值和刷新表格），而後進行查詢並返回結果集；其實，咱們經過這種方法，能夠很簡單的實現與其餘各種控件的聯動，甚至無數個dotNetFlexGrid。

Over，第一個例子到這裏了，總結下：

• 咱們須要直接將控件拖拽入頁面。
• 在頁面加載時調用InitConfig方法初始化Grid，咱們在這裏設置表格的寬、高、分頁器等參數，同時設置表格須要展現的字段。
• 爲Grid綁定一個類型爲dotNetFlexGrid.DataHandlerDelegate的數據提供方法，咱們在這個方法裏響應Grid的動做並返回合適的結果。
• 咱們還能夠經過簡單的js調用異步控制咱們的表格，例子中演示了異步查詢和刷新。

不知不覺，彷佛寫了不少，其實dotNetFlexGrid是很是易用的，3個簡單的步驟便可完成一個徹底異步的Grid，足以替換掉Asp.net自帶的GridView了。

下一次，咱們將演示快速查詢的功能以及2個表格的聯動功能，敬請期待。

BTW:本文的例子包含在整個演示項目中，不幸的是，演示項目的下載須要稍後提供，固然，看到此文的都是多年的ASP.NET老手，如此簡單的例子，相信不會給你們帶來過多的困惑。

本文華磊原創，dotNetFlexGrid for asp.net是華磊開源做品。不想再看到那種不署名的轉載。

評論: 38　查看評論　發表評論

程序員找工做，就在博客園

最新新聞：
· 大公司是如何走上開源之路的(2010-08-23 13:30)
· Firefox 4.0 Beta 4 RC 下載(2010-08-23 13:22)
· 盛大Bambook零售價999元 9月28日正式上市(2010-08-23 13:19)
· 周鴻禕：開心網該學Zynga而不是Facebook(2010-08-23 13:12)
· 蝶變Acorn：撬動英特爾與蘋果(2010-08-23 12:57)

編輯推薦：熱點新聞：騰訊收購康盛創想

網站導航：博客園首頁  我的主頁  新聞  閃存  小組  博問  社區  知識庫