下面的代码不适用于本地数据的过滤器工具栏。
请帮我解决这个问题。 我是jqgrid的新手。我想让我的网格在本地过滤。下面的代码来自小提琴中给出的一个例子。
我即将做同样的事情，但结果是，我的网格中有两个过滤器。如果我选择两个过滤器，则只有网格正确过滤数据。但是，如果我只选择一个过滤器，那么网格不会得到过滤器。虽然第二个过滤器的值是“无过滤器”
var serverResponse = [
{id: 10, label: 10, value: "Abc"},
{id: 20, label: 20, value: "Xyz"},
{id: 30, label: 30, value: "Abc"},
{id: 40, label: 40, value: "Xyz"},
{id: 50, label: 50, value: "Abc"},
{id: 60, label: 60, value: "Abc"},
{id: 70, label: 70, value: "Xyz"},
{id: 80, label: 90, value: "Abc"},
{id: 90, label: 10, value: "Xyz"},
{id: 100, label: 20, value: "Abc"},
{id: 110, label: 10, value: "Abc"},
{id: 120, label: 30, value: "Xyz"},
{id: 130, label: 10, value: "Abc"},
{id: 140, label: 60, value: "Xyz"},
{id: 150, label: 10, value: "Abc"}
];
$("#grid").jqGrid({
url: "/echo/json/", // use JSFiddle echo service
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
mtype: "POST", // needed for JSFiddle echo service
datatype: "json",
colNames: ["Label", "Value"],
colModel: [
{name: "label", width: 70, template: "integer" },
{name: "value", width: 200 }
],
loadonce: true,
pager: true,
rowNum: 10,
rowList: [5, 10, "10000:All"],
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
shrinkToFit: false,
autoResizing: { compact: true },
beforeProcessing: function (data) {
var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [], $self = $(this);
for (i = 0; i < data.length; i++) {
item = data[i];
if (!labelMap[item.label]) {
labelMap[item.label] = true;
labels += ";" + item.label + ":" + item.label;
}
if (!valueMap[item.value]) {
valueMap[item.value] = true;
values.push(item.value);
}
}
$self.jqGrid("setColProp", "label", {
stype: "select",
searchoptions: {
value: labels,
sopt: ["eq"]
}
});
$self.jqGrid("setColProp", "value", {
stype: "select",
searchoptions: {
value: values,
sopt: ["eq"]
}
});
// one should use stringResult:true option additionally because
// datatype: "json" at the moment, but one need use local filtreing later
$self.jqGrid("filterToolbar", {stringResult: true });
}
});
答案 0 :(得分：1)
首先，我们可以看到你获得了为JFSiddle创建的代码，它使用了JSFiddle的Echo服务，你尝试使用if whiteout JSFiddle。这是不对的。如果您需要使用本地数据（datatype: "local"），则应删除对Echo服务的引用。
相应的代码看起来像
$(function () {
"use strict";
var mydata = [
{id: 10, label: 10, value: "Abc"},
{id: 20, label: 20, value: "Xyz"},
{id: 30, label: 30, value: "Abc"},
{id: 40, label: 40, value: "Xyz"},
{id: 50, label: 50, value: "Abc"},
{id: 60, label: 60, value: "Abc"},
{id: 70, label: 70, value: "Xyz"},
{id: 80, label: 90, value: "Abc"},
{id: 90, label: 10, value: "Xyz"},
{id: 100, label: 20, value: "Abc"},
{id: 110, label: 10, value: "Abc"},
{id: 120, label: 30, value: "Xyz"},
{id: 130, label: 10, value: "Abc"},
{id: 140, label: 60, value: "Xyz"},
{id: 150, label: 10, value: "Abc"}
];
$("#grid").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Label", "Value"],
colModel: [
{name: "label", width: 70, template: "integer" },
{name: "value", width: 200 }
],
pager: true,
rowNum: 10,
rowList: [5, 10, "10000:All"],
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
shrinkToFit: false,
autoResizing: { compact: true }
}).jqGrid("filterToolbar");
});
请参阅演示https://jsfiddle.net/0bfnt8ym/
如果您想创建具有唯一值的选择，那么您可以在创建网格之前执行：
$(function () {
"use strict";
var mydata = [
{id: 10, label: 10, value: "Abc"},
{id: 20, label: 20, value: "Xyz"},
{id: 30, label: 30, value: "Abc"},
{id: 40, label: 40, value: "Xyz"},
{id: 50, label: 50, value: "Abc"},
{id: 60, label: 60, value: "Abc"},
{id: 70, label: 70, value: "Xyz"},
{id: 80, label: 90, value: "Abc"},
{id: 90, label: 10, value: "Xyz"},
{id: 100, label: 20, value: "Abc"},
{id: 110, label: 10, value: "Abc"},
{id: 120, label: 30, value: "Xyz"},
{id: 130, label: 10, value: "Abc"},
{id: 140, label: 60, value: "Xyz"},
{id: 150, label: 10, value: "Abc"}
],
buildUniqueValues = function (data, propName) {
var i, item, valueMap = {}, values = [":All"], dataLength = data.length, value, lowCaseValue;
for (i = 0; i < dataLength; i++) {
value = data[i][propName];
if (value !== undefined) {
lowCaseValue = typeof value === "string" ? value.toLowerCase() : value;
if (valueMap[lowCaseValue] === undefined) {
valueMap[lowCaseValue] = lowCaseValue;
values.push(lowCaseValue + ":" + value);
}
}
}
return values.join(";");
};
$("#grid").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Label", "Value"],
colModel: [
{ name: "label", width: 70, template: "integer",
stype: "select",
searchoptions: {
value: buildUniqueValues(mydata, "label"),
sopt: ["eq", "ne"]
} },
{ name: "value", width: 200,stype: "select",
searchoptions: {
value: buildUniqueValues(mydata, "value"),
sopt: ["eq", "ne"]
} }
],
pager: true,
rowNum: 10,
rowList: [5, 10, "10000:All"],
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
shrinkToFit: false,
autoResizing: { compact: true }
}).jqGrid("filterToolbar");
});