我应该如何使用 jqGrid PostData？答案

【问题标题】：How should I be using jqGrid PostData?我应该如何使用 jqGrid PostData？
【发布时间】：2012-02-22 21:51:00
【问题描述】：

使用 ASP.NET MVC3 Razor 引擎和 jQuery

我有一个日历 (fullcalendar) 和一个网格 (jqgrid)。当我在日历上选择一个日期时，我需要根据所选日期更新网格。我如何在网格中执行此操作？我看过一些关于使用 postdata 的讨论，但我似乎无法让它正常工作。

jquery：

currentMaintenanceGrid.jqGrid({
                url: '@Url.Action("GetCurrentMaintenanceItems", "Home")',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['Component Type', 'Serial Number', 'Facility', 'Building', 'Area', 'Schedule Type', 'Task Hours', 'Reschedule', 'ComponentScheduleID'],
                colModel: [
                    { name: 'ComponentType', index: 'A', width: 40 },
                    { name: 'SerialNumber', index: 'B', width: 40 },
                    { name: 'Facility', index: 'C', width: 400 },
                    { name: 'Building', index: 'D' },
                    { name: 'Area', index: 'E' },
                    { name: 'ScheduleType', index: 'F' },
                    { name: 'TaskHours', index: 'G' },
                    { name: 'Reschedule', index: 'H' },
                    { name: 'ID', index: 'j', key: true, hidden: true }
                ],
                pager: '#pager',
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'ComponentType',
                sortorder: 'desc',
                rownumbers: true,
                viewrecords: true,
                altRows: true,
                //altclass: 'myAltRowClass',
                height: '100%',
                gridview: true,
                jsonReader: { cell: "" },
                caption: 'Grid Title',
            });

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            selectable: false,
            defaultView: 'month',
            editable: false,
            dayClick: function (date, allDay, jsEvent, view) {
                $(this).addClass('activeDay')
                if (activeDay != this) {
                    $(activeDay).removeClass('activeDay')
                }
                activeDay = this;
            }
        });

控制器：

public ActionResult GetCurrentMaintenanceItems(string sidx, string sord, int page, int rows)
        {
            // TODO: Fix Testing Data so we don't have to hardcode dates
            IQueryable<schedule> lstQuery = m_clsScheduleRepository.GetMaintenanceSchedules(Convert.ToDateTime("1/21/2010"));

            return CreateMaintenanceGridJsonResult(lstQuery, false, sidx, sord, page, rows);
        }

现在我们只是使用硬编码的日期，显然这不是我们想要的。我们应该从哪里开始让它正常工作？

【问题讨论】：

标签： jquery asp.net-mvc-3 jqgrid

【解决方案1】：

我自己从未使用过fullcalendar 插件，但我在文档中找到了有关getDate 的信息。因此，您可以在每次重新加载网格时从日历中发送有关当天的附加信息。这样做你可以使用

postData: {
    date: function () {
        return $('#calendar').fullCalendar('getDate');
    }
}

如果属性名称'date' 将是发送到服务器的附加参数。所以你应该在GetCurrentMaintenanceItems方法的参数列表中包含date参数：

public ActionResult GetCurrentMaintenanceItems (string sidx, string sord, int page,
                                                int rows, string date) {
    ...
}

另外我建议你在dayClick回调中包含reloadGrid的调用：

currentMaintenanceGrid.trigger('reloadGrid', [{page: 1}]);

【讨论】：