首页 > 代码库 > FineUI之动态增加列及修改列的实现

FineUI之动态增加列及修改列的实现

2024-07-10 12:55:31   226人阅读

在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


联系
我们