如何使用单个文本框执行jqGrid的客户端筛选

在我发布之前，我已经阅读了这个QA和这个QA。有没有办法只使用一个文本框来过滤客户端的数据

数据通过mechanizm中内置的网格加载以使用json，我已经设置了loadonce:true，现在的问题是如何实现

下面是另一个网格插件的示例

问候,，

---

Stephen

我在回答我自己的问题，但这要归功于Oleg（医生，他在我办公室里打电话给我），因为是他的指导和对jqGrid的深入了解使我能够完成这项工作

这有两个关键点，您必须在网格中设置multipleSearch:true，然后根据您的需求构造适当的过滤器。有关过滤器的创建，请参见末尾的按钮代码。需要注意的是，在文本框中输入至少2个字符之前，我不会执行搜索

另外要注意的是，我将删除按钮并处理文本框的键关闭事件以执行搜索

$(document).ready(function () {

var grid = $('#favoriteGrid'),
            decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
                var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
                if (jqXHR.responseText.charAt(0) === '[') {
                    try {
                        errorInfo = $.parseJSON(jqXHR.responseText);
                        errorText = "";
                        for (i = 0; i < errorInfo.length; i++) {
                            if (errorText.length !== 0) {
                                errorText += "<hr/>";
                            }
                            errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                        }
                    }
                    catch (e) { }
                } else {
                    html = /<body.*?>([\s\S]*)<\/body>/.exec(jqXHR.responseText);
                    if (html !== null && html.length > 1) {
                        errorText = html[1];
                    }
                }
                return errorText;
            };

grid.jqGrid({
    url: myAjaxUrl,
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: { repeatitems: false },
    colNames: ['Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Sort', 'Last Purchase', 'GLCode', 'ProductId', 'OldProductId', 'CategoryName'],
    colModel: [
            { name: 'Quantity', index: 'Quantity', width: 20, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
            { name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
            { name: 'ItemNum', index: 'ItemNum', width: 60, align: "right" },
            { name: 'BrandName', index: 'BrandName', width: 100 },
            { name: 'ProducName', index: 'ProducName', width: 150 },
            { name: 'SupplierName', index: 'SupplierName', width: 100 },
            { name: 'Price', index: 'Price', width: 80, sorttype: "number", align: "right" },
            { name: 'UOM', index: 'UOM', width: 80 },
            { name: 'CasePack', index: 'CasePack', width: 80 },
            { name: 'PackageRemarks', index: 'PackageRemarks', width: 80 },
            { name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
            { name: 'Par', index: 'Par', width: 80, align: "right" },
            { name: 'SortPriority', index: 'SortPriority', hidden: true },
            { name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
            { name: 'GLCode', index: 'GLCode', hidden: true },
            { name: 'ProductId', index: 'ProductId', hidden: true },
            { name: 'OldProductId', index: 'OldProductId', hidden: true },
            { name: 'CategoryName', index: 'CategoryName', hidden: true }
        ],
    pager: $('#favoritePager'),
    pginput: false,
    rowNum: 1000,
    viewrecords: true,
    multiselect: true, // enable multiselct
    gridview: true,
    loadonce: true, // one ajax call per 
    caption: "Products List",
    loadError: function (jqXHR, textStatus, errorThrown) {
        // remove error div if exist
        $('#' + this.id + '_err').remove();
        // insert div with the error description before the grid
        grid.closest('div.ui-jqgrid').before(
                '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
                ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
                decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>')
    },
    loadComplete: function () {
        // remove error div if exist
        $('#' + this.id + '_err').remove();
        // resize the grid both Heigh and Width
        //$("#grid").jqGrid('setGridHeight', Math.min(400, parseInt(jQuery(".ui-jqgrid-btable").css('height')))); // works
        //$(".ui-jqgrid-bdiv").css('height', jQuery("#favoriteGrid").css('height'));
        var gr = jQuery('#favoriteGrid');
        fixGridHeight(gr);
    },
    ondblClickRow: function (rowid, ri, ci) {
        // Popup modal dialog for details view 
    }
}).jqGrid('navGrid', '#favoritePager',
    { add: false, edit: false, del: false, search: true, refresh: false },
    {},
    {},
    {},
    { multipleSearch: true },
    {});


// Add Search
$("#mySearch").button().click(function () {
    var text = $("#searchText").val();
    var postdata = grid.jqGrid('getGridParam', 'postData');
    // build up the filter
    // ['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
    // ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
    var myfilter = { groupOp: "OR", rules: [] };        
    myfilter.rules.push({ field: "ItemNum", op: "cn", data: text });
    myfilter.rules.push({ field: "BrandName", op: "cn", data: text });
    myfilter.rules.push({ field: "ProducName", op: "cn", data: text });

    $.extend(postdata, { filters: JSON.stringify(myfilter) });
    grid.jqGrid('setGridParam', { search: text.length > 2, postData: postdata });        
    grid.trigger("reloadGrid", [{ page: 1}]);
});

});

$（文档）.ready（函数（）{
var grid=$（“#favoriteGrid”），
decodeErrorMessage=函数（jqXHR、textStatus、ErrorSprown）{
var html，errorInfo，i，errorText=textStatus+'\n'+errorshown；
if（jqXHR.responseText.charAt（0）='['）{
试一试{
errorInfo=$.parseJSON（jqXHR.responseText）；
errorText=“”；
对于（i=0；i”；
}
errorText+=errorInfo[i]。源+“：”+errorInfo[i]。消息；
}
}
捕获（e）{}
}否则{
html=/（[\s\s]*）/.exec（jqXHR.responseText）；
如果（html！==null&&html.length>1）{
errorText=html[1]；
}
}
返回错误文本；
};
grid.jqGrid({
url:myAjaxUrl，
数据类型：“json”，
ajaxGridOptions:{contentType:“application/json”}，
jsonReader:{repeatitems:false}，
ColName:[“数量”、“特征”、“项目编号”、“品牌”、“产品”、“供应商”、“价格”、“计量单位”、“包装箱”、“备注”、“平均重量”、“Par”、“排序”、“上次购买”、“GLCode”、“ProductId”、“OldProductId”、“CategoryName”]，
colModel：[
{name:'Quantity'，index:'Quantity'，width:20，sorttype:'number'，edittype:'true'，edittype:'text'，editoptions:{size:10，maxlength:15}，
{name:'ProductAttributes'，index:'ProductAttributes'，宽度：50}，
{name:'ItemNum'，index:'ItemNum'，宽度：60，对齐：“right”}，
{name:'BrandName'，索引：'BrandName'，宽度：100}，
{name:'ProducName'，索引：'ProducName'，宽度：150}，
{name:'SupplierName'，index:'SupplierName'，宽度：100}，
{名称：'Price'，索引：'Price'，宽度：80，排序类型：“number”，对齐：“right”}，
{名称：'UOM'，索引：'UOM'，宽度：80}，
{名称：'CasePack'，索引：'CasePack'，宽度：80}，
{name:'PackageRemarks'，index:'PackageRemarks'，宽度：80}，
{名称：'avewweight'，索引：'avewweight'，宽度：80，对齐：“right”}，
{名称：'Par'，索引：'Par'，宽度：80，对齐：“right”}，
{name:'SortPriority'，index:'SortPriority'，hidden:true}，
{名称：'LastPurchaseDate'，索引：'LastPurchaseDate'，宽度：80，对齐：“右”}，
{name:'GLCode'，index:'GLCode'，hidden:true}，
{name:'ProductId'，index:'ProductId'，hidden:true}，
{name:'OldProductId'，index:'OldProductId'，hidden:true}，
{name:'CategoryName'，index:'CategoryName'，hidden:true}
],
寻呼机：$（“#收藏夹寻呼机”），
pginput:false，
rowNum:1000，
viewrecords：是的，
multiselect:true，//启用MultiHelp
gridview：没错，
loadonce:true，//每个
标题：“产品清单”，
loadError:函数（jqXHR、textStatus、errorshown）{
//删除错误div（如果存在）
$（“#”+this.id+“_err”）.remove（）；
//在网格前插入带有错误说明的div
最近的（'div.ui-jqgrid'）。之前(
'' +
decodeErrorMessage（jqXHR，textStatus，errorSprown）+''）
},
loadComplete:函数（）{
//删除错误div（如果存在）
$（“#”+this.id+“_err”）.remove（）；
//调整栅格的高度和宽度
//$（“#grid”）.jqGrid（'setGridHeight'，Math.min（400，parseInt（jQuery（'ui jqGrid btable”）.css（'height'））；//有效
//$（.ui jqgrid bdiv”）.css（'height'，jQuery（'favoriteGrid”）.css（'height'）；
var gr=jQuery（“#favoriteGrid”）；
固定网格高度（gr）；
},
ondblClickRow：函数（rowid、ri、ci）{
//详细信息视图的弹出模式对话框
}
}).jqGrid（'navGrid'，'favoritePager'，
{add:false，edit:false，del:false，search:true，refresh:false}，
{},
{},
{},
{multipleSearch:true}，
{});
//添加搜索
$（“#我的搜索”）。按钮（）。单击（函数（）{
var text=$（“#searchText”）.val（）；
var postdata=grid.jqGrid（'getGridParam'，'postdata'）；
//建立过滤器
//['equal'、'not equal'、'less'、'less or equal'、'greater'、'greater or equal'、'begin with'、'is in'、'is not in'、'ends with'、'not end with'、'contains'、'not contains']
//[eq'、'ne'、'lt'、'le'、'gt'、'ge'、'bw'、'bn'、'in'、'ni'、'ew'、'en'、'cn'、'nc']
var myfilter={groupOp:“或”，规则：[]}；
push（{field:“ItemNum”，op:“cn”，data:text}）；
push（{field:“BrandName”，op:“cn”，data:text}）；
myfilter.rules.push（{field:“ProducNa