HTML表格实现类Excel列级下拉复选框筛选功能求助

问题背景 #

现有ASP.NET MVC视图中的库存数据表格已实现列内文本搜索，需要替换为Excel风格的列级下拉复选框筛选（列标题点击展开下拉列表，包含该列所有唯一值的复选框，勾选后仅显示匹配行）。

实现步骤（基于jQuery + DataTables） #

DataTables是成熟的表格插件，自带丰富扩展功能，能快速实现类似Excel的筛选效果，适合不熟悉原生JS/jQuery的开发者。

1. 引入依赖库 #

在视图的<head>中添加jQuery和DataTables的CDN资源（也可下载到本地引用）：

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>

2. 修改视图表格结构 #

移除原有的列内文本搜索框，简化表头并新增筛选行：

@using Company.Models
@model IList<VWStockListModel>

@{
    ViewBag.Title = "Active Stock List";
    Layout = "~/Views/Shared/LeftBarV1.cshtml";
}

<div class="row">
    <div class="col-12">
        <div class="card">             
            <div class="card-body">
                <table id="stockTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Warehouse Code</th>
                            <th>First Warehouse</th>
                            <th>Stock Name</th>
                            <th>Quality</th>
                            <th>Thickness</th>
                            <th>Width</th>
                            <th>Height</th>
                            <th>Tonnage</th>
                            <th>Ord Tonnage</th>
                            <th>Net Tonnage</th>
                            <th>Work Order Tonnage</th>
                            <th>Origin</th>
                            <th>Roll No</th>
                            <th>Price</th>
                            <th>Description</th>
                            <th>Op End Time</th>
                            <th>Group Code</th>
                        </tr>
                        <!-- 新增筛选行，用于放置下拉筛选器 -->
                        <tr id="filterRow">
                            @for (int i = 0; i < Model.FirstOrDefault()?.GetType().GetProperties().Count() ?? 0; i++)
                            {
                                <th></th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var x in Model)
                        {
                            <tr>
                                <td>@x.WarehouseCode</td>
                                <td>@x.FirstWarehouse</td>
                                <td>@x.StockName.Replace('Ý', 'İ').Replace('Þ', 'Ş').Replace('Ð', 'Ğ')</td>
                                <td>@x.Quality</td>
                                <td>@x.Thickness.ToString("N2")</td>
                                <td>@x.Width.ToString("N0")</td>
                                <td>@x.Height.ToString("N0")</td>
                                <td>@x.Tonnage.ToString("N0")</td>
                                <td>@x.OrdTonnage.ToString("N0")</td>
                                <td>@x.NetTonnage.ToString("N0")</td>
                                <td>@x.WorkOrdTonnage.ToString("N0")</td>
                                <td>@x.Origin</td>
                                <td>@x.RollNo</td>
                                <td style="text-align:right;">@x.Price.ToString("N2")</td>
                                <td>@x.Description</td>
                                <td>@x.OpEndTime</td>
                                <td>@x.GroupCode</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

3. 编写筛选功能的JavaScript代码 #

在视图末尾添加<script>标签，实现下拉复选框的生成和筛选逻辑：

<script>
$(document).ready(function() {
    // 初始化DataTables
    var table = $('#stockTable').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true
    });

    // 为每列生成下拉筛选器（支持单选，如需多选可扩展为复选框弹窗）
    $('#stockTable thead th').each(function(index) {
        var column = table.column(index);
        var header = $(this);

        // 创建下拉容器
        var select = $('<select class="form-control"><option value="">全部</option></select>')
            .appendTo(header)
            .on('change', function() {
                var val = $(this).val();
                // 精确匹配选中值
                column.search(val ? '^' + $(this).val() + '$' : '', true, false).draw();
            });

        // 获取列的唯一值并添加到下拉框
        column.data().unique().sort().each(function(d, j) {
            select.append('<option value="' + d + '">' + d + '</option>');
        });
    });

    // 若不需要全局搜索，可隐藏默认搜索框
    // $('.dataTables_filter').hide();
});
</script>

4. 样式优化（可选） #

添加CSS让下拉框更贴合Excel风格：

<style>
#stockTable thead select {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
#filterRow {
    background-color: #f5f5f5;
}
</style>

扩展说明 #

• 若需要多选复选框的精确Excel风格，可替换下拉框为包含复选框的弹窗，核心逻辑是收集选中值后，用DataTables的column.search()方法匹配包含任一选中值的行；
• 模型代码无需修改，数据渲染逻辑保持原有即可。

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