通过复选框向Kendo Grid添加多个过滤

Question

我有一个Kendo Grid，用于记录有四种状态类型：“预定”，“打开”，“执行中”和“关闭”。

我正在尝试使用复选框作为过滤器，因此我只能显示我需要的状态。我知道如何设置一个单独的过滤器，例如，仅列出“已调度”记录或“已关闭”记录。但我想展示“预定”和“开放”记录，例如，我还没弄清楚如何。我现在拥有的只适用于单一状态类型。

以下是一些代码：

$('input[type="checkbox"]').on('change', function () {
    var grid = $("#grid").data("kendoGrid");
    var ck_scheduled = $('#ck_scheduled').prop('checked');
    var ck_open = $('#ck_open').prop('checked');
    var ck_onexecution = $('#ck_onExecution').prop('checked');
    var ck_closed = $('#ck_closed').prop('checked');
    var allFilters = [];

    if (ck_scheduled) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Scheduled" });
    }
    if (ck_open) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Open" });
    }
    if (ck_onexecution) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "On execution" });
    }
    if (ck_closed) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Closed" });
    }
    grid.dataSource.filter(allFilters);
});

我在这里尝试使用此功能的方法是：当其中一个复选框发生变化时，它将检查4个复选框状态，并为已选中的复选框添加一个过滤器（使用“或”逻辑运算符）。最后，应用所有过滤器。

但是发生了什么：它只应用一个过滤器。例如，当我选中“已关闭”复选框时，它仅显示“已关闭”记录，忽略其他已选中复选框。

Answer 1

在过滤器中设置logic时出错。 logic是针对所有过滤条件全局定义的。即设置过滤条件的and或or。不是针对每种情况。

change事件处理程序应如下所示：

$('input[type="checkbox"]').on('change', function () {
    var grid = $("#grid").data("kendoGrid");
    var ck_scheduled = $('#ck_scheduled').prop('checked');
    var ck_open = $('#ck_open').prop('checked');
    var ck_onexecution = $('#ck_onExecution').prop('checked');
    var ck_closed = $('#ck_closed').prop('checked');
    var allFilters = [];

    if (ck_scheduled) {
        allFilters.push({ field: "Status", operator: "eq", value: "Scheduled" });
    }
    if (ck_open) {
        allFilters.push({ field: "Status", operator: "eq", value: "Open" });
    }
    if (ck_onexecution) {
        allFilters.push({ field: "Status", operator: "eq", value: "On execution" });
    }
    if (ck_closed) {
        allFilters.push({ field: "Status", operator: "eq", value: "Closed" });
    }
    grid.dataSource.filter({ logic: "or", filters: allFilters});
});

var ds = [
  { Code: "c1", Date: "2014/01/01", Status: "scheduled" },
  { Code: "c2", Date: "2014/01/01", Status: "open" },
  { Code: "c3", Date: "2014/01/01", Status: "onexecution" },
  { Code: "c4", Date: "2014/01/01", Status: "closed" },
  { Code: "c5", Date: "2014/01/01", Status: "open" },
  { Code: "c6", Date: "2014/01/01", Status: "open" },
  { Code: "c7", Date: "2014/01/01", Status: "on execution" },
  { Code: "c8", Date: "2014/01/01", Status: "on execution" }
];

var grid = $("#grid").kendoGrid({
  dataSource: ds,
  columns   :
  [
    { field: "Code" },
    { field: "Date"}, 
    { field: "Status" }
  ]
}).data("kendoGrid");

$('input[type="checkbox"]').on('change', function () {
  var grid = $("#grid").data("kendoGrid");
  var ck_scheduled = $('#ck_scheduled').prop('checked');
  var ck_open = $('#ck_open').prop('checked');
  var ck_onexecution = $('#ck_onExecution').prop('checked');
  var ck_closed = $('#ck_closed').prop('checked');
  var allFilters = [];

  if (ck_scheduled) {
    allFilters.push({ field: "Status", operator: "eq", value: "Scheduled" });
  }
  if (ck_open) {
    allFilters.push({ field: "Status", operator: "eq", value: "Open" });
  }
  if (ck_onexecution) {
    allFilters.push({ field: "Status", operator: "eq", value: "On execution" });
  }
  if (ck_closed) {
    allFilters.push({ field: "Status", operator: "eq", value: "Closed" });
  }
  grid.dataSource.filter({ logic: "or", filters: allFilters});

});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>


<label>Scheduled: <input type="checkbox" id="ck_scheduled"/>&nbsp;&nbsp;&nbsp;</label>
<label>Open: <input type="checkbox" id="ck_open"/>&nbsp;&nbsp;&nbsp;</label>
<label>On Execution: <input type="checkbox" id="ck_onExecution"/>&nbsp;&nbsp;&nbsp;</label>
<label>Closed: <input type="checkbox" id="ck_closed"/>&nbsp;&nbsp;&nbsp;</label>
<div id="grid"></div>