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

做者: 華磊 發表於 2010-08-20 16:08 原文連接 閱讀: 972 評論: 10

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

• 修復快速查詢時的鍵盤迴車事件與控件外圍事件的衝突的問題。
• 修復快速查詢時設置正則表達式時可能致使的語法錯誤的問題。
• 數據提供方法 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" />fieldset>

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

咱們爲按鈕添加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進行相等查詢，不綁定正則表達式

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，咱們要在地址這一欄顯示一個能夠點擊的連接訪問谷歌進行查詢，再增長一列圖片，顯示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,"訪問[@String1]的地址"),

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

new dotNetFlexGrid.FieldConfig("DateTime","照片",60,true,dotNetFlexGrid.FieldConfigAlign.Left,false,false,true,"")

},

new dotNetFlexGrid.SerchParamConfig[]{

new dotNetFlexGrid.SerchParamConfig("用戶名","String1",true, dotNetFlexGrid.SerchParamConfigOperater.Eq,null),//經過String1進行相等查詢，不綁定正則表達式

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

},

null

);

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

InitConfig初始化時針對列配置增長了一個itemTemplate屬性，該屬性提供了當前列的展示模板設定，您能夠在該屬性中提供幾乎任何Html內容（固然，請保證不會破壞表格結構），使用簡單的模板語法"[@字段名]"來展示您所但願的格式，好比說：

    "

"

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

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

評論: 10　查看評論　發表評論

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

最新新聞：
· 大公司是如何走上開源之路的(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)

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

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