MVC中jqGrid 4.6.0点击按钮加载表格传参及年份筛选实现问询

我来帮你搞定这两个jqGrid的功能实现，结合你用的MVC和jqGrid 4.6.0版本，一步步拆解来做：

1. 点击按钮加载jqGrid并向Action传递参数 #

这个需求的核心是给按钮绑定点击事件，在事件里初始化/重载jqGrid，同时把参数传递给后端Action。

步骤1：完善页面元素 #

先确保页面上有按钮和jqGrid的容器：

<!-- 触发加载的按钮 -->
<a href="#" class="btn btn-primary" id="loadGridBtn">加载数据表格</a>

<!-- jqGrid的表格容器和分页栏 -->
<table id="dataGrid"></table>
<div id="dataGridPager"></div>

步骤2：编写jQuery逻辑 #

在页面的<script>标签里写以下代码，点击按钮时触发jqGrid加载，并通过postData传递参数：

$(function() {
    $("#loadGridBtn").on("click", function() {
        // 定义要传递的参数（可以从页面输入框/下拉框获取，或者固定值）
        var requestParams = {
            departmentId: $("#deptSelect").val(),
            status: "Active"
        };

        // 判断jqGrid是否已初始化，避免重复创建
        if ($("#dataGrid").getGridParam("records") === undefined) {
            // 第一次点击：初始化jqGrid
            $("#dataGrid").jqGrid({
                url: '/YourController/GetGridData', // 替换成你的Action地址
                datatype: 'json',
                mtype: 'POST',
                postData: requestParams, // 传递给Action的参数
                colModel: [
                    { name: 'Id', index: 'Id', width: 80, align: 'center' },
                    { name: 'UserName', index: 'UserName', width: 150 },
                    { name: 'Department', index: 'Department', width: 120 },
                    // 其他列配置按需添加
                ],
                pager: '#dataGridPager',
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                caption: '员工数据表格',
                loadComplete: function() {
                    console.log("表格加载完成");
                }
            });
        } else {
            // 非第一次点击：重新加载表格，更新参数
            $("#dataGrid").jqGrid('setGridParam', {
                postData: requestParams,
                page: 1 // 重新加载时回到第一页
            }).trigger('reloadGrid');
        }
    });
});

步骤3：后端Action接收参数 #

在你的Controller里写对应的Action，接收传递过来的参数并返回jqGrid需要的JSON格式：

public ActionResult GetGridData(string departmentId, string status, int page, int rows)
{
    // 根据参数查询数据库数据
    var data = YourDataService.GetEmployees(departmentId, status);
    
    // 组装jqGrid要求的返回结构
    var jsonResult = new
    {
        total = (data.Count + rows - 1) / rows, // 总页数
        page = page, // 当前页码
        records = data.Count, // 总记录数
        rows = data // 具体数据列表
    };
    
    return Json(jsonResult, JsonRequestBehavior.AllowGet);
}

2. 点击按钮弹出模态表单，选择年份后加载对应数据 #

结合你现有的Filter按钮和模态框，我们在模态框里添加年份选择控件，确认后把年份作为参数传递给jqGrid重载数据。

步骤1：完善模态框HTML #

把你的模态框补全，加上年份选择下拉框：

<!-- 触发模态框的Filter按钮 -->
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#yearFilterModal">Filter</a>

<!-- 年份选择模态框 -->
<div class="modal fade" id="yearFilterModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">选择年度</h4>
            </div>
            <div class="modal-body">
                <!-- 年份选择下拉框，也可以动态生成选项 -->
                <select id="yearPicker" class="form-control">
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024" selected>2024</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmYearBtn">确认加载</button>
            </div>
        </div>
    </div>
</div>

<!-- jqGrid容器 -->
<table id="yearDataGrid"></table>
<div id="yearDataGridPager"></div>

步骤2：编写模态框和jqGrid逻辑 #

先初始化jqGrid（默认加载选中年份的数据），然后绑定模态框确认按钮的事件：

$(function() {
    // 初始化年度数据表格（默认加载2024年数据）
    $("#yearDataGrid").jqGrid({
        url: '/YourController/GetYearlyData',
        datatype: 'json',
        mtype: 'POST',
        postData: { year: 2024 },
        colModel: [
            { name: 'Id', index: 'Id', width: 80 },
            { name: 'Year', index: 'Year', width: 80 },
            { name: 'Revenue', index: 'Revenue', width: 120, formatter: 'currency' },
            { name: 'Remark', index: 'Remark', width: 200 },
            // 其他列配置
        ],
        pager: '#yearDataGridPager',
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        caption: '年度营收数据',
        loadonce: false, // 每次都从服务器拉取最新数据
        loadComplete: function() {
            console.log("年度数据加载完成");
        }
    });

    // 模态框确认按钮点击事件
    $("#confirmYearBtn").on("click", function() {
        // 获取选中的年份
        var selectedYear = $("#yearPicker").val();
        
        // 重载jqGrid，传递选中的年份参数
        $("#yearDataGrid").jqGrid('setGridParam', {
            postData: { year: selectedYear },
            page: 1
        }).trigger('reloadGrid');
        
        // 关闭模态框
        $("#yearFilterModal").modal('hide');
    });
});

步骤3：后端Action处理年份参数 #

在Controller里写对应的Action，根据年份查询并返回数据：

public ActionResult GetYearlyData(int year, int page, int rows)
{
    // 根据年份查询年度数据
    var yearlyData = YourDataService.GetYearlyRevenue(year);
    
    // 组装jqGrid返回格式
    var jsonResult = new
    {
        total = (yearlyData.Count + rows - 1) / rows,
        page = page,
        records = yearlyData.Count,
        rows = yearlyData
    };
    
    return Json(jsonResult, JsonRequestBehavior.AllowGet);
}

内容的提问来源于stack exchange，提问作者s.sam