You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在ASP.NET GridView中从后台代码实现行列显示相同数据?

在ASP.NET GridView中通过后台代码实现行列同显相同数据

嘿,针对你要在ASP.NET GridView里让相同数据同时在行和列展示的需求,我给你整理了几种实用的实现方案,都是用后台CodeBehind来搞定的:

方案一:简单列重复行数据(直接构造重复数据源)

这种适合你需要让某几列直接重复显示对应行的数据的场景,比如让“重复ID”列和“ID”列内容完全一致。

后台CodeBehind代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 构造包含重复字段的数据源
        DataTable dt = new DataTable();
        // 添加基础列
        dt.Columns.Add("ID", typeof(string));
        dt.Columns.Add("UserName", typeof(string));
        // 添加重复列,用来展示和基础列相同的数据
        dt.Columns.Add("DuplicateID", typeof(string));
        dt.Columns.Add("DuplicateUserName", typeof(string));

        // 填充数据,让重复列和基础列内容一致
        dt.Rows.Add("1", "张三", "1", "张三");
        dt.Rows.Add("2", "李四", "2", "李四");
        dt.Rows.Add("3", "王五", "3", "王五");

        // 绑定到GridView
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

前端GridView配置

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="用户ID" />
        <asp:BoundField DataField="UserName" HeaderText="用户名" />
        <asp:BoundField DataField="DuplicateID" HeaderText="重复ID" />
        <asp:BoundField DataField="DuplicateUserName" HeaderText="重复用户名" />
    </Columns>
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

方案二:通过RowDataBound事件动态赋值(更灵活)

如果不想在数据源里硬加重复列,可以利用GridView的RowDataBound事件,在每行绑定的时候动态设置指定单元格的内容,让它和当前行的某个字段一致。

后台CodeBehind代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID", typeof(string));
        dt.Columns.Add("UserName", typeof(string));

        dt.Rows.Add("1", "张三");
        dt.Rows.Add("2", "李四");
        dt.Rows.Add("3", "王五");

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

// GridView行绑定事件
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // 只处理数据行,跳过表头、页脚
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // 获取当前行的数据项
        DataRowView rowData = (DataRowView)e.Row.DataItem;
        
        // 给第三列(索引2)设置和第一列(索引0)相同的内容
        e.Row.Cells[2].Text = rowData["ID"].ToString();
        // 给第四列(索引3)设置和第二列(索引1)相同的内容
        e.Row.Cells[3].Text = rowData["UserName"].ToString();
    }
}

前端GridView配置

注意要加上OnRowDataBound事件绑定:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333" GridLines="None">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="用户ID" />
        <asp:BoundField DataField="UserName" HeaderText="用户名" />
        <asp:BoundField HeaderText="重复ID" />
        <asp:BoundField HeaderText="重复用户名" />
    </Columns>
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

方案三:交叉表式行列同维度展示(进阶)

如果你的需求是类似交叉表,比如行和列都是同一个维度(比如用户),单元格展示对应的数据(比如共同的类别、评分等),可以通过动态构建交叉表数据源来实现。

后台CodeBehind代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 原始业务数据:用户-类别-评分
        DataTable originalDt = new DataTable();
        originalDt.Columns.Add("UserName");
        originalDt.Columns.Add("Category");
        originalDt.Columns.Add("Score");
        originalDt.Rows.Add("张三", "数学", 90);
        originalDt.Rows.Add("张三", "语文", 85);
        originalDt.Rows.Add("李四", "数学", 88);
        originalDt.Rows.Add("李四", "语文", 92);
        originalDt.Rows.Add("王五", "数学", 95);
        originalDt.Rows.Add("王五", "语文", 88);

        // 构造交叉表数据源:行是用户,列也是用户,单元格显示两人的相同类别(或其他逻辑)
        DataTable crossDt = new DataTable();
        // 获取所有不重复的用户,作为列名
        var allUsers = originalDt.AsEnumerable().Select(r => r["UserName"].ToString()).Distinct().ToList();
        
        // 添加行维度的用户列
        crossDt.Columns.Add("用户");
        // 添加每个用户作为列
        foreach (var user in allUsers)
        {
            crossDt.Columns.Add(user);
        }

        // 填充交叉表数据
        foreach (var rowUser in allUsers)
        {
            DataRow newRow = crossDt.NewRow();
            newRow["用户"] = rowUser;
            
            foreach (var colUser in allUsers)
            {
                // 这里实现逻辑:获取两个用户的共同类别(如果有多个可以用逗号分隔)
                var userCategories = originalDt.AsEnumerable().Where(r => r["UserName"].ToString() == rowUser).Select(r => r["Category"].ToString()).ToList();
                var colCategories = originalDt.AsEnumerable().Where(r => r["UserName"].ToString() == colUser).Select(r => r["Category"].ToString()).ToList();
                var commonCategories = userCategories.Intersect(colCategories);
                
                newRow[colUser] = commonCategories.Any() ? string.Join(",", commonCategories) : "无";
            }
            
            crossDt.Rows.Add(newRow);
        }

        // 绑定到GridView
        GridView1.DataSource = crossDt;
        GridView1.DataBind();
    }
}

前端GridView配置

这里直接用自动生成列更方便:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" CellPadding="4" ForeColor="#333333" GridLines="None">
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

以上几种方案可以根据你的实际需求选择,如果你有更具体的展示逻辑,可以调整数据源构造或者RowDataBound里的赋值逻辑~

内容的提问来源于stack exchange,提问作者Abhishek Yadav

火山引擎 最新活动