free-jqGrid 4.13.4多选工具栏过滤器不起作用 [英] free-jqGrid 4.13.4 multiselect toolbar filter not working
问题描述
我已经查看了所有的问题与解答；有关在jqGrid的过滤器工具栏中使用Multiselect窗口小部件的信息.我注意到，在几乎所有解决方案中，jqGrid版本和jquery版本都不是当前版本.我正在使用jqGrid(4.13.4)和jquery(3.1.1)和jqueryUI(1.12.1)的最新版本.
I have looked at all of the Q & A about the use of the Multiselect widget in the filter toolbar of jqGrid. I have noticed that in almost all the solutions, the jqGrid versions and the jquery versions are not current ones. I am using the most current versions of both jqGrid (4.13.4) and jquery (3.1.1) and jqueryUI (1.12.1).
我在我的JavaScript中尝试了此处的示例代码.它加载正常，但是当我尝试从多选中选择任何值时，即使从多选中取消选择值，网格也会清除并保持清除状态.
I have tried the sample code from here in my javascript. It loads fine, but when I try to choose any of the values from the multiselect, the grid clears and remains cleared even when deselecting the values from the multiselect.
我只想确保此解决方案可与我正在使用的free-jqGrid，jquery和jqueryUI的最新版本一起使用.
I just want to make sure that this solution works with the most current versions of free-jqGrid, jquery, and jqueryUI that I am using.
推荐答案
我在旧答案.更高版本的免费jqGrid支持"in"操作，这在使用Multiselect小部件的情况下非常实用.
I posted an example of the usage of Multiselect widget in free jqGrid in the old answer. The later versions of free jqGrid suports "in" operation, which is very practical in case of usage Multiselect widget.
我创建了 新演示 为您服务，如下图所示.
I created the new demo for you, which looks like on the picture below.
它从 testJsonData.json 加载输入数据，找到beforeProcessing内ship_via列的所有唯一值，并设置基于这些值构建的searchoptions.value.该演示使用了来自GitHub的免费jqGrid的最新代码(最新版本为4.13.4).我计划很快从GitHub发布当前代码为4.13.5或4.14.0.该演示使用了Eric Hyndse创建的 Multiselect小部件的当前v1.17版本. .演示的代码是
It loads the input data from 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 creates by Eric Hyndse. The code of the demo is
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 });
这篇关于free-jqGrid 4.13.4多选工具栏过滤器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
