запуск фильтрации на стороне клиента во время загрузки в jqGrid - PullRequest
Новая
       37

запуск фильтрации на стороне клиента во время загрузки в jqGrid

4 голосов
/ 07 октября 2011

Я пытаюсь заставить JqGrid выполнить некоторую фильтрацию (и сортировку) на стороне клиента сразу после завершения загрузки данных. Я могу правильно задать поле поиска, но вызов TriggerToolbar (), похоже, не имеет никакого эффекта. 

$("#list").GridUnload();
        var mygrid = $("#list").jqGrid({
            url: '@Url.Action("GetSearchCriteriaWithNoComponents", "SearchCriteria")',
            postData: { BookingSiteId: function () { return $("#BookingSiteId option:selected").val(); }, MethodId: function () { return $("#MethodId option:selected").val(); } },
            datatype: 'json',
            mtype: 'Post',
            colNames: ['Id', 'PID', 'Ori', 'Dest', 'Conn', 'Pos', 'Method', 'Billing', 'Filter', 'Pattern', 'Class', 'Wildcard', 'Components', 'Comment'],
            colModel: [
          { name: 'Id', index: 'Id', width: 30, hidden: true },
          { name: 'PID', index: 'PID', width: 35 },
          { name: 'Ori', index: 'Ori', width: 35 },
          { name: 'Dest', index: 'Dest', width: 35 },
          { name: 'Conn', index: 'Conn', width: 35 },
          { name: 'Pos', index: 'Pos', width: 35 },
          { name: 'Method', index: 'Method', width: 50 },
          { name: 'Billing', index: 'Billing', width: 45, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Filter', index: 'Filter', width: 90, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Pattern', index: 'Pattern', width: 100, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Class', index: 'Class', width: 40 },
          { name: 'Wildcard', index: 'Wildcard', width: 50 },
          { name: 'Components', index: 'Components', width: 80, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Comment', index: 'Comment', width: 75, search: true, stype: 'text', searchoptions: { sopt: ['cn']} }
          ],
            pager: '#pager',
            rowNum: 25,
            rowTotal: 1000,
            rowList: [25, 50, 100],
            sortname: 'Origin',
            sortorder: "asc",
            viewrecords: true,
            loadonce: true,
            multiselect: true,
            ignoreCase: true,
            gridview: true,
            height: "100%",
            caption: 'Subscribed Search Criteria without Components'
        }).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false }
         ).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-search", onClickButton: function () { mygrid[0].toggleToolbar() }, position: "first", title: "Toggle Search Toolbar", cursor: "pointer" })
          .jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-refresh", onClickButton: function () { mygrid[0].clearToolbar() }, title: "Clear Search Toolbar", cursor: "pointer" }
        );

        $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

        if(firstrun = true)
        {
            $("#gs_PID").val('AA');
            mygrid[0].triggerToolbar();
            firstrun = false;
        }
        else
        {
            mygrid[0].toggleToolbar(); //hide the toolbar by default
        }

Общая идея заключается в том, что фиксированное значение будет заполнено чем-то из модели представления.

Мы также хотели бы иметь возможность сохранять и восстанавливать выбор фильтра и сортировки для случаев, когда мы выполняем gridUnload () и последующие перезагрузки, но по одному препятствию за раз. вещи с @prefixes, такие как @ Url.Action is Razor разметка, которая обрабатывается перед отправкой страницы в браузер.

1 Ответ

6 голосов
/ 07 октября 2011

Вы используете datatype: 'json' в сочетании с loadonce: true.Поэтому вы должны вызывать mygrid[0].triggerToolbar() внутри дескриптора события loadComplete.Только после загрузки данных вы должны фильтровать данные.Возможно, вам следует поместить код с triggerToolbar внутри метода setTimeout, чтобы начать фильтрацию уже после того, как datatype будет изменено на 'local' во время loadonce: true.Таким образом, код вашего loadComplete дескриптора события может быть следующим: 

loadComplete: function () {
    var gridDOM = this; // save $("#list")[0] in a variable
    if ($(this).jqGrid('getGridParam', 'datatype') === 'json') {
        // the first load from the server
        setTimeout(function () {
            $("#gs_PID").val('AA');
            gridDOM.triggerToolbar();
        }, 100);
    }
}

Кроме того, я не до конца понимаю, как вы используете фрагмент кода, который вы разместили, и почему вам нужно использовать gridUnloadmethod.

ОБНОВЛЕНО: Свободный jqGrid форк jqGrid поддерживает опцию forceClientSorting: true, которая вызывает сортировку и дополнительную фильтрацию данных, возвращаемыхс сервера, до отображения первой страницы данных. делает ненужным приведенный выше код.Вместо этого можно установить postData.filters использовать 

forceClientSorting: true,
search: true,
postData: {
    filters: {
        groupOp: "AND",
        rules: [
            { op: "le", field: "PID", data: "AA" }
        ]
    }
}

см. демо .

...