随笔- 445 文章- 0 评论- 5832 阅读- 270万

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

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是通过页面模型类传入的，当然你也可以直接在视图上定义，类似如下代码：

1	`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：

1	`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();
}