【新特性速递】回发时改变表格标题栏和数据!

FineUIMvc/Core的下个版本(v6.3.0),我们会新增服务端动态配置表格标题栏特性(可在回发时改变表头和数据)。

 

先来看下示例的运行效果:

 

我们来看下这个示例的页面标签定义:

<f:DropDownList ID="DropDownList1" Label="切换表格" Width="500"
	OnSelectedIndexChanged="@Url.Handler("DropDownList1_SelectedIndexChanged")" 
	OnSelectedIndexChangedParameter1="@(new Parameter("selected", "this.getValue()"))">
	<Items>
		<f:ListItem Text="表格一(单选,行扩展列)" Value="table1" Selected="true"></f:ListItem>
		<f:ListItem Text="表格二(多选,多表头,全选列)" Value="table2"></f:ListItem>
	</Items>
</f:DropDownList>
<br>
<br>
<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" ShowBorder="true" ShowHeader="true" 
	Title="表格一(单选,行扩展列)" DataIDField="Id" DataTextField="Name" EnableMultiSelect="false"
	DataSource="@DataSourceUtil.GetDataTable()" Columns="@ViewBag.Grid1Columns">
</f:Grid>

 

这里的表格列 Columns 是在后台通过 C# 代码创建的。 

 

我们来看下切换表格的关键代码:

public IActionResult OnPostDropDownList1_SelectedIndexChanged(string selected)
{
	var Grid1 = UIHelper.Grid("Grid1");
	GridColumn[] columns;
	string title;
	DataTable dataSource;
	GridConfigOptions configOptions = new GridConfigOptions();

	if (selected == "table1")
	{
		title = "表格一(单选,行扩展列)";
		columns = CreateGrid1Columns().ToArray();
		dataSource = DataSourceUtil.GetDataTable();

		configOptions.DataIDField = "Id";
		configOptions.DataTextField = "Name";
		configOptions.EnableCheckBoxSelect = false;
		configOptions.EnableMultiSelect = false;
	}
	else
	{
		title = "表格二(多选,多表头,全选列)";
		columns = CreateGrid2Columns().ToArray();
		dataSource = GetDataTable2();

		configOptions.DataIDField = "Guid";
		configOptions.DataTextField = "Year";
		configOptions.EnableCheckBoxSelect = true;
		configOptions.EnableMultiSelect = true;
	}

	Grid1.Title(title);

	// 1. 先重新配置表头
	Grid1.ConfigColumns(columns, configOptions);

	// 2. 再绑定数据
	Grid1.DataSource(dataSource);


	return UIHelper.Result();
}

 

这里面有几点需要特别注意:

  • GridConfigOptions是我们新增的一个配置类,用来改变表格的一个关键属性,比如 DataIdField,EnableMultiSelect 等属性  
  • 通过 ConfigColumns 来设置新的表格列数组
  • 然后使用我们所熟知的 DataSource 方法来重新绑定数据

 

这个示例中,第二个表格是多表头的,我们来看下如何创建列数组:

private List<GridColumn> CreateGrid2Columns()
{
	List<GridColumn> columns = new List<GridColumn>();

	RenderField field = null;


	columns.Add(new RowNumberField());

	// 统计年份
	field = new RenderField();
	field.HeaderText = "统计年份";
	field.DataField = "Year";
	field.Width = 80;
	columns.Add(field);

	// 安徽省 - 合肥市
	GroupField groupFieldAnHui = new GroupField();
	groupFieldAnHui.HeaderText = "安徽省";
	groupFieldAnHui.TextAlign = TextAlign.Center;

	GroupField groupFieldHefei = new GroupField();
	groupFieldHefei.HeaderText = "合肥市";
	groupFieldHefei.TextAlign = TextAlign.Center;

	field = new RenderField();
	field.HeaderText = "数据一";
	field.DataField = "AHData1";
	field.Width = 100;
	groupFieldHefei.Columns.Add(field);

	field = new RenderField();
	field.HeaderText = "数据二";
	field.DataField = "AHData2";
	field.Width = 100;
	groupFieldHefei.Columns.Add(field);

	groupFieldAnHui.Columns.Add(groupFieldHefei);

	columns.Add(groupFieldAnHui);


	// 河南省 - 驻马店
	// .......


	return columns;
}

  

注:FineUICore v6.3.0 计划在 2020-05-15 发布,官网示例已更新。

https://pages.fineui.com/#/Grid/DynamicColumnsPostBack

 

 

注:由于 FineUIPro 需要在前后台维持控件数据,因为无法方便的在回发时动态调整控件,所以这个更新仅适用于 FineUIMvc 和 FineUICore 版本。

 

posted @ 2020-05-06 09:16  三生石上(FineUI控件)  阅读(...)  评论(...编辑  收藏