我正在为 Jquery 库使用 Kendo 网格 UI。
我需要使用网格的列过滤器菜单下拉复选框执行以下两件事：
1) 复选框按其值的字母顺序排序（默认情况下按网格的数据源排序值排序）。
2) 根据第一个复选框的过滤器选择过滤所有其他列的复选框值。
【问题讨论】：
标签： jquery kendo-ui kendo-grid
这是一个排序和过滤的例子。您只需将可过滤和可排序添加到您的 kendoGrid 初始化。
$("#grid").kendoGrid({
dataSource: {
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
pageable: true
});
【讨论】：
工作演示：https://codepen.io/ezanker/pen/PRwPLo
要对复选框进行排序，您可以使用 filterMenuInit event。将所有 LI 项放入一个数组并对其进行排序，然后将它们添加回 UL。在此示例中，我将 Select All 选项保留在第一个位置：
filterMenuInit: function(e) {
var items = e.container.find("li").get();
items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
var ul = e.container.find("ul");
$.each(items, function(i, li){
if ($(li).find('.k-check-all').length > 0){
ul.prepend(li); //keep select all first
} else {
ul.append(li); // This moves theli from the old spot
}
});
}, //end filterMenuInit
要将一列中的过滤器选择应用于所有列，请使用 fiter event。在这里，我遍历其他列并为它们构建相同的过滤器。鉴于列过滤器是ANDed，只会返回具有相同值的行，即在示例中检查第一个列过滤器中的item1，并且只显示所有列都有item1的一行。如果您想要 OR，请将 thefilter.logic = "and"; 更改为 thefilter.logic = "or";
filter: function(e) {
grid = e.sender;
if (e.filter == null) {
grid.dataSource.filter(null);
grid.refresh();
$("form.k-filter-menu button[type='reset']").trigger("click");
} else {
//build filters object for all fields
var thefilter = {};
thefilter.logic = "and";
thefilter.filters = [];
for (var i=0; i<colFields.length; i++){
if (e.field == colFields[i]) continue;
var colfilt = {"logic": e.filter.logic};
var filters = [];
for (var j=0; j<e.filter.filters.length; j++){
var filt = {};
filt.field = colFields[i];
filt.operator = e.filter.filters[j].operator;
filt.value = e.filter.filters[j].value;
filters.push(filt);
}
colfilt.filters = filters;
thefilter.filters.push(colfilt);
}
grid.dataSource.filter(thefilter);
}
}//end filter
注意：清除一列中的过滤器不会清除其他列中的过滤器。你需要解决这个问题。
【讨论】：