jqGrid: использование нескольких методов для фильтрации данных

Я очень хорошо понимаю это требование. В последнем случае я использовал флажки внутри jqGrid. Самым большим преимуществом наличия информации внутри jqGrid является не только возможность простого поиска. Если данные находятся за пределами сетки, вы увидите детали заказа на правой панели только для выбранной строки. Таким образом, у пользователя будет не очень хороший обзор данных.

Чтобы иметь возможность разместить много флажков в таблице без постоянной горизонтальной прокрутки, я повернул заголовки столбцов с флажком, используя технику, описанную в Вертикальный текст внутри заголовков таблиц с использованием библиотеки SVG на основе JavaScript. Это вращение выглядит не идеально в IE, но в другом браузере работает отлично.

Вы можете хранить данные из поля OrderStatus в скрытом столбце и декодировать битовую маску в логическое значение, которое создает флажки либо на стороне клиента, либо на стороне сервера.

Поскольку вы хотите использовать multiplesearch:true, я должен упомянуть об ошибке в jQuery.clone, который следует за ошибка множественного поиска jqGrid во всех версиях браузеров IE. Если вы определите несколько фильтров в качестве одного фильтра поиска, будет использоваться только первый, потому что поле операции всех других фильтров будет читаться как undefined. Жалко, но ошибка также не исправлена ​​в только что опубликованном jQuery 1.4.3. Чтобы иметь возможность использовать multiplesearch:true, вы можете использовать предложение обходного пути от Джихо Хан на форуме trirand.com.

Все вместе вы можете увидеть в демонстрационном примере, который создает сетку

где вы можете искать по нескольким полям

Соответствующий код:

var myData = [
    { orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" },
    { orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" },
    { orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" }
];
// decode 'orderStatus' column and add additional boolean data based on the bitmap mask
for (var i=0, l=myData.length; i<l; i++) {
    var myRow = myData[i];
    var orderStatus = parseInt(myRow.orderStatus, 10);
    myRow.airPost = (orderStatus & 2) != 0? "1": "0";
    myRow.heavy = (orderStatus & 1) != 0? "1": "0";
}
var grid = jQuery('#list');
grid.jqGrid({
    data: myData,
    datatype: 'local',
    caption: 'Order Details',
    height: 'auto',
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    pager: '#pager',
    rownumbers: true,
    colNames: ['Order ID', 'Order', 'Shipment', 'Air-Post', 'Heavy', 'RowVersion'],
    colModel: [
        { name: 'orderID', index: 'orderID', key:true, width: 120, sorttype: 'int' },
        { name: 'orderDate', index: 'orderDate', width: 180,
          sorttype: 'date', formatter: 'date' },
        { name: 'shipmentDate', index: 'shipmentDate', width: 180,
          sorttype: 'date', formatter: 'date' },
        { name: 'airPost', width: 21, index: 'airPost', formatter: 'checkbox', align: 'center',
          editoptions: { value: "1:0" }, stype: 'select', searchoptions: { value: "1:Yes;0:No" } },
        { name: 'heavy', width: 21, index: 'heavy', formatter: 'checkbox', align: 'center',
          editoptions: { value: "1:0" }, stype: "select", searchoptions: { value: "1:Yes;0:No" } },
        { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true }
    ]
}).jqGrid ('navGrid', '#pager', { edit: false, add: false, del: false, refresh: true, view: false },
            {},{},{},{multipleSearch:true})
  .jqGrid ('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
      onClickButton: function() {
          grid.jqGrid('columnChooser');
      }
  });

где rotateCheckboxColumnHeaders и исправление ошибки в расширенном поиске определено так

// we use workaround from http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/
// to fix the bug in the jQuery.clone (see http://bugs.jquery.com/ticket/6793 and
// dscussion on the http://api.jquery.com/clone/
jQuery.event.special.click = {
    setup: function() {
        if (jQuery(this).hasClass("ui-search")) {
            jQuery(this).bind("click", jQuery.event.special.click.handler);
        }
        return false;
    },
    teardown: function() {
        jQuery(this).unbind("click", jQuery.event.special.click.handler);
        return false;
    },
    handler: function(event) {
        jQuery(".ui-searchFilter td.ops select").attr("name", "op");
    }
};
var rotateCheckboxColumnHeaders = function (grid, headerHeight) {
    // we use grid as context (if one have more as one table on tnhe page)
    var trHead = jQuery("thead:first tr", grid.hdiv);
    var cm = grid.getGridParam("colModel");
    jQuery("thead:first tr th").height(headerHeight);
    headerHeight = jQuery("thead:first tr th").height();

    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        if (cmi.formatter === 'checkbox') {
            // we must set width of column header div BEFOR adding class "rotate" to
            // prevent text cutting based on the current column width
            var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
            headDiv.width(headerHeight).addClass("rotate");
            if (!jQuery.browser.msie) {
                if (jQuery.browser.mozilla) {
                    headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7);
                }
                else {
                    headDiv.css("left", (cmi.width - headerHeight) / 2);
                }
            }
            else {
                var ieVer = jQuery.browser.version.substr(0, 3);
                // Internet Explorer
                if (ieVer !== "6.0" && ieVer !== "7.0") {
                    jQuery("span", headDiv).css("left", 0);
                    headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2);
                }
                else {
                    headDiv.css("left", 3);
                }
                headDiv.parent().css("zoom",1);
            }
        }
    }
};

Если вы предпочитаете удерживать флажки вне сетки, вы можете выполнить декодирование битовой маски OrderStatus внутри onSelectRow обработчик событий.

ОБНОВЛЕНО: я действительно что-то неправильно понял ваши требования в начале. Взгляните на измененный пример. Теперь это выглядит так:

и это ближе к тому, что вам нужно.

В качестве продолжения я включаю сюда еще один метод, который, как я обнаружил, дает тот же результат.

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

Это образец

postData: {
    pending: function () {
        if ($("#cb_pending").is(':checked')) {
            return true;
        } else {
            return false;
        }
    }
}

Преимущество этого решения по сравнению с описанным Олегом состоит в том, что на стороне сервера можно использовать смешанные логические операторы (И / ИЛИ), в то же время используя раздел фильтров, как в Олег ответить не представляется возможным.

Удачного кодирования!