如何用HTML和C#实现带悬停提示的可排序DataTable多值单元格

1. 后端C#数据处理 #

首先定义基础数据模型：

public class NameValuePair
{
    public string Name { get; set; }
    public string Value { get; set; }
    // 若需按维度分组展示，可新增分组字段（如Category）
    public string Category { get; set; }
}

假设需要将同组的Name/Value聚合到单个单元格，以按Category分组为例，处理数据源：

// 模拟原始数据集合
var rawData = new List<NameValuePair>
{
    new NameValuePair { Category = "组1", Name = "名称A", Value = "值A详情说明" },
    new NameValuePair { Category = "组1", Name = "名称B", Value = "值B详情说明" },
    new NameValuePair { Category = "组2", Name = "名称C", Value = "值C详情说明" }
};

// 分组整合，将同分类下的Name/Value集合打包
var groupedData = rawData
    .GroupBy(x => x.Category)
    .Select(g => new 
    {
        Category = g.Key,
        NameValueList = g.Select(x => new { x.Name, x.Value }).ToList()
    })
    .ToList();

将groupedData传递至前端视图（如ASP.NET MVC/Razor Pages视图）即可。

2. 前端HTML + DataTables实现 #

先引入本地的DataTables依赖文件（避免外链）：

<link rel="stylesheet" type="text/css" href="datatables.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="datatables.min.js"></script>

在视图中渲染表格并初始化可排序功能：

<table id="sortableTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>分类</th>
            <th>名称集合</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.GroupedData)
        {
            <tr>
                <td>@item.Category</td>
                <td>
                    @foreach (var nv in item.NameValueList)
                    {
                        <!-- 利用原生title属性实现悬停提示，添加样式优化交互 -->
                        <span title="@nv.Value" style="margin-right: 10px; cursor: help; color: #0066cc;">@nv.Name</span>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
$(document).ready(function() {
    // 初始化DataTables，启用默认排序与分页
    $('#sortableTable').DataTable({
        "order": [[0, "asc"]],
        "paging": true
    });
});
</script>

3. Excel示例效果说明 #

如上图所示：单个单元格内包含多个名称值，鼠标悬停任意名称时，会弹出对应的Value详情提示，前端实现效果与该Excel示例完全匹配。

关键说明 #

• 悬停提示通过HTML原生title属性实现，无需额外插件
• DataTables自带排序功能会自动识别单元格文本内容排序，如需特殊排序规则可扩展其排序插件
• 若使用ASP.NET Core Razor Pages或MVC，需确保后端模型正确传递至视图层

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