具有多选列的剑道网格自定义过滤功能
Custom filter function for Kendo Grid with multiselect column
我需要编写一个自定义过滤函数。我有一个剑道网格,有多个列,即姓名、年龄、城市。名称列应该是多选的。现在,在进行筛选时,整个网格上的逻辑应该是"and",但特定列(名称)应该有一个"or"逻辑。
我看过这篇文章和其他几篇类似的文章。在这个例子中,telerik建议删除数据绑定属性
element.removeAttr("data-bind");
这非常有效,直到我想清除多选字段中的所有标记。仅供参考,网格配置为filterMode:"row"。在这种情况下,标签根本不清除。
现在,我正在尝试编写一个自定义的过滤函数。以下是我目前所拥有的:
filterable: {
multi: true,
cell: {
template: function getteamplate(args) {
args.element.kendoMultiSelect({
dataSource: args.dataSource,
dataTextField: "name",
dataValueField: "name",
change: function change(e) {
var dataSource = $scope.grid.dataSource;
// if filters are not yet set, do so now
if (!dataSource.filter()) {
$scope.grid.dataSource.filter({
logic: "and",
filters: []
});
}
var dataFilters = dataSource.filter().filters;
var values = this.value();
if (values.length > 0) {
$log.log("filtering");
var newFilter = {
field: "name",
operator: function operator(item, value) {
$log.log("Item: " + item);
$log.log(value());
var found = false;
value().forEach(function forEach(element) {
$log.log("Value: " + element);
if (item.indexOf(element) !== -1) {
found = true;
}
});
return found;
},
value: values,
fieldName: "dataSource"
};
dataFilters.push(newFilter);
$log.log(dataFilters);
}
dataSource.filter({
logic: "and",
filters: dataFilters
});
}
});
//args.element.removeAttr("data-bind");
},
showOperators: false
}
}
值得注意的几件事
- 我的自定义过滤器函数似乎从未执行过,因为我在控制台中看不到任何内容
在这个论坛帖子之后,这个代码看起来非常直接:
运算符:函数(项,值){//实现你的逻辑}
只是它没有很好地记录下来,我不确定参数"item"answers"value"是什么,或者它们来自哪里。
有点晚了,但没关系。为了正确清除标签,我添加了以下内容
- 向multiselect对象的dom元素添加了一个id属性,如下所示
function getteamplate(args) {
args.element[0].id = "<<filterElementID>>";
args.element.kendoMultiSelect({
dataSource: args.dataSource,
.............
- 在网格的dataSource dataBound事件中添加了一个检查,这样只要dataSource筛选器不包含"多选"筛选器(filter.field=name)清除dom元素的值
if(!_.find(this.dataSource.filter() ? this.dataSource.filter().filters : [] ,
function(filter){
return filter.field == "name"
}))
$("#<<filterElementID>>").data().kendoMultiSelect.value([]);
相关文章:
- ui网格:在自定义表头模板中触发排序
- Kendo UI网格自定义编辑按钮
- Kendo UI网格自定义验证消息
- 具有层次结构的网格自定义命令正在调用 javascript 函数两次
- 在剑道网格自定义弹出模板中设置默认值的任意方法
- 剑道网格自定义编辑器下拉列表;t反映选择
- extJs 4网格自定义-末尾的总行
- 具有多选列的剑道网格自定义过滤功能
- 剑道网格自定义排序
- 剑道网格自定义列
- 如何在剑道网格自定义命令文本中添加特殊字符(i.查看/编辑)
- Telerik MVC网格-自定义过滤(客户端)
- 剑道网格自定义按钮调用Javascript函数
- 光滑网格自定义单元格标题
- KendoUI网格自定义过滤器UI
- 剑道 UI 网格自定义数据源 URL
- 剑道 UI 网格自定义命令重定向
- 剑道网格自定义过滤器菜单不工作
- 在复选框上使用数据绑定的剑道UI网格自定义过滤器
- 可能绑定剑道ui网格自定义下拉到一个id而不是一个对象