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

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

 

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

 

页面标签将表格（Grid）和【加载更多...】按钮通过一个面板（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 中的页面标签：

	
		
			
				
				。。。
			
			
				
			
		
		
	

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

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月中旬 发布，敬请期待！