jqgrid searchToolbar datepicker не фильтруется

Question

Сейчас я использую jqGrid(версия: jqGrid 4.14.1-pre, бесплатная jqGrid) и хотел бы иметь панель инструментов поиска с датчиком. Когда я щелкаю текстовое поле, средство выбора даты успешно появляется, и оно обновляет текстовое поле с выбранной датой. Тем не менее, он не фильтрует данные.

Что я действительно хотел, так это sopt:["le"], но не удалось. Для проверки я тоже попробовал "eq". Но в обоих случаях все строки данных исчезают.

Я установил

loadonce:true

и попробовал

$('#list')[0].triggerToolbar();

Поскольку я использовал более старую версию jqGrid, я обновил последнюю версию в GitHub и попробовал, но все равно не получилось.

{label: 'LockedDate',   name: 'LockedDate',     index: 'LockedDate',    sorttype: 'date',   clearSearch: true,
        sortable: true,
        resizable: false,
        hidden: false,
        search: true,
        formatter: 'date', 
        formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
        searchrules: {date: true},
        searchoptions: {
             sopt: ["le"],
            dataInit: function (element) {
                            $(element).datepicker({
                                    dateFormat: 'mm/dd/yy',
                                    changeYear: true,
                                    changeMonth: true,
                                    showButtonPanel: true,
                                    onSelect: function () {
                                        $(this).keydown();
                                        $('#list')[0].triggerToolbar();
                                                },
                                    onChange: function () { 
                                             $('#list')[0].triggerToolbar(); }
                                            })
                                        }
                                    }
                                }

Как я правильно помню, я видел ответы Олега на stackru (извините, потерял ссылку), говорящий о проблеме разбора даты и времени в более старой версии. Является ли мой формат даты причиной?

Так как другая панель инструментов поиска работает хорошо, я не думаю, что это проблема самого пейджера или сетки. Может ли кто-нибудь помочь мне, где я неправильно установил DatePicker??

Спасибо!:)

Я не уверен, нужен ли этот код jqGrid, но на всякий случай я добавлю:

$('#list').jqGrid({
    url: '/LockedObjects/GetLockedObjects',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'GET',

    colModel: [
        {label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text',   clearSearch: true,},
        {
            label: 'LockedDate', name: 'LockedDate', index: 'LockedDate', sorttype:'date', clearSearch: true,
                sortable: true,
                resizable: false,
                hidden: false,
                search: true,
                formatter: 'date', 
                formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
                searchrules: {date: true},
                searchoptions: {sopt: ["le"],
                                dataInit: function (element) {
                                        $(element).datepicker({
                                            dateFormat: 'mm/dd/yy',
                                            changeYear: true,
                                            changeMonth: true,
                                            showButtonPanel: true,
                                            onSelect: function () {
                                                $(this).keydown();
                                                $('#list')[0].triggerToolbar();
                                                },
                                            onChange: function () { $('#tbLockedPartiesHistory')[0].triggerToolbar(); }
                                            })
                                        }
                                }
                }],
    rowNum: 20,
    rowList: [20, 30, 50],
    sortName: 'LockedDate',
    ignoreCase: true,
    viewrecords: true,
    sortOrder: 'asc',
    loadonce: true,
    multiselect: true,
    jsonReader: {
        repeatitems: false,
        root: 'rows',
        page: 'page',
        total: 'total'
    },
    height: 'auto',
    pager: '#listPager',
    loadError: function (xhr, status, error) {
        console.log(xhr);
        console.log(status);
        console.log(error);
    }
});

$('#list').jqGrid('filterToolbar', {searchOnEnter: false, ignoreCase: true, searchOperators:true,defaultSearch: 'cn' });
$('#list').jqGrid('navGrid', '#listPager', {edit: false,
                                            add: false,
                                            del: false,
                                            refresh: true
                                            });
};

Answer 1

Следующие searchoptions должно сработать:

searchoptions: {
    sopt: ["le"], // or any other search operation
    dataInit: function (element) {
        var self = this; // save the reference to the grid
        $(element).datepicker({
            dateFormat: 'mm/dd/yy',
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                setTimeout(function () {
                    self.triggerToolbar();
                }, 0);
            }
        });
    }
}

Я бы порекомендовал вам внести некоторые дополнительные изменения в свой код, чтобы упростить его или исправить некоторые параметры:

• нет contentType вариант в jqGrid. Установить contentType параметр базового jQuery.ajax Функция, которую следует использовать ajaxGridOptions: { contentType: "application/json; charset-utf-8" }
• лучше убрать варианты mtype: 'GET', ignoreCase: true, height: 'auto', которые имеют значение по умолчанию для бесплатной jqGrid.
• опция sortOrder: 'asc' должны быть удалены. Есть не существует sortOrder опция (только sortorder вариант со значением по умолчанию 'asc'). Точно так же вариант sortName: 'LockedDate' неправильно и будет проигнорировано. Правильный вариант будет sortname: 'LockedDate',
• вы должны заменить jsonReader: {repeatitems: false, root: 'rows', page: 'page', total: 'total' } в jsonReader: { repeatitems: false }, Все остальные свойства root, page, total из jsonReader имеют значение по умолчанию и, следовательно, могут быть пропущены. В большинстве случаев даже jsonReader: { repeatitems: false } можно пропустить, потому что бесплатный jqGrid пытается обнаружить repeatitems,
• рекомендуется использовать pager: true вместо pager: '#listPager', Вы можете удалить ненужные <div id="listPager"></div> со страницы HTML. Free jqGrid создаст соответствующий div автоматически. Вы можете пропустить пейджер в методах navGrid, inlineNav и так далее. Зов navGrid может быть как $('#list').jqGrid('navGrid', {edit: false,..}); в этом случае.
• Вы можете указать параметры поиска по умолчанию, такие как searchOnEnter: false, ignoreCase: true, searchOperators:true, defaultSearch: 'cn' Внутри searching параметр jqGrid. Это упрощает последующее использование filterToolbar или поиск диалога. Например, вы можете использовать опцию jqGrid searching: { searchOperators: true, defaultSearch: 'cn', closeOnEscape: true, searchOnEnter: true, multipleSearch: true, multipleGroup: true},
• Рекомендуется удалить loadError Перезвоните. Free jqGrid имеет обратный вызов по умолчанию, который будет отображать ошибки при загрузке данных jqGrid с сервера. Ошибки будут отображаться в div между заголовками столбцов и телом сетки (см. Рисунок). Указав loadError обратный вызов будет отображать меньше информации, так как бесплатный jqGrid отображает значение по умолчанию.
• вы должны очистить colModel Предметы. Определение столбца LockedBy: {label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text', clearSearch: true,} следует заменить на { name: 'LockedBy', searchoptions: { clearSearch: true } }, Свойства label, index, sortable, hidden, search колонны LockedDate должны быть удалены и имущество clearSearch: true должны быть перемещены внутри searchoptions,

Вы можете рассмотреть возможность использования multiPageSelection: true а также forceClientSorting: true Варианты бесплатных jqGrid дополнительно.

Опция forceClientSorting: true принудительная локальная сортировка и фильтрация данных, возвращаемых с сервера, до отображения первой страницы. Если вы используете sortname: 'LockedDate' то сервер должен отсортировать возвращаемые данные по LockedDate, Если вы используете опцию forceClientSorting: true Затем сервер может вернуть несортированные данные и бесплатно jqGrid отсортировать данные локально перед отображением первой страницы.

Опция multiPageSelection: true описано в ответе. Демо демонстрирует результаты. Опция позволяет: 1) удерживать выделение на страницах (можно выбрать строки на одной странице, изменить страницу, выбрать строки на другой странице, вернуться на первую страницу, и ранее выбранные строки будут сохранены) 2) можно предварительно -выбрать строки.