Kendo UI Grid Multicheck 按 Id 过滤答案

【问题标题】：Kendo UI Grid Multicheck Filtering by IdKendo UI Grid Multicheck 按 Id 过滤
【发布时间】：2019-03-18 10:57:22
【问题描述】：

假设要根据一组查找值过滤我的 Kendo UI Grid 中的列。

数据源是一个对象数组，例如

const dataSource = [{id:1,name:"IRL"},{id:2,name:"UK"}]

我的 Grid 的（简化的）列布局是：

columns: [{
            field: "name",
            title: "Route",
            filterable: {
              multi: true,
              data: dataSource
            }
          }]

这将正确显示一个多重检查下拉过滤器，但我的过滤器字段名称发布回我的 api 将是“名称”，过滤器值将是例如“爱尔兰”。

我需要的是过滤器 field_name 为“id”，值为例如1，同时仍然在下拉列表中显示名称，例如“爱尔兰”。

这可能吗？我遇到了一些关于覆盖过滤器函数的引用，但我希望我可以在数据源级别执行此操作。

【问题讨论】：

标签： jquery angular kendo-ui kendo-grid

【解决方案1】：

你可以试试这个：

$(document).ready(function() {
  var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"];
  var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"];
  var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
  var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"
  ];
  var birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

  function createRandomData(count) {
    var data = [],
      now = new Date();
    for (var i = 0; i < count; i++) {
      var BirthDater = birthDates[Math.floor(Math.random() * birthDates.length)];
      data.push({
        Id: i + 1,
        FirstName: firstNames[Math.floor(Math.random() * firstNames.length)],
        LastName: lastNames[Math.floor(Math.random() * lastNames.length)],
        City: cities[Math.floor(Math.random() * cities.length)],
        Title: titles[Math.floor(Math.random() * titles.length)],
        BirthDate: BirthDater,
        Age: now.getFullYear() - BirthDater.getFullYear()
      });
    }
    return data;
  }

  $("#grid").kendoGrid({
    dataSource: {
      data: createRandomData(50),
      schema: {
        model: {
          fields: {
            City: {
              type: "string"
            },
            Title: {
              type: "string"
            },
            BirthDate: {
              type: "date"
            }
          }
        }
      },
      pageSize: 15
    },
    height: 550,
    scrollable: true,
    filterable: {
      extra: false,
      operators: {
        string: {
          startswith: "Starts with",
          eq: "Is equal to",
          neq: "Is not equal to"
        }
      }
    },
    pageable: true,
    columns: [{
        title: "Name",
        width: 160,
        filterable: false,
        template: "#=FirstName# #=LastName#"
      },
      {
        field: "City",
        width: 130,
        filterable: {
          ui: cityFilter
        }
      },
      {
        field: "Title",
        filterable: {
          ui: titleFilter // Filter like this
        }
      },
      {
        field: "BirthDate",
        title: "Birth Date",
        format: "{0:MM/dd/yyyy HH:mm tt}",
        filterable: {
          ui: "datetimepicker"
        }
      }
    ]
  });
});

function titleFilter(element) {
  element.kendoDropDownList({
    dataSource: cities,
    optionLabel: "--Select Value--"
  });
}

function cityFilter(element) {
  element.kendoDropDownList({
    dataSource: cities,
    optionLabel: "--Select Value--"
  });
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.716/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.716/styles/kendo.common.min.css" />
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

</head>

<body>

  <div id="example">
    <div id="grid"></div>
  </div>
</body>

</html>

这里，ui 属性是答案的重要部分，通过定义一个处理过滤的函数，您可以按您想要的值过滤给定的列。尝试用这种方法实现 id 过滤:)

【讨论】：

【解决方案2】：

有点老的问题，但仍然有人可能会觉得这很有用:)

上述解决方案有效，但不允许选择多个选项，这是原始问题。

Ofc 可以使用多选小部件，但如果选择了许多选项，它在菜单下拉菜单中不适合/看起来不太好。

您只需要使用默认多重过滤器的“itemTemplate”选项，如下所示：

// this generates the filter UI
function gridCheckboxFilter(dataSource, idAsValue) {

    idAsValue = (idAsValue == true);

    var valueCallback = function (o) {
      return idAsValue ? o.id : o.label;
    };

    var labelCallback = function (o) {
      return o.label;
    };

    return {
      multi: true,
      search: dataSource.length > 10,
      dataSource: dataSource,
      itemTemplate: function (e) {
        if (e.field === 'all') {
          return '<li class="k-item"><label class="k-label">' +
            '<input class="k-check-all" value="Select All" type="checkbox">Select All</label></li>';
        } else {
          return function (o) {
            return '<li class="k-item"><label class="k-label"><input class="" ' +
              'value="' + valueCallback(o) + '" type="checkbox">' + labelCallback(o) + '</label></li>';
          };
        }
      }
    };

}

// and use like this:

var dataSource = [{id: 1, label: 'Lorem'}, {id: 2, label: 'Ipsum'}];

columns: [{
  field: "name",
  title: "Route",
  filterable: gridCheckboxFilter(dataSource, true)
}]

【讨论】：