如何在 jqgrid 插件中实现实时搜索？

Question

在 jqgrid 插件中实现“按键”过滤的真正方法是什么？ 我有文本输入字段，我需要通过自定义 jqgrid-table 列在此输入中过滤按键结果。

filterToolbar 方法为每一列添加了搜索字段，但我需要一个全局搜索字段来按三个自定义列进行过滤。

例如：

grid.jqGrid({
    url: '/url/to/json',
    datatype: 'json',
    loadonce: true,
    colModel: [
        { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date' },
        { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text' },
        { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer' },
        { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
        { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
        { label: 'Flight Dates', name: 'startDate', width: 15, sorttype: 'date' }
    ],
    autowidth: true,
    ...
});

我需要按“名称”和“广告商”属性对表格进行实时排序。

UPD。我找到了answer，但它在我的 jqGrid 表中不起作用。 我的代码在这里：

var grid = $("#jqGrid");

            grid.jqGrid({
                url: '/reportingservice/api/cmp/tagCampaignList',
                datatype: 'json',
                loadonce: true,
                colModel: [
                    { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false },
                    { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat },
                    { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false },
                    { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
                    { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
                    { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false }
                ],
                autowidth: true,
                height: 500,
                resizable: false,
                rowNum: 50,
                groupColumnShow: false,
                pager: '#jqGridPager',
                pgtext: '{0}',
                toolbar: [true, "top"],
                loadComplete: function () {
                }
            });

            // live search
            $('#t_' + $.jgrid.jqID(grid[0].id))
                .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;" +
                    "</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;" +
                    "<button id=\"globalSearch\" type=\"button\">Search</button></div>"));


            $("#globalSearchText").keypress(function (e) {
                var key = e.charCode || e.keyCode || 0;
                if (key === $.ui.keyCode.ENTER) { // 13
                    $("#globalSearch").click();
                }
            });

            $("#globalSearch").button({
                icons: { primary: "ui-icon-search" },
                text: false
            }).click(function () {
                var rules = [], i, cm,
                    postData = grid.jqGrid("getGridParam", "postData"),
                    colModel = grid.jqGrid("getGridParam", "colModel"),
                    searchText = $("#globalSearchText").val(),
                    l = colModel.length;

                console.log(searchText);

                for (i = 0; i < l; i++) {
                    cm = colModel[i];
                    if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
                        rules.push({
                            field: cm.name,
                            op: "cn",
                            data: searchText
                        });
                    }
                }
                postData.filters = JSON.stringify({
                    groupOp: "OR",
                    rules: rules
                });
                grid.jqGrid("setGridParam", { search: true });
                grid.trigger("reloadGrid", [
                    {page: 1, current: true}
                ]);
                return false;
            });

Answer 1

一个。在模板中添加输入：

<input id="globalSearchText" class="x-campaigns-filter" type="text" placeholder="Filter by Name, Status or Advertiser">

b.自定义您的过滤器规则。 search: false 表示禁用此字段中的搜索。

var grid = $("#jqGrid");

grid.jqGrid({
    url: '/reportingservice/api/cmp/tagCampaignList',
    datatype: 'json',
    loadonce: true,
    colModel: [
        { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false },
        { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat },
        { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false },
        { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
        { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
        { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false }
    ],
    autowidth: true,
    height: '100%',
    resizable: false,
    rowNum: 50,
    groupColumnShow: false
});

$("#globalSearchText").keyup(function () {
    var rules = [], i, cm,
        postData = grid.jqGrid("getGridParam", "postData"),
        colModel = grid.jqGrid("getGridParam", "colModel"),
        searchText = $("#globalSearchText").val(),
        l = colModel.length;

    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }

    $.extend (postData, {
        filters: {
            groupOp: "OR",
            rules: rules
        }
    });

    grid.jqGrid("setGridParam", { search: true, postData: postData });
    grid.trigger("reloadGrid", [{page: 1, current: true}]);
    return false;
});