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

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

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

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

Потому что я хочу использовать multiplesearch:true я должен упоминание об ошибке в jQuery.clone , которые следуют за ошибкой в jqGrid multi-search во всех версиях браузеров 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.

Обновлено : я действительно что-то недопонял ваши требования в самом начале. Посмотрите на модифицированный пример . Теперь это выглядит так

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