jqGrid:使用多种方法过滤数据

Question

我的要求是显示一个包含多个过滤器的页面以应用于网格数据.

假设我们正在谈论订单,订单具有以下属性

public class Order {
    public int OrderID
    public DateTime OrderDate
    public DateTime ShipmentDate
    public int OrderTotal
    public int OrderStatus
}

在jqgrid对象中,我显示除OrderStatus之外的所有属性

要求是创建一个具有的视图

• 左边的jqGrid
• 右边的一个小组

在右侧面板中,用户将看到一个复选框列表,表示每个可能的OrderStatus值,并且他希望使用这两种方法进行搜索(例如,选中"已发货订单"复选框,然后使用大于某个值的金额过滤网格)

我已经multiplesearch:true在jqGrid对象中配置了高级过滤(),我可以创建组合字段和逻辑运算符的复杂过滤器.

有关如何在用户按下搜索按钮时从右侧面板提交数据的任何想法？

更新1:

序言:Oleg样品太棒了但不幸的是不符合我的客户要求:(

@Oleg:我不明白你为什么这么想:

如果数据位于网格之外,您将仅在选定行的右窗格中显示订单详细信息.因此,用户将不太了解数据.

也许我的描述不是那么清楚,但我不会显示任何订单细节.为了更好地阐明我的要求,我修改了您的示例,以显示所需的最终用户界面,如下图所示:

客户希望使用两种方法或两者同时过滤网格中的数据:

• 使用multiplesearch网格本身提供的设施(感谢提到的解决方法)
• 使用自定义搜索面板(右侧带有复选框的面板)

从功能的角度来看,需求很容易表达:当用户单击复选框或使用本机进行搜索时,multiplesearch我应该将值发布到服务器,包括复选框状态.

总结一下,我应该:

• 通过本机发布帖子时添加复选框状态 multiplesearch
• multiplesearch当用户单击复选框时添加当前状态(如果有)

有没有办法做到这一点？

Answer 1

我理解这个要求非常好.在最后的案例中,我使用了 jqGrid中的复选框.在jqGrid中获取信息的最大好处不仅在于易于搜索的可能性.如果数据位于网格之外,您将仅在选定行的右窗格中显示订单详细信息.因此,用户将不太了解数据.

为了能够在没有永久水平滚动的情况下在表中放置许多复选框,我使用基于JavaScript的SVG库旋转了具有" 使用基于JavaScript的SVG库中的垂直文本中的垂直文本中描述的技术的复选框的列的标题.此旋转在IE中看起来并不完美,但是在其他浏览器中它完美无缺.

您可以将OrderStatus字段中的数据保存在隐藏列中,并将位掩码解码为布尔值,从而在客户端或服务器端构建复选框.

因为使用想要使用multiplesearch:true我必须提到jQuery.clone中的一个错误,它跟随所有版本的IE浏览器中的jqGrid多搜索中的错误.如果您将更多定义为一个搜索过滤器,则仅使用第一个过滤器,因为所有其他过滤器的操作字段将被读取为undefined.很遗憾,但是刚刚发布的jQuery 1.4.3中也没有修复这个bug.为了能够使用,multiplesearch:true您可以在trirand.com论坛上使用Jiho Han的变通方案建议.

总之,您可以在演示示例中看到生成网格的内容

您可以在哪里搜索多个字段

相应的代码:

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事件处理程序中的位掩码进行解码.

更新:我真的在开始时误解了你的要求.看看修改过的例子.现在看起来像

它更贴近你的需要.