asp.net – jqGrid：使用多种方法来过滤数据

为了能够在表中放置许多复选框,而不需要永久的水平滚动,我旋转了具有“Vertical text inside table headers using a JavaScript-based SVG library”中描述的技术的复选框的列的标题.这种旋转在IE中看起来并不完美,但在其他浏览器中它的工作完美.

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

因为使用想要使用multiplesearch：true我不得不提到jQuery.clone中的一个错误,跟随jqGrid在所有版本的IE浏览器中的多搜索的错误.如果您定义更多的一个搜索过滤器,则只使用第一个搜索过滤器,因为所有其他过滤器的操作字段将被读取为未定义.可惜的是,jQuery 1.4.3中的bug也没有修复刚才发布.为了能够使用multiplesearch：true,您可以使用Jiho Han on trirand.com forum的解决方法建议.

所有在一起,您可以看到在the demo example生产电网

在哪里可以搜索多个字段

相应的代码：

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',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',{ name: 'airPost',width: 21,index: 'airPost',formatter: 'checkbox',align: 'center',editoptions: { value: "1:0" },stype: 'select',searchoptions: { value: "1:Yes;0:No" } },{ name: 'heavy',index: 'heavy',stype: "select",{ 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',{ 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);
            }
        }
    }
};

如果您更喜欢将复选框保留在网格外,则可以对onSelectRow事件处理程序内的位掩码OrderStatus进行解码.

更新：我一开始就误以为你的要求.看看modified example.现在看起来像

它更接近你所需要的.