Question

我试图在剑道网格上放置2个过滤器＆＃39; OR＆＃39;逻辑。它不起作用。我需要使用两个下拉列表过滤网格。如果在Foo下拉＆＃39; foo1＆＃39;已选中并在栏下拉列表中全部＆＃39;选中，然后网格应显示

 foo     bar
  1       1
  1       2

以下代码：

$(function() {  
 var grid=$("#grid").kendoGrid({
 dataSource: {
 data: [
    { foo: "1", bar: "1" },{ foo: "1", bar: "2" },
    { foo: "2", bar: "2" },{ foo: "2", bar: "1" },
    { foo: "3", bar: "3" },{ foo: "3", bar: "2" }
    ]
},
columns: [
  "foo","bar"
],
toolbar: kendo.template($("#template").html())
});
grid.find("#foo").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        autoBind: false,
        optionLabel: "All",
dataSource: [{id:'1', name:'foo1'}, {id:'2', name:'foo2'},{id:'3', name:'foo3'}],
        change: function () {
          var ds = $("#grid").data("kendoGrid").dataSource;        

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:      
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);
 }
});
grid.find("#bar").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        autoBind: false,
        optionLabel: "All",
dataSource: [{id:'1', name:'bar1'}, {id:'2', name:'bar2'},{id:'3', name:'bar3'}],
        change: function () {
          var ds = $("#grid").data("kendoGrid").dataSource;        

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:    
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);
}
});
});
After pushing the filters to the filter array the grid datasource is not filtered.

更新了以下jsbin： http://jsbin.com/izuloj/23/edit

Answer 1

有几个问题：

DataSource filters的参数是一个数组，但是当你这样做时你正在推送一个数组：

filter.filters.push([
    { field: "bar", operator: "eq", value:  $("#bar").data('kendoDropDownList').value() },
    { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);

与空白比较与不添加条件的情况不同。所以你应该这样做：

// If there is some value in "bar" we add a condition for filtering it
if ($("#bar").data('kendoDropDownList').value()) {
    filter.filters.push({ 
        field: "bar", 
        operator: "eq", 
        value:  $("#bar").data('kendoDropDownList').value() }
    );
}

// If there is some value in "foo" we add a condition for filtering it
if ($("#foo").data('kendoDropDownList').value()) {
    filter.filters.push(
        { 
            field: "foo", 
            operator: "eq", 
            value:  $("#foo").data('kendoDropDownList').value() } 
    );
}

最后，如果两个下拉输入都为空，则不应设置任何过滤器，但在这种情况下，您无法发送空的过滤器数组，而应该执行ds.filter({}))。

所以你的change函数结束了：

function onChange () {
    var ds = $("#grid").data("kendoGrid").dataSource;        
    var filtering = false;

    var filter = {
        logic: "and",
        filters: []
    };    
    if ($("#bar").data('kendoDropDownList').value()) {
        filtering = true;
        filter.filters.push(
            { field: "bar", operator: "eq", value:  $("#bar").data('kendoDropDownList').value() }
        );
    }
    if ($("#foo").data('kendoDropDownList').value()) {
        filtering = true;
        filter.filters.push(
            { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
        );
    }
    if (filtering) {
        ds.filter([filter]);
    } else {
        ds.filter({});
    }
}

您的代码在此修改：http://jsbin.com/izuloj/31/edit

Answer 2

而不是

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:    
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);

以下工作....易于阅读

     if ( $("#foo").data('kendoDropDownList').value() === "")
          {
            ds.filter( { field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value()});
          }
          else
          {

          ds.filter({
                  logic: "and",
                  filters: [{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() },{ field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value()  }]
          });
          }

Answer 3

删除ds.filter([filter]);上的方括号，使其变为ds.filter(filter);。

kendogrid上的多个过滤器无法正常工作

3 个答案: