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

Question

我有一个 Kendo 网格，用于具有四种状态类型的记录:“计划”、“打开”、“执行中”和“关闭”。

我正在尝试使用复选框作为过滤器，这样我就可以只显示我需要的状态。我知道如何设置一个过滤器，例如，只列出“预定”记录或“关闭”记录。但是我想显示“预定”和“打开”记录，例如，我还没有弄清楚如何。我现在拥有的适用于单一状态类型。

这是一些代码:

$('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 是为所有过滤条件全局定义的。 IE。设置过滤条件的 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>