Как я должен использовать jqGrid PostData?

Question

Использование ASP.NET MVC3 Razor Engine и jQuery

У меня есть календарь (fullcalendar) и сетка (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}]);