free-jqGrid 4.13.4 多选工具栏过滤器不起作用

Question

我查看了所有关于在 jqGrid 的过滤器工具栏中使用 Multiselect 小部件的问答。我注意到在几乎所有解决方案中，jqGrid 版本和 jquery 版本都不是当前版本。我使用的是 jqGrid (4.13.4) 和 jquery (3.1.1) 以及 jqueryUI (1.12.1) 的最新版本。

我已经在 javascript 中尝试了 here 中的示例代码。它加载正常，但是当我尝试从多选中选择任何值时，即使从多选中取消选择值，网格也会清除并保持清除状态。

我只是想确保此解决方案适用于我正在使用的最新版本的 free-jqGrid、jquery 和 jqueryUI。

Answer 1

我在的免费 jqGrid 中发布了一个使用多选小部件的示例。 free jqGrid以后版本支持"in"操作，在使用Multiselect widget时非常实用

我为你创建了the new demo，如下图所示。

它从 Eric Hyndse 创建的 testJsonData.json, find all unique values for ship_via column inside of beforeProcessing and set the searchoptions.value built based on the values. The demo uses the latest code of free jqGrid from GitHub (it's more recent as 4.13.4). I plan to publish soon the curent code from GitHub as 4.13.5 or 4.14.0. the demo uses the current v1.17 version of Multiselect widget 加载输入数据。演示代码为

var getUniqueNames = function (columnName, mydata) {
        var texts = $.map(mydata, function (item) {
            return item[columnName];
        }),
          uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i;

        for (i = 0; i < textsLength; i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function (uniqueNames) {
        var values = "";
        $.each(uniqueNames, function () {
            values += this + ":" + this + ";";
        });
        return values.slice(0, -1);
    },
    initMultiselect = function (searchOptions) {
        var $elem = $(searchOptions.elem),
        options = {
            selectedList: 2,
            height: "auto",
            checkAllText: "all",
            uncheckAllText: "no",
            noneSelectedText: "Any",
            open: function () {
                var $menu = $(".ui-multiselect-menu:visible");
                $menu.addClass("ui-jqdialog").width("auto");
                $menu.find(">ul").css("maxHeight", "200px");
            }
        };
        if (searchOptions.mode === "filter") {
            options.minWidth = "auto";
        }
        $elem.multiselect(options);
        $elem.siblings("button.ui-multiselect").css({
            width: "100%",
            margin: "1px 0",
            paddingTop: ".3em",
            paddingBottom: "0"
        });
    },
    setSearchSelect = function (columnName, data) {
        var values = buildSearchSelect(getUniqueNames.call(this, columnName, data));
        $(this).jqGrid("setColProp", columnName, {
            stype: "select",
            searchoptions: {
                value: values,
                sopt: ["in"],
                attr: {
                    multiple: "multiple",
                    size: 4
                },
                selectFilled: initMultiselect
            }
        });
    },
    myDefaultSearch = "cn",
    beforeProcessingHandler1 = function (data) {
        var $this = $(this), p = $this.jqGrid("getGridParam");
        // !!! it will be called only after loading from the server
        // datatype is always "json" here
        setSearchSelect.call(this, "ship_via", data);

        if (this.ftoolbar === true) {
            // if the filter toolbar is not already created
            $("#gs_" + this.id + "ship_via").multiselect("destroy");
            $this.jqGrid('destroyFilterToolbar');
        }

        if (p.postData.filters) {
            p.search = true;
        }

        $this.jqGrid("filterToolbar", {
            //stringResult: true,
            defaultSearch: myDefaultSearch,
            beforeClear: function () {
                $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    $(this).prev("select[multiple]").multiselect("refresh");
                });
            }
        });
    };

$("#list").jqGrid({
    url: "testJsonData.json",
    datatype: "json",
    colNames: ["Client", "Amount", "Tax", "Total", "Shipped via", "Notes"],
    colModel: [
        { name: "name", width: 65 },
        { name: "amount", width: 75, template: "number" },
        { name: "tax", width: 52, template: "number" },
        { name: "total", width: 65, template: "number" },
        { name: "ship_via", width: 85, align: "center" },
        { name: "note", width: 100, sortable: false }
    ],
    rowNum: 5,
    sortname: "name",
    iconSet: "fontAwesome",
    autoencode: true,
    loadonce: true,
    forceClientSorting: true, // local sorting and filtering data loaded from the server
    beforeProcessing: beforeProcessingHandler1,
    rowList: [5, 10, 20, 30, 100],
    pager: true,
    pagerRightWidth: 120, // fix wrapping or right part of the pager
    viewrecords: true,
    sortable: true
}).jqGrid("navGrid", { add: false, edit: false, del: false, search: false });

Answer 2

这里修复了 "Any" 选项下拉列表中的 return select 控件中的所有选项。

修改这段代码：

modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str,
    filters = $.parseJSON(this.p.postData.filters);
console.log(filters);
rules = filters.rules;
console.log(rules.length)
for (i = 0; i < rules.length; i++) {
    rule = rules[i];
    if (rule.data == "") {
        rule.op = "ne"; //this will return anything not equal to ""
    }
}
console.log("after splicing: " + JSON.stringify(filters))
this.p.postData.filters = JSON.stringify(filters);},

重要的部分是为运算符添加规则检查和 return 不等于 ("ne")。这将创建一个规则，过滤掉所有不等于空字符串的选项。这应该 return 所有 select 选项，换句话说，将 select 重置为其初始状态，显示 select 中的所有选项，它将 return 网格中的所有记录。希望这对以后有所帮助。

free-jqGrid 4.13.4 多选工具栏过滤器不起作用

free-jqGrid 4.13.4 multiselect toolbar filter not working

jquery

multi-select

free-jqgrid