我应该如何使用jqGrid PostData？

Question

使用ASP.NET MVC3 Razor Engine和jQuery

我有一个日历(完整日历)和一个网格(jqgrid)。在日历上选择日期时，需要根据所选日期更新网格。我该怎么在网格里这么做？我见过一些关于使用后数据的讨论，但我似乎无法让它正常工作。

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);
        }

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

Answer 1

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

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

在这种情况下，属性名'date'将是将发送到服务器的附加参数。因此，您应该在date方法的参数列表中包括GetCurrentMaintenanceItems参数：

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

此外，我建议您在dayClick回调中包括reloadGrid的调用

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