JQuery FlexiGrid的asp.net完美解決方案-dotNetFlexGrid使用指南(二）服務端查詢、快速查詢和Html模板

1. 開始之前，看下最新的v1.2版本有些什麼

• 修複快速查詢時的鍵盤迴車事件與控制項外圍事件的衝突的問題。
• 修複快速查詢時設定Regex時可能導致的語法錯誤的問題。
• 資料提供方法DataHandler將不再強制要求與列的綁定順序一致，現在通過返回的DataTable中的ColumnName自動綁定到合適的列，所以，請保證您的DataTable和控制項中的列名一致（區分大小寫）。
• 增加展現模板的功能，現InitConfig初始化時針對列配置增加了一個itemTemplate屬性，該屬性提供了當前列的展現模板設定。
• 示範項目中FirstGrid.aspx增加了用戶端重新整理、服務端重新整理和快速查詢功能的示範。
• 示範項目中TestTemplate.aspx提供了使用展現模板的示範。

  最主要的，通過template，可以隨意定製每個格子的展現內容，比如說在表格中顯示文字框、選項按鈕、圖片等，相信很多朋友會感興趣吧。

• 快速查詢和服務端查詢還有Template

我們繼續開始，這一次我們完善我們的FirstGrid，為其添加服務端查詢的效果和快速查詢。

 

一般而言，.net程式員更善於在介面中設定一個資料的篩選條件，然後通過PostBack在後台產生資料集並展示，上一章節我們示範了如何進行用戶端的查詢，這裡，我們迴歸傳統，使用服務端查詢來實現篩選功能。

最簡單的，我們為頁面添加一個TextBox和Button，像下面這樣：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="服務端查詢示範" OnClick="Button1_Click" />

我們為按鈕添加OnClick事件Button1_Click，完善事件代碼和dotNetFlexGrid資料提供方法：

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

protected void Button1_Click(object sender, EventArgs e)

{

dotNetFlexGrid1.DefaultSearch.Add("String1", TextBox1.Text);//使用String1這個欄位進行查詢

}

DotNetFlexGrid1DataHandler中新增的代碼：

//處理預設查詢，即Button1_Click中指定的DefaultSearch查詢參數

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

{

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

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

result.table = dv.ToTable();

}

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

為什麼不在Button1_Click執行查詢操作呢，大家回顧下，我們的控制項實際上是一個全非同步（Ajax）工作方式，實際上我們也希望資料的更新能夠最小化，最輕量級；與知名的AjaxPro一樣，我們在非同步請求時完全沒有執行個體化整個頁面，而僅僅針對資料提供方法DataHandler進行調用，這樣迴避了Asp.net Form的大量的模型構建的邏輯，只是需要返回表格式資料而已；這樣做，導致了一個問題，如何給DataHandler提供參數；我們通過defaultSearch和extParam來解決它。

這裡例子中，我們在按鈕點擊時提供了一個名為String1的DefaultSearch，在DataHandler中檢測這個參數並執行合適的查詢；如之前一樣，還是用DataView進行類比，實際應用中，您需要根據您的需求執行資料查詢的操作。

好了，服務端查詢每次都會重新整理頁面重新載入資料，而用戶端查詢則不需要這樣。

 

我們在應用情境中，一般會提供一個資料的範圍篩選，您可以使用上述的方法實現，有時候還會在上述的篩選範圍內進行快速的定位或再一次篩選，比如說我們提供日期範圍篩選資料，然後提供在這個範圍內定位某一個地址的需求。

dotNetGrid提供了繼承自Jquery FlexiGrid的快速查詢的功能，如下示範：

其實很簡單，重新找到您的初始化表格InitConfig的代碼，改成下面這樣

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

this.dotNetFlexGrid1.InitConfig(

new string[]{

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

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

"showcheckbox=false",//顯示複選框

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

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

},

new dotNetFlexGrid.FieldConfig[]{

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

new dotNetFlexGrid.FieldConfig("String1","使用者名稱",180,true,dotNetFlexGrid.FieldConfigAlign.Right),

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

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

},

new dotNetFlexGrid.SerchParamConfig[]{

new dotNetFlexGrid.SerchParamConfig("使用者名稱","String1",true, dotNetFlexGrid.SerchParamConfigOperater.Eq,null),//通過String1進行相等查詢，不綁定Regex

new dotNetFlexGrid.SerchParamConfig("地址","String2",false, dotNetFlexGrid.SerchParamConfigOperater.Like,@"^[\d]+$")//通過String2進行近似查詢，綁定必須輸入數字

},

null

);

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

我們在InitConfig使用了第三個參數serchParam，指定了顯示名為"使用者名稱"，綁定欄位String1的相等查詢和顯示名為"地址"，綁定欄位為String2的近似查詢，同時，為地址的查詢約束為只能輸入數字。

再次瀏覽頁面，介面正確的展示了查詢面板，輸入資料並斷行符號，表格展現了重新整理動畫，但實際並沒有資料的變化。

很簡單，我們再為資料提供方法DataHandler增加快速查詢的處理。

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

DotNetFlexGrid1DataHandler中新增的代碼：

//如果傳遞的參數包含快速查詢參數，則進行快速查詢

if (p.qop != dotNetFlexGrid.SerchParamConfigOperater.None && p.qtype.Length > 0 && p.query.Length > 0)

{

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

if(p.qop== dotNetFlexGrid.SerchParamConfigOperater.Like)

dv.RowFilter = p.qtype+ " Like '%" + p.query + "%'";

else

dv.RowFilter = p.qtype + " = '" + p.query + "'";

result.table = dv.ToTable();

}

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

現在正常了，查詢後顯示了我們期望的資料；這裡p.qop提供快速查詢的操作符（等於還是近似），p.qtype提供了查詢的欄位，即之前初始化時的綁定欄位，p.query提供了使用者輸入的條件。

 

最後，FirstGrid.aspx這個例子增加1.2版新增的功能Template，我們要在地址這一欄顯示一個可以點擊的連結訪問Google進行查詢，再增加一列圖片，顯示cnblogs的logo。

同樣很簡單，找到初始化表格的代碼，新增一個圖片列和增加template的設定。

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

this.dotNetFlexGrid1.InitConfig(

new string[]{

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

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

"showcheckbox=false",//顯示複選框

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

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

},

new dotNetFlexGrid.FieldConfig[]{

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

new dotNetFlexGrid.FieldConfig("String1","使用者名稱",180,true,dotNetFlexGrid.FieldConfigAlign.Right),

new dotNetFlexGrid.FieldConfig("String2","地址",180,true,dotNetFlexGrid.FieldConfigAlign.Left,false,false,true,"<a href='http://www.google.com.hk/search?q=[@String2]'>訪問[@String1]的地址</a>"),

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

new dotNetFlexGrid.FieldConfig("DateTime","照片",60,true,dotNetFlexGrid.FieldConfigAlign.Left,false,false,true,"<img src='http://images.cnblogs.com/logo_small.gif'/>")

},

new dotNetFlexGrid.SerchParamConfig[]{

new dotNetFlexGrid.SerchParamConfig("使用者名稱","String1",true, dotNetFlexGrid.SerchParamConfigOperater.Eq,null),//通過String1進行相等查詢，不綁定Regex

new dotNetFlexGrid.SerchParamConfig("地址","String2",false, dotNetFlexGrid.SerchParamConfigOperater.Like,@"^[\d]+$")//通過String2進行近似查詢，綁定必須輸入數字

},

null

);

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

InitConfig初始化時針對列配置增加了一個itemTemplate屬性，該屬性提供了當前列的展現模板設定，您可以在該屬性中提供幾乎任何Html內容（當然，請保證不會破壞表格結構），使用簡單的模板文法"[@欄位名]"來展現您所希望的格式，比如說：

    "<input id=' [@Guid]' type='text' value='[@String1]' />"

上述文法將在指定的列展現一個以該行的Guid欄位的值給出的Id的文字框，該文字框將展示String1欄位的值。

這個FirstGrid.aspx就到這裡了，最新的 dotnetFlexGrid 1.2請訪問http://dotnetflexgrid.codeplex.com/ 下載，同時也請多多訪問我的blog "http://www.cnblogs.com/hualei"提些寶貴的建議。