【新特性速遞】表格多列排序（SortingMulti）

三生石上(FineUI控制元件)發表於2020-09-10
排序

FineUIPro/Mvc/Core的下個版本（v7.0.0），我們會支援表格的多列排序（SortingMulti）。

 

為了相容之前的單列排序（SortField和SortDirection），我們新增了一個SortFieldArray屬性，用來指定當前多列排序的排序狀態。

下面透過一個具體示例來描述：

一個支援多列排序的表格，初始排序狀態如下所示：

  1. 入學年份：降序
  2. 姓名：升序

表格標籤定義：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" Title="表格" EnableCollapse="false"
	AllowSorting="true" OnSort="Grid1_Sort" SortingCancel="true" SortingToolTip="true" 
	SortingMulti="true" SortFieldArray="EntranceYear,DESC,Gender,ASC"
	runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Name,AtSchool">
	<Columns>
		......
	</Columns>
</f:Grid>

多列排序是由如下兩個屬性開啟的：

  • SortingMulti="true"
  • SortFieldArray="EntranceYear,DESC,Gender,ASC"

這裡可以看到 SortFieldArray 的資料格式，為了操作方便，我們將它定義為一維陣列，每一個排序欄位後面緊跟排序方向：

SortFieldArray = [field1, direction1, field2, direction2, field3, direction3...]

 

初始頁面顯示效果：

【新特性速遞】表格多列排序（SortingMulti）

後臺處理邏輯：

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		BindGrid();
	}
}

private void BindGrid()
{
	string[] sortFields = Grid1.SortFieldArray;

	DataTable table = DataSourceUtil.GetDataTable();

	// 多列排序
	if (sortFields.Length > 0)
	{
		List<string> sortItems = new List<string>();
		for (var i = 0; i < sortFields.Length; i += 2)
		{
			sortItems.Add(String.Format("{0} {1}", sortFields[i], sortFields[i + 1]));
		}
		DataView view1 = table.DefaultView;
		view1.Sort = String.Join(",", sortItems);
		Grid1.DataSource = view1;
	}
	else
	{
		Grid1.DataSource = table;
	}

	Grid1.DataBind();
}

上述程式碼主要是對Grid1.SortFieldArray的邏輯判斷，如果Grid1.SortFieldArray==null，則表示當前沒有列處於排序狀態。

如果Grid1.SortFieldArray.Length>0，則表示有一列或者多列處於排序狀態，我們透過一個迴圈來處理所有情況：

for (var i = 0; i < Grid1.SortFieldArray.Length; i += 2)
{
	string field = Grid1.SortFieldArray[i];
	string direction = Grid1.SortFieldArray[i+1];
	//...
}

　　

多列排序事件會複用前面的程式碼邏輯：

protected void Grid1_Sort(object sender, GridSortEventArgs e)
{
	BindGrid();
}

　　

下面看下多列排序的動圖：

【新特性速遞】表格多列排序（SortingMulti）　　

 

 

 

################################################################################

上面以FineUIPro為例進行的說明，那麼在FineUIMvc和FineUICore中程式碼怎麼呢？

其實非常類似，真的很像，我們以FineUICore（RazorPages&TagHelpers）為例，來簡單看下：

頁面標籤簡單一模一樣：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" ShowBorder="true" ShowHeader="true" Title="Grid" 
	EnableCheckBoxSelect="true" DataIDField="Id" DataTextField="Name" 
    AllowSorting="true" SortingToolTip="true" SortingCancel="true" SortingMulti="true" SortFieldArray="@ViewBag.Grid1SortFields"
	OnSort="@Url.Handler("Grid1_Sort")" OnSortFields="Grid1" DataSource="@ViewBag.Grid1DataSource">
	<Columns>
		......
	</Columns>
</f:Grid>

注意：SortFieldArray是透過頁面模型類傳入的，當然你也可以直接在檢視上定義，類似如下程式碼：

SortFieldArray="@(new string[] { "EntranceYear", "DESC", "Gender", "ASC" })"

這可是純正的C#語法，一點都不含糊的！

 

既然如此，為什麼要在頁面模型類中定義呢？看下後臺程式碼就明白了：

public void OnGet()
{
	LoadData();
}

private void LoadData()
{
	string[] sortFields = new string[] { "EntranceYear", "DESC", "Gender", "ASC" };

	ViewBag.Grid1DataSource = GetSortedDataTable(sortFields);

	ViewBag.Grid1SortFields = sortFields;
}

private DataTable GetSortedDataTable(string[] sortFields)
{
	DataTable table = DataSourceUtil.GetDataTable();

	// 多列排序
	if (sortFields != null && sortFields.Length > 0)
	{
		List<string> sortItems = new List<string>();
		for (var i = 0; i < sortFields.Length; i += 2)
		{
			sortItems.Add(String.Format("{0} {1}", sortFields[i], sortFields[i + 1]));
		}

		DataView view1 = table.DefaultView;
		view1.Sort = String.Join(",", sortItems);

		return view1.ToTable();
	}
	else
	{
		return table;
	}
}

我們透過C#程式碼在頁面模型類中定義sortFields：

string[] sortFields = new string[] { "EntranceYear", "DESC", "Gender", "ASC" };

其實有兩個用途：

  • GetSortedDataTable(sortFields)：根據多列排序欄位查詢資料　　
  • ViewBag.Grid1SortFields = sortFields：傳入檢視，賦值給表格屬性SortFieldArray

 

排序事件處理就簡單多了，可以重用上面的程式碼邏輯：

public IActionResult OnPostGrid1_Sort(string[] Grid1_fields, string[] Grid1_sortFields)
{
	// 更新表格資料來源
	UIHelper.Grid("Grid1").DataSource(GetSortedDataTable(Grid1_sortFields), Grid1_fields);


	return UIHelper.Result();
}

　　

需要注意的一點，對sortFields進行處理時，要進行null判斷。因為FineUIMvc/Core中，如果表格未排序，則傳入的Grid1_sortFields引數為空（null）。　　

　　

 

歡迎入夥：https://fineui.com/fans/

三石出品，必屬精品 

相關文章