如何在ASP.NET DataGrid View中实现单元格多色文本效果

完全可以实现该效果，无需第三方控件，核心逻辑是在数据绑定行的渲染阶段，按状态标识拆分文本，给对应状态片段加上内联颜色样式即可，具体实现步骤如下：

核心实现原理 #

ASP.NET DataGrid 支持在单元格内输出原生HTML内容，只要关闭对应列的HTML自动编码，就可以通过给不同文本片段包裹带颜色样式的<span>标签，实现同个单元格内多色文本的效果。

具体实现步骤 #

• 首先定义状态标识与颜色的映射规则，和需求完全对应：
  • AV：绿色
  • DP：橙色
  • ER：黄色（业务系统建议用暗调金菊黄避免白背景下看不清，可按需调整为纯黄色）
  • ON：红色
• 给DataGrid绑定ItemDataBound事件（对应GridView的RowDataBound事件，逻辑完全一致），在数据行绑定完成时处理单元格内容。
• 注意关闭状态列的HTML编码属性，否则渲染时标签会被转义为普通文本，无法生效。

代码示例 #

1. 前台控件配置（.aspx页面） #

<asp:DataGrid ID="UnitDataGrid" runat="server" AutoGenerateColumns="false" OnItemDataBound="UnitDataGrid_ItemDataBound">
    <Columns>
        <asp:BoundColumn DataField="UnitId" HeaderText="单元编号" />
        <asp:BoundColumn DataField="UnitName" HeaderText="单元名称" />
        <!-- 状态列必须设置HtmlEncode="false" -->
        <asp:BoundColumn DataField="StatusText" HeaderText="单元状态" HtmlEncode="false" />
    </Columns>
</asp:DataGrid>

2. 后台事件处理代码（.aspx.cs） #

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Web.UI.WebControls;

public partial class UnitList : System.Web.UI.Page
{
    // 预定义状态-颜色映射
    private readonly Dictionary<string, string> _statusColorMapping = new Dictionary<string, string>
    {
        {"AV", "green"},
        {"DP", "orange"},
        {"ER", "goldenrod"}, // 替换为"yellow"即可使用纯黄色
        {"ON", "red"}
    };

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // 这里替换成你自己的数据源绑定逻辑
            UnitDataGrid.DataSource = GetUnitStatusData();
            UnitDataGrid.DataBind();
        }
    }

    protected void UnitDataGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
    {
        // 仅处理普通数据行、交替数据行，跳过表头、脚注、分页行
        if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem)
            return;

        // 状态列在第3列，索引从0开始，根据你实际的列顺序调整索引值
        TableCell statusCell = e.Item.Cells[2];
        string originalText = statusCell.Text;
        if (string.IsNullOrWhiteSpace(originalText)) return;

        // 逐状态匹配，给匹配到的状态词包裹带颜色的span标签
        foreach (var status in _statusColorMapping.Keys)
        {
            string coloredTag = $"<span style=\"color:{_statusColorMapping[status]};font-weight:500;\">{status}</span>";
            // 全字匹配，避免误替换包含状态字符的其他文本；如果你的状态固定跟在--后，可把正则改为@$"--{status}\b"
            originalText = Regex.Replace(originalText, $@"\b{status}\b", coloredTag, RegexOptions.IgnoreCase);
        }

        // 将处理后的带样式文本写回单元格
        statusCell.Text = originalText;
    }

    // 模拟数据源方法，替换为你实际的数据查询逻辑即可
    private object GetUnitStatusData()
    {
        return new[]
        {
            new { UnitId = 1, UnitName = "一号机组", StatusText = "Unit1--DP" },
            new { UnitId = 2, UnitName = "二号机组", StatusText = "Unit2--ER" },
            new { UnitId = 3, UnitName = "三号机组", StatusText = "Unit3--ON" },
            new { UnitId = 4, UnitName = "四号机组", StatusText = "Unit4--AV" }
        };
    }
}

常见问题说明 #

• 如果使用模板列（TemplateColumn）承载状态内容，直接在模板内放置<asp:Literal>控件，将控件的Mode属性设为PassThrough，再把处理后的HTML赋值给Literal的Text属性即可，不需要额外设置列的HtmlEncode属性。
• 如果同个单元格包含多个状态值（比如Unit1--DP, Unit2--ER），上述替换逻辑可以自动给所有匹配到的状态分别上色，不需要额外修改。
• 如果不需要给状态词加粗，删掉span样式里的font-weight:500;即可。

内容的提问来源于stack exchange，提问作者Nate Hastings