我们已经使用 jqGrid 之外的按钮和滑块等 jquery.ui 组件实现了过滤（在网上商店中）。列表（网格）的可用过滤器取决于当前处于活动状态的类别。当按钮和滑块被按下/使用时，我们创建规则并将它们添加到过滤器属性中，并在必要时将它们删除。
在大多数情况下，这就像一个魅力，但是当为包含从 < 100 到 > 100 的值的类别创建特定过滤器时，如果我们使用滑块进行过滤，结果会出现奇怪的情况。一旦我们开始拉动滑块的下部，当较低的值大于最小值（即 < 100）但小于 100 时，整个结果集就会消失。在这种情况下，最小值是 97,6 和对于滑块上的值 98 和 99，结果为空。但是当滑块值变为 100 或更大时，结果是正确的。我还将值低于 100 的文章更改为 > 100，然后一切都按预期工作。
当拉动滑块的下端时，我们向过滤器添加一个“ge”规则，当我们拉动较高值的一端时，我们添加一个“le”规则。
我们使用 jqgrid 4.3.1，我今天也尝试使用 4.4.4 版本，结果相同。
我们也使用瑞典语语言环境，如果这与 jqGrid 如何解释网格中的值有关。
更新（代码）：
首先，我们从要在网格中显示的项目集合中获取最小值和最大值。
else if (dynamicFilters[l].Type == "slider") {
//Get the smallest and the biggest value that we should be able to filter on
//Parse the value so that there are no non-numberic characters, and also replace ',' with '.' so that it can be converted to a numeric value
var currentValue = property.Value.replace(/[^0-9.,]/g, '').replace(/[,]/g, '.');
var index = property.Value.indexOf(".");
if (index >= 0) {
currentValue = property.Value.substring(0, index);
}
currentValue = Number(currentValue);
//Specific case where no value has been set
if (dynamicFilters[l].Values[0] == 0 && dynamicFilters[l].Values[1] == 0) {
dynamicFilters[l].Values[0] = currentValue;
dynamicFilters[l].Values[1] = currentValue;
} else {
//Else check if the value is either smaller or larger than those in the array
if (dynamicFilters[l].Values[0] > currentValue) {
dynamicFilters[l].Values[0] = currentValue;
}
if (dynamicFilters[l].Values[1] < currentValue) {
dynamicFilters[l].Values[1] = currentValue;
}
}
}
这似乎工作正常，我已经在 Chrome devtools 中调试过它并且值是正确的。
然后我们在 GUI 中创建实际的滑块：
else if (filter.Type == "slider") {
//Create the slider filters
//Start the container for the slider filter, the second div is then used to create the slider with the jQuery UI control
$("#dynamicFilters").append('<div class="dynamic-filter"><strong>' + filter.DisplayName + '</strong> <input type="text" id="' + filterId + '_amount" class="dynamic-filter-amount"></input><div id="' + filterId + '" class="dynamic-slider-filter" filter-property="' + filter.ParameterName + '" filter-type="' + filter.Type + '" filter-unit="' + filter.Unit + '" filter-value="' + filter.Values[0] + ';' + filter.Values[1] + '"></div></div>');
var filters = currentProfile.Filters;
var minValue = -1;
var maxValue = -1;
//Check if there are any values saved for this very filter, if so set the values of the slider
if (filters != null && !currentProfile.FilterListUrlChanged) {
for (var j = 0; j < filters.length; j++) {
if (filters[j].Field == filter.ParameterName && filters[j].OperatorType == "ge") {
minValue = filters[j].Data;
}
if (filters[j].Field == filter.ParameterName && filters[j].OperatorType == "le") {
maxValue = filters[j].Data;
}
}
} else {
minValue = filter.Values[0];
maxValue = filter.Values[1];
}
if (minValue == -1) {
minValue = filter.Values[0];
}
if (maxValue == -1) {
maxValue = filter.Values[1];
}
//Create the actual slider
if (filter.Values[0] != filter.Values[1]) {
$("#" + filterId).slider({
range: true,
min: parseInt(filter.Values[0]),
max: parseInt(filter.Values[1]),
values: [parseInt(minValue), parseInt(maxValue)],
slide: function (event, ui) {
var filterProperty = $(this).attr("filter-property");
var filterType = $(this).attr("filter-type");
var filterUnit = $(this).attr("filter-unit");
$("#" + filterProperty + "_amount").val("(" + ui.values[0] + " " + filterUnit + " - " + ui.values[1] + " " + filterUnit + ")");
articleListFilter._applyFilter(that, filterProperty, filterType, [ui.values[0], ui.values[1]]);
},
stop: function (event, ui) {
//Add the slider filter to the current profile, but only if they have actually moved from their initial position
if (ui.values[0] != $(this).slider("option", "min")) {
articleListFilter._addProfileFilter(document.URL, $(this).attr("filter-property"), "ge", $(this).attr("filter-type"), ui.values[0]);
}
else {
articleListFilter._removeProfileFilter(document.URL, $(this).attr("filter-property"), $(this).attr("filter-type"), "ge", ui.values[0]);
}
if (ui.values[1] != $(this).slider("option", "max")) {
articleListFilter._addProfileFilter(document.URL, $(this).attr("filter-property"), "le", $(this).attr("filter-type"), ui.values[1]);
}
else {
articleListFilter._removeProfileFilter(document.URL, $(this).attr("filter-property"), $(this).attr("filter-type"), "le", ui.values[1]);
}
}
});
$("#" + filterId + "_amount").val("(" + $("#" + filterId).slider("values", 0) + " " + filter.Unit + " - " + $("#" + filterId).slider("values", 1) + " " + filter.Unit + ")");
}
}
这部分也有效（据我所见），值设置正确，并且它适用于我们尝试使用滑块过滤的所有其他属性。即使范围是 < 100 到 > 100。
_applyFilter 函数如下所示：
_applyFilter: function (that, property, type, value) {
var myfilter = {};
//Get a new fresh filter or the current one
if (that.data("Filter") == null) {
myfilter.filter = { groupOp: "AND", rules: [] };
myfilter.HasPriceFilter = false;
myfilter.HasBrandFilter = false;
myfilter.HasSmallFilter = false;
myfilter.HasMediumFilter = false;
myfilter.HasLargeFilter = false;
myfilter.HasAdditionFilter = false;
myfilter.HasMiscFilter = false;
} else {
myfilter = that.data("Filter");
}
myfilter = articleListFilter._filterDynamic(myfilter, property, type, value);
//Must reload here so that the paging won't get stuck on a page that has no items. Must be done before the filter is set.
$("#articles").trigger("reloadGrid");
that.data("Filter", myfilter);
articleListFilter._setFilter(that, myfilter.filter, 1);
}
_filterDynamic 函数的工作方式如下：
else if (type == "slider") {
//Need to check if there already is a filter for the same property and type, if the data should be changed or pushed into the rules array
var addMinRule = true;
var addMaxRule = true;
var minValue = $("#" + property).slider("option", "min");
var maxValue = $("#" + property).slider("option", "max");
for (var j = 0; j < myFilter.filter.rules.length; j++) {
var rule = myFilter.filter.rules[j];
if (rule.field == property && rule.op == "ge") {
rule.data = value[0];
addMinRule = false;
}
else if (rule.field == property && rule.op == "le") {
rule.data = value[1];
addMaxRule = false;
}
}
if (addMinRule) {
myFilter.filter.rules.push({ field: property, op: "ge", data: value[0] });
}
if (addMaxRule) {
myFilter.filter.rules.push({ field: property, op: "le", data: value[1] });
}
if (value[0] == minValue || value[1] == maxValue) {
for (var k = 0; k < myFilter.filter.rules.length; k++) {
var removeRule = myFilter.filter.rules[k];
if (removeRule.field == property && removeRule.op == "ge") {
if (value[0] == minValue) {
myFilter.filter.rules.splice(k, 1);
}
}
else if (removeRule.field == property && removeRule.op == "le") {
if (value[1] == maxValue) {
myFilter.filter.rules.splice(k, 1);
}
}
}
}
}
欢迎任何帮助或类似的故事！
亲切的问候，比约恩