如何在ASP.NET Core 6.0 MVC中为grid.js添加日期范围筛选功能

1. Razor视图的HTML结构 #

在.cshtml文件中添加日期筛选控件与表格容器：

<div class="filter-bar">
    <input type="date" id="startDate" />
    <input type="date" id="endDate" />
    <button id="filterBtn">执行筛选</button>
</div>
<div id="dataGrid"></div>

2. 引入grid.js资源 #

在视图的body末尾添加grid.js的样式与脚本：

<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>

3. 初始化grid.js实例 #

将grid实例保存为全局变量，方便后续更新操作：

let grid;

document.addEventListener('DOMContentLoaded', () => {
    // 初始化表格，默认加载全量数据
    grid = new gridjs.Grid({
        columns: ['ID', '数据名称', '记录日期', '备注'],
        server: {
            url: '/Data/GetRecords',
            then: res => res.map(item => [item.id, item.name, item.recordDate, item.remark])
        },
        container: document.getElementById('dataGrid'),
    }).render();
});

4. 后端筛选接口实现 #

在对应Controller（示例为DataController）中添加数据筛选接口：

public IActionResult GetRecords(DateTime? startDate, DateTime? endDate)
{
    // 替换为实际业务的数据查询逻辑，比如从数据库读取
    var allRecords = new List<RecordModel>
    {
        new RecordModel { Id = 1, Name = "销售记录1", RecordDate = DateTime.Parse("2024-06-01"), Remark = "线下交易" },
        new RecordModel { Id = 2, Name = "销售记录2", RecordDate = DateTime.Parse("2024-06-15"), Remark = "线上交易" },
        // 更多测试数据...
    };

    // 应用日期筛选条件
    if (startDate.HasValue && endDate.HasValue)
    {
        allRecords = allRecords.Where(r => r.RecordDate >= startDate.Value && r.RecordDate <= endDate.Value).ToList();
    }

    return Json(allRecords);
}

// 数据模型定义
public class RecordModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime RecordDate { get; set; }
    public string Remark { get; set; }
}

5. 日期筛选与表格更新逻辑 #

为筛选按钮绑定点击事件，更新grid数据源并重新渲染：

document.getElementById('filterBtn').addEventListener('click', () => {
    const start = document.getElementById('startDate').value;
    const end = document.getElementById('endDate').value;

    // 基础校验
    if (!start || !end) {
        alert('请选择完整的日期范围');
        return;
    }

    // 更新grid配置，请求筛选后的数据并强制渲染
    grid.updateConfig({
        server: {
            url: `/Data/GetRecords?startDate=${start}&endDate=${end}`,
            then: res => res.map(item => [item.id, item.name, item.recordDate, item.remark])
        }
    }).forceRender();
});

核心说明 #

• 保存grid实例是实现动态更新的关键，通过updateConfig可修改数据源配置。
• forceRender()方法会触发表格重新加载数据并渲染，确保筛选结果实时展示。
• ASP.NET Core会自动将URL中的日期字符串解析为DateTime类型，无需额外转换。

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