我正在使用MVVM模式构建Kendo Grid，我想要2个自定义过滤器：
extra = false和自定义运算符的通用网格过滤器与此Kendo Grid演示非常相似。我只是似乎无法使用data-filterableattribute或filterable ui在列上使用MVVM模式：
<div data-role="grid"
data-filterable="customGridFilter"
data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: '{ ui: customNameFilter }' },
{ field: 'Value' }
]"
data-bind="source: gridDs">
</div>
我创建了一个JS Fiddle来说明我要做什么。
其实它只是错过了一点
data-filterable="customGridFilter"应该成为data-filterable="true"，更改为jQuery 1.9.1后，它的工作原理如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<script>
var customNameFilter = customNameFilter || null;
</script>
<div data-role="grid" data-filterable="true" data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: { ui: customNameFilter } },
{ field: 'Value' }
]" data-bind="source: gridDs"></div>
</div>
<script>
$(document).ready(function() {
customNameFilter = function(e) {
console.log("test")
e.kendoComboBox({
dataSource: {
data: [{
Id: 1,
Name: "Test1"
}, {
Id: 2,
Name: "Test2"
}, {
Id: 3,
Name: "Test3"
}]
},
dataValueField: "Id",
dataTextField: "Name",
filter: "contains"
});
};
var viewModel = kendo.observable({
gridDs: new kendo.data.DataSource({
data: [{
Id: 1,
Name: "Test1",
Value: 3
}, {
Id: 2,
Name: "Test2",
Value: 5
}, {
Id: 3,
Name: "Test3",
Value: 2
}, {
Id: 4,
Name: "Test4",
Value: 7
}]
}),
customGridFilter: {
extra: false,
operators: {
string: {
contains: "Contains",
doesnotcontain: "Does not contain",
eq: "Is equal to",
neq: "Is not equal to",
startswith: "Starts with",
endswith: "Ends with"
}
}
},
});
kendo.bind($('#test'), viewModel);
});
// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;
</script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句