Значения фильтра Kendo Grid - PullRequest
Новая
       24

Значения фильтра Kendo Grid

0 голосов
/ 11 января 2019

В настоящее время я пытаюсь записать все примененные фильтры на консоль для дальнейшего использования. У меня есть раздел фильтра моего объявления сетки, настроенный так: 

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

Это взято непосредственно из примера додзё в документации. Однако я не получаю ничего зарегистрированного в консоль. Я работаю в I.E, если это помогает, я запустил додзё в Chrome, и оно работает.

1 Ответ

0 голосов
/ 14 января 2019

Пожалуйста, проверьте версию браузера IE. Из официального документа Kendo и результатов теста на моем местном. Я обнаружил, что код хорошо работает в моем браузере 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>

результат такой:

enter image description here

Примечание: пожалуйста, проверьте код в локальном приложении, вместо использования dojo , потому что, когда я использую dojo в IE 11, все работает хорошо, но если я изменю режим документа на IE 10 ( через инструменты разработчика F12), он покажет некоторую ошибку JS, , как это . Итак, лучше протестировать свой код в локальном приложении.

...