【新特性速递】表格多列排序(SortingMulti)

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...]

 

初始页面显示效果:

后台处理逻辑:

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)。  

  

 

欢迎入伙:https://fineui.com/fans/

三石出品,必属精品 

posted @ 2020-09-10 09:48  三生石上(FineUI控件)  阅读(491)  评论(0编辑  收藏  举报