在FineUI的官方示例中有类似的实现。示例中实现了动态增加列，但有时我们可能需要动态修改列。先来看效果图
下面是代码实现
DynamicGrid.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicGrid.aspx.cs" Inherits="FineUITest.DynamicGrid" %>
<%@ Register Assembly="FineUI" Namespace="FineUI" TagPrefix="f" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="GridDemo" />
<f:Grid runat="server" ID="GridDemo" Title="动态增加列及修改列标题示例">
<Toolbars>
<f:Toolbar runat="server">
<Items>
<f:Button runat="server" ID="btnAdd" Text="增加列" OnClick="btnAdd_Click"></f:Button>
<f:Button runat="server" ID="btnEdit" Text="修改列" OnClick="btnEdit_Click"></f:Button>
</Items>
</f:Toolbar>
</Toolbars>
</f:Grid>
<f:Window runat="server" ID="WindowEdit" Hidden="true" IsModal="true" Title="修改列名" Width="300" Height="200">
<Toolbars>
<f:Toolbar runat="server">
<Items>
<f:Button runat="server" ID="btnOK" Text="确定" OnClick="btnOK_Click"></f:Button>
<f:Button runat="server" ID="btnCancel" Text="取消" OnClick="btnCancel_Click"></f:Button>
</Items>
</f:Toolbar>
</Toolbars>
<Items>
<f:DropDownList runat="server" ID="DropDownListHeaders" Label="原列名" ShowLabel="true"></f:DropDownList>
<f:TextBox runat="server" ID="TextBoxNewHeader" Label="新列名"></f:TextBox>
</Items>
</f:Window>
</form>
</body>
</html>
DynamicGrid.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using FineUI;
namespace FineUITest
{
public partial class DynamicGrid : System.Web.UI.Page
{
private const string GRID_COLUMN_HEADER = "GRID_COLUMN_HEADER";
private const string UPDATE_HEADER = "UPDATE_HEADER";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
InitLoad();
}
}
private void InitLoad()
{
if (!NeedUpdateHeader())
{
Session.Remove(GRID_COLUMN_HEADER);
return;
}
List<String> headers = Session[GRID_COLUMN_HEADER] as List<String>;
if (headers == null)
{
return;
}
FineUI.BoundField bf = null;
foreach (String header in headers)
{
bf = new FineUI.BoundField();
bf.HeaderText = header;
bf.DataFormatString = "{0}";
GridDemo.Columns.Add(bf);
}
}
private bool NeedUpdateHeader()
{
if (Request == null)
{
return false;
}
String updateHeader = Request.QueryString[UPDATE_HEADER];
if (String.IsNullOrWhiteSpace(updateHeader) || updateHeader.ToUpper().Equals("FALSE"))
{
return false;
}
return true;
}
protected void btnAdd_Click(object sender, EventArgs e)
{
List<String> headers = Session[GRID_COLUMN_HEADER] as List<String>;
if (headers == null)
{
headers = new List<String>();
}
String header = "列" + headers.Count.ToString();
headers.Add(header);
Session[GRID_COLUMN_HEADER] = headers;
PageContext.Redirect(FetchRefreshUrl());
}
private String FetchRefreshUrl()
{
String url = "DynamicGrid.aspx";
url += "?" + UPDATE_HEADER + "=TRUE";
return url;
}
protected void btnEdit_Click(object sender, EventArgs e)
{
List<String> headers = Session[GRID_COLUMN_HEADER] as List<String>;
if (headers == null || headers.Count <= 0)
{
Alert.Show("暂无可供修改的列");
return;
}
WindowEdit.Hidden = false;
DropDownListHeaders.DataSource = headers;
DropDownListHeaders.DataBind();
DropDownListHeaders.SelectedIndex = 0;
}
protected void btnOK_Click(object sender, EventArgs e)
{
List<String> headers = Session[GRID_COLUMN_HEADER] as List<String>;
if (headers == null || headers.Count <= 0)
{
Alert.Show("暂无可供修改的列");
return;
}
if (String.IsNullOrWhiteSpace(TextBoxNewHeader.Text))
{
Alert.Show("请输入新列名");
return;
}
int index = DropDownListHeaders.SelectedIndex;
headers[index] = TextBoxNewHeader.Text;
Session[GRID_COLUMN_HEADER] = headers;
PageContext.RegisterStartupScript(ActiveWindow.GetHideReference());
PageContext.Redirect(FetchRefreshUrl());
}
protected void btnCancel_Click(object sender, EventArgs e)
{
PageContext.RegisterStartupScript(ActiveWindow.GetHideReference());
}
}
}
说明：
1.从官方示例中可知，动态列的创建是在Page_Load或者Page_Init中完成的。为了触发这一事件，我们通过重定向Redirect来实现。
2.创建及修改的列名称存在Session中。
3.对于表格的中数据也可采用类似的方式实现，不过由于Session不能存太多的数据，所以数据量大时必须作相应的处理。比如借助数据库。
4.不论后台如何处理，在前端上呈现的都只能是html和js的代码。所以后端修改了界面后，是必须要刷新界面才能上去的。只是有的采用了直接刷新，有的采用了异步AJAX刷新。所以我们这里修改界面的标题，采用重定向刷新界面的方式来实现。
转载请注明出处http://blog.csdn.net/xxdddail/article/details/36378549
FineUI之动态增加列及修改列的实现
时间： 2024-10-01 07:45:13