【新特性速递】向表格追加数据（AppendData）！

FineUIPro/Mvc/Core/JS的下个版本（v6.3.0），我们为表格增加AppendData方法，可以方便的向表格追加数据。

 

下面通过一个新增的示例（表格控件/分页/加载更多）来了解这个方法，页面显示效果如下图所示：

 

页面标签将表格（Grid）和【加载更多...】按钮通过一个面板（Panel）组合起来：

<f:Panel IsFluid="true" Title="面板" CssClass="blockpanel" runat="server" Height="350px" AutoScroll="true">
	<Items>
		<f:Grid ID="Grid1" EnableCollapse="false" ShowBorder="false" ShowHeader="false"
			runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Name" AttributeDataTag="0">
			<Columns>
				<f:RowNumberField />
				。。。
			</Columns>
		</f:Grid>
		<f:LinkButton runat="server" CssClass="morebutton" Text="加载更多..." ID="btnMore" OnClick="btnMore_Click"></f:LinkButton>
	</Items>
</f:Panel>

 

【加载更多...】按钮的点击事件：　

protected void btnMore_Click(object sender, EventArgs e)
{
	var pageIndex = Convert.ToInt32(Grid1.AttributeDataTag);
	pageIndex++;

	var pageCount = GetPageCount();
	if (pageIndex <= pageCount - 1)
	{
		// 追加数据
		Grid1.AppendData(GetPagedDataTable(pageIndex, PAGESIZE));

		Grid1.AttributeDataTag = pageIndex.ToString();
	}

	if (pageIndex == pageCount - 1)
	{
		btnMore.Enabled = false;
		btnMore.Text = "全部加载完毕";
	}
}

　

注意其中的 AppendData 方法，传入的参数是要附加的表格数据。这个示例中我们使用了分页数据，当然你可以自定义数据分隔方式，而不仅仅局限于分页的方式返回数据。

 

上面是 FineUIPro 的实现，下面我们看下 FineUICore 中的实现，代码是非常相似的。

FineUICore 中的页面标签：

<f:Panel IsFluid="true" Title="面板" CssClass="blockpanel" Height="350" AutoScroll="true">
	<Items>
		<f:Grid ID="Grid1" ShowBorder="false" ShowHeader="false" Title="表格" DataIDField="Id" DataTextField="Name" EnableCheckBoxSelect="true"
				DataSource="@ViewBag.Grid1DataSource">
			<Columns>
				<f:RowNumberField />
				。。。
			</Columns>
			<Attributes>
				<f:Attribute Key="data-index" Value="0"></f:Attribute>
			</Attributes>
		</f:Grid>
		<f:LinkButton CssClass="morebutton" Text="加载更多..." ID="btnMore" 
			OnClick="@Url.Handler("btnMore_Click")" 
			OnClickFields="Grid1" 
			OnClickParameter1="@(new Parameter("dataIndex", "F.ui.Grid1.getAttr('data-index')"))"></f:LinkButton>
	</Items>
</f:Panel>

按钮的点击事件处理函数：

public IActionResult OnPostBtnMore_Click(string[] Grid1_fields, int dataIndex)
{
	var grid1 = UIHelper.Grid("Grid1");
	var btnMore = UIHelper.LinkButton("btnMore");

	dataIndex++;

	var pageCount = DataSourceUtil.GetPageCount(PAGESIZE);
	if (dataIndex <= pageCount - 1)
	{
		var dataSource = DataSourceUtil.GetPagedDataTable(pageIndex: dataIndex, pageSize: PAGESIZE);
		grid1.AppendData(dataSource, Grid1_fields); // 追加数据

		grid1.Attribute("data-index", dataIndex.ToString());
	}

	if (dataIndex == pageCount - 1)
	{
		btnMore.Enabled(false);
		btnMore.Text("全部加载完毕");
	}
	return UIHelper.Result();
}

　　

=======================

上面的例子有个瑕疵，那就是加载更多数据时，表格的标题栏不见了。

 

为此，我们还会新增另外一个示例，使用简单的自定义JS和CSS代码，让表格的标题栏始终可见，来看下显示效果：

 

=======================

除此之外，DataList也支持类似的 AppendData 方法，如下图所示：

 

　　

注：FineUICore v6.3.0 计划在 2020年5月中旬 发布，敬请期待！