【新特性速遞】向表格追加數據（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月中旬 發布，敬請期待！