Question

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

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

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

Answer 1

我在the old answer的免费jqGrid中发布了一个使用Multiselect小部件的示例。免费jqGrid的更高版本支持"in"操作，这在使用Multiselect小部件时非常实用。

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

它从testJsonData.json加载输入数据，找到ship_via内beforeProcessing列的所有唯一值，并根据值设置searchoptions.value。该演示使用来自GitHub的免费jqGrid的最新代码（它最近为4.13.4）。我打算很快将GitHub中的代码发布为4.13.5或4.14.0。该演示使用Eric Hyndse创建的Multiselect widget的当前v1.17版本。演示代码是

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

以下是下拉列表中“任意”选项的修复，以返回选择控件中的所有选项。

修改代码的这一部分：

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);},

重要的部分是添加规则的检查并为操作员返回不相等（“ne”）。这将创建一个规则，过滤掉所有不等于空字符串的选项。这应该返回所有选择选项，换句话说，将select重置为初始状态，显示select中的所有选项，它将返回网格中的所有记录。希望这有助于将来。

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

2 个答案: