free-jqGrid 4.13.4多选工具栏filter无法正常工作
我查看了有关在jqGrid的filter工具栏中使用Multiselect小部件的所有问答。 我注意到在几乎所有的解决方案中，jqGrid版本和jquery版本都不是当前版本。 我正在使用jqGrid（4.13.4）和jquery（3.1.1）以及jqueryUI（1.12.1）的最新版本。
我已经在我的javascript中尝试了示例代码。 它加载正常，但是当我尝试从多选中选择任何值时，即使取消选择多选中的值，网格也会清除并保持清除状态。
我只是想确保这个解决方案适用于我正在使用的最新版本的free-jqGrid，jquery和jqueryUI。
我在旧答案中发布了一个在免费jqGrid中使用Multiselect小部件的例子。 免费jqGrid的更高版本支持"in"操作，这在使用Multiselect小部件的情况下非常实用。
我为你创建了新的演示 ，如下图所示。
它从testJsonData.json加载输入数据，在beforeProcessing中找到ship_via列的所有唯一值，并设置基于这些值构建的searchoptions.value 。 该演示使用来自GitHub的最新免费jqGrid代码（最新版本为4.13.4）。 我打算很快将GitHub中的代码发布为4.13.5或4.14.0。 该演示使用Eric Hyndse创建的当前v1.17版本的Multiselect 小部件 。 演示的代码是
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 });
以下是下拉列表中“任意”选项的修复，以返回选择控件中的所有选项。
修改代码的这一部分：
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中的所有选项，它将返回网格中的所有记录。 希望这有助于将来。