FineUIPro/Mvc/Core的下個版本（v7.0.0），我們會支持表格的多列排序（SortingMulti）。
為了兼容之前的單列排序（SortField和SortDirection），我們新增了一個SortFieldArray屬性，用來指定當前多列排序的排序狀態。
下面通過一個具體示例來描述：
一個支持多列排序的表格，初始排序狀態如下所示：
- 入學年份：降序
- 姓名：升序
表格標簽定義：
<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...]
初始頁面顯示效果：
后台處理邏輯：
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();
}
下面看下多列排序的動圖：
################################################################################
上面以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）。
三石出品，必屬精品