AJAX後台網站的最後一塊拼圖 Flexigrid (2)

2011-01-08

8542
0
jQuery

上一篇說到如何在Client端宣告flexigrid物件

以及如何修改程式讓flexigrid能把參數丟給ASP.NET的PageMethod

而這邊重點就擺在要ASP.NET要怎麼處理

=================================================================================================

四、Flexigrid會丟哪些參數到Server端

1. page - 定義的是第幾頁, 但要注意的是, SQL習慣從0開始當第一頁, flexigrid卻是由1開始當第一頁, 這要特別處理

2. rp - 定義的是一頁幾筆資料, 配合第幾頁可以實做出分頁的功能

3. qtype - 定義的是要查詢哪個欄位, (不一定有值)

4. query - 定義的是要查詢什麼值, (不一定有值) (配合這兩個參數可以實作出Where的功能, 例如說LIKE之類的篩選)

5. sortname - 定義的是要從哪個欄位排序

6. sortorder - 定義的是排序的方向是什麼

基本上有了這些屬性, 我們可以組合成一段結合了CTE分頁, WHERE模糊比對, 加上排序的SQL, 再丟進資料庫取出Table組成Entity

又或著要用LINQ, 還是Entity FrameWork都隨意, 總之就是取出對應的資料

(我都已經習慣將取出來的DataSet作自動物件化之後再操作, 因此範例幾乎不會有操作DataSet的內容, 請見諒)

=================================================================================================

五、PageMethod要怎麼接flexigrid丟過來的參數

	/// <param name="page">第幾頁, 由1開始</param>
/// <param name="rp">一頁幾筆</param>
/// <param name="qtype">要Where哪個欄位</param>
/// <param name="query">Where的值是什麼</param>
/// <param name="sortname">要排序哪個欄位</param>
/// <param name="sortorder">排序的方向是什麼</param>
[System.Web.Services.WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static FlexigridTable GetTable(int page, int rp, string qtype, string query, string sortname, string sortorder)
{
	FlexigridTable fd = new FlexigridTable();

	Student[] students = //balh balh,  總之就是利用那些參數組成sql取出查詢後的結果, 

	fd.page = page;
	fd.total = students.length;

	if (students != null && students.Length > 0)
	{
		foreach (Student item in students)
		{
			FlexigridRow newRow = new FlexigridRow();
			newRow.id = item.StudentId.ToString();

			List<string> cell = new List<string>();
			cell.Add(item.Name);
			cell.Add(item.Age.ToString());

			newRow.cell = cell;
			fd.rows.Add(newRow);
		}
	}
	return fd;
}

可以看到PageMethod大致長這樣

簡單說明就是, 使用傳入的參數找出對應的值之後,

放入依照Flexigrid預設的格式所建立的類別中,

再丟回Client端, Flexigrid自動就會把這些資料組合成一個動態Table了

=================================================================================================

六、Flexigrid看得懂什麼樣的格式

將剛才使用的FlexigridTable跟FlexigridRow格式列如下

	public class FlexigridTable
{
	public int page { get; set; }
	public int total { get; set; }
	private List<FlexigridRow> _rows = new List<FlexigridRow>();
	public List<FlexigridRow> rows
	{
		get { return _rows; }
		set { _rows = value; }
	}
}

public class FlexigridRow
{
    public FlexigridRow(int id)
    {
        this.id = id.ToString();
        cell = new List();
    }
    public FlexigridRow()
    {
        id = "-999";
        cell = new List();
    }

    public string id { get; set; }
    public List cell { get; set; }
}

可以看到屬性其實很單純

row要紀錄的就是他的id => 會被產生成 <tr id="id-{id}" />

以及string[], 這些string則會依照順序被放入td當中

而table要紀錄的則是

目前在第幾頁(page), 總共有幾筆資料(total) => 會被計算出來總共有幾頁現在在第幾頁, 並且秀在頁面上

以及這頁有幾行資料(List<FlexigridRow>)

=================================================================================================

七、常用的Function

最常用的應該是這兩個吧

	$.fn.flexReload = function(p) { // function to reload grid

		return this.each( function() {
				if (this.grid&&this.p.url) this.grid.populate();
			});

	}; //end flexReload

	$.fn.flexOptions = function(p) { //function to update general options

		return this.each( function() {
				if (this.grid) $.extend(this.p,p);
			});

	}; //end flexOptions

簡單解釋, 第一個是重新讀取Table資料, 使用方法像是$('#detailTable').flexReload();

第二個則是變更已經定義好的option, 使用方法像是$('#detailTable').flexOptions({ newp: 1, sortname: 'name' }).flexReload();

這段的意思是, 我變更回第一頁, 並且用name這個欄位重新排序, 接著讀取Table資料

也就是說, 不用受限於只有點欄位才能用那個欄位排序, 一樣可以用程式控制現在要用哪個欄位排序

要特別注意的是, 雖然PageMethod接到的是page

要用options換頁卻是要用newp, 這個很容易被忽略

=================================================================================================

經過這些步驟, 基本上就已經做出一個動態可以秀資料的Table

而當你的使用者發現他可以隨便點哪一個欄位都可以排序, 隨便哪個欄位都可以搜尋

而且速度快很多(都用AJAX), 它們會非常訝異的

之後要怎麼應用, 例如說新增, 修改, 刪除等

或著要怎麼把新的參數加進去, 又或著是怎麼利用分類select去再次進一步的篩選資料

有機會再分享進階的應用在這邊

而當用習慣之後, 就會自己再去寫一堆函式進去

像我自己就在寫了一個js class flexHelper

裡面就有一堆for Flexigrid的工具

例如說用id選擇tr

tr上下移動換位子

取得某個欄位的內容之類的小工具

若有人有興趣再做交流了

本文可能有理解錯誤或不盡不實的地方

請路過的前輩不要客氣用力打醒

這會是我們成長的主要養分

回首頁