Пожалуйста, проверьте версию вашего браузера IE. Из официального документа по кендо и результатов теста на моем локальном . Я обнаружил, что код хорошо работает в моем браузере IE (IE 9 ~ IE 11). Вы можете попробовать использовать инструменты разработчика F12, чтобы проверить, содержит ли он какую-либо ошибку.
Код, как показано ниже:
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
<div id="example">
<div id="grid"></div>
<script>
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
CategoryID: {
field: "CategoryID",
type: "number",
defaultValue: function(e) {
if(typeof this.CategoryID === "function") {
var grid = $("#grid").data("kendoGrid");
var ds = grid.dataSource;
var filter = ds.filter();
if(filter && filter.filters[0].field === "CategoryID") {
return filter.filters[0].value;
} else {
return 1;
}
}
}
},
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
filter: function(e) {
if (e.filter == null) {
console.log("filter has been cleared");
} else {
console.log(e.filter.logic);
console.log(e.filter.filters[0].field);
console.log(e.filter.filters[0].operator);
console.log(e.filter.filters[0].value);
}
},
groupable: true,
pageable: true,
height: 540,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name", filterable: false },
{ field: "CategoryID", width: "200px", values: categories, title: "Category" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px" , filterable: false},
{ command: "destroy", title: " ", width: "110px"}],
editable: "popup"
});
});
</script>
</div>
</body>
результат такой:
Примечание: протестируйте код в локальном приложении вместо использования dojo, потому что, когда я используя dojo в IE 11, все работает хорошо, но если я изменю режим документа на IE 10 (через инструменты разработчика F12), он покажет некоторую ошибку JS, вот так. Так что лучше протестировать свой код на локальном приложении.
person
Zhi Lv
schedule
14.01.2019
