Kendo UI 分组过滤器答案

【问题标题】：KendoUI grouped filtersKendo UI 分组过滤器
【发布时间】：2016-04-16 14:58:46
【问题描述】：

我正在尝试为 KendoUI 网格制作分组过滤器。我必须创建一个按名称过滤网格的文本字段和一个按库存单位过滤网格的剑道数字字段。

如何制作分组过滤器？

我尝试了以下方法，但它不起作用 - 错误的请求 404 错误：

$('body').bind('keyup mouseup', '#UnitsInStock', function () {
  var value = $('#UnitsInStock').val();
  var val = $('#ProductName').val();


  if (value) {
    grid.data("kendoGrid").dataSource.filter(myFilters(val, value));
  } else {
    grid.data("kendoGrid").dataSource.filter();
  }

});

function myFilters(name='', price='') {


  var filters = {
    logic: "or",
    filters: [
      { field: "ProductName", operator: "startswith", value: name},
      { field: "UnitsInStock", operator: "gte", value: price}
    ]                                        


  }
  return filters;

}

<div id="grid"></div>
  <script type="text/x-kendo-template" id="template">
       <div class="toolbar">
      <label for="category">Search by Product Name:</label>
      <input type="search" id="ProductName" />
       <input id="UnitsInStock"  type="number" />
    </div>
  </script>

【问题讨论】：

标签： javascript filter kendo-ui grid

【解决方案1】：

由于您需要过滤多种类型的字段，因此请确保在创建过滤器对象时保留这些类型。例如，您可以像这样预定义过滤器字段..

var filterFields = [{ field: "Units", type: "number" }, { field: "Name", type: "string" }]

并获取用户输入

var searchString = // user input

以及生成与此类似的过滤器的方法

var getFilter = function (filterFields, searchString) {
        var filterInt = function (value) {
            if (/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
                return true;
            return false;
        }

        var filters = [];
        var i = 0;
        for (var i = 0; i < filterFields.length; i++) {
            if (filterFields[i].type === "string") {
                filters.push({
                    field: filterFields[i].field,
                    operator: "startswith",
                    value: searchString.toString()
                });
            }
            if (filterFields[i].type === "number") {
                if (filterInt(searchString)) {
                    filters.push({
                        field: filterFields[i].field,
                        operator: "gte",
                        value: parseInt(searchString)
                    });
                }
            }
        }

        return {
            logic: "or",
            filters: filters
        };
    }

最后，过滤你的网格

grid.data("kendoGrid").dataSource.filter(getFilter(filterFields, searchString))

另外，为了确保您的端点正常工作，请使用邮递员等工具并执行 GET (http://............./Units?$filter=Id eq 1 and Name eq 'name')。

【讨论】：