Kendo 网格过滤器值

Question

我目前正在尝试将所有应用的过滤器记录到控制台以供日后使用。我的网格声明的过滤器部分设置如下：

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);
      }
    }

这直接取自文档中的 dojo 示例。但是我没有将任何内容记录到控制台。我在 I.E 工作，如果有帮助，我运行 chrome 的 dojo 并且它有效。

Answer 1

请检查您的IE浏览器版本。来自 Kendo official document 和我本地的测试结果。我发现代码在我的 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, because, when I using dojo on IE 11, everything works well, but if I change the document mode to IE 10 (via F12 developer tools), it will show some JS error, like this。因此，最好在本地应用程序上测试您的代码。

Kendo 网格过滤器值

Kendo Grid Filter values

internet-explorer

kendo-ui-grid