通过复选框向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>