Javascript 不单击“清除”按钮清除筛选

我的应用程序中有剑道网格。它有可过滤的“true”。当我们应用过滤时，网格项被过滤，网格大小也被重新调整。当我们清除“过滤器”列中的文本时，不按“清除”按钮，页面加载中显示的项目将自动显示在网格中。是否可能？我的网格代码是

var grid = $("#grid").kendoGrid({
  dataSource: {
    type  : "odata",
    transport      : {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema         : {
      model: {
        fields: {
          OrderID  : { type: "number" },
          Freight  : { type: "number" },
          ShipName : { type: "string" },
          OrderDate: { type: "date" },
          ShipCity : { type: "string" }
        }
      }
    },
    pageSize       : 10
  },
  filterable: true,
  sortable  : true,
  pageable  : true,
  columns   : [
    {
    field     : "OrderID",
    filterable: false
  },
  "Freight",
  {
    field : "OrderDate",
    title : "Order Date",
    width : 100,
    format: "{0:MM/dd/yyyy}"
  },
  {
    field: "ShipName",
    title: "Ship Name",
    width: 200
  },
  {
    field: "ShipCity",
    title: "Ship City"
  }
  ]
}).data("kendoGrid");

您需要使用网格数据源的方法：

$("#grid").data("kendoGrid").dataSource.filter([]);

如果你打电话

grid.dataSource.filter({})

有一种可能性，您可以删除整个数据源过滤器，而不仅仅是网格中的字段。我的意思是，出于某种原因，可以对数据源进行预过滤

我开发了一种方法，只删除网格的过滤器

kendo.ui.Grid.prototype.clearFilters = function(args){
    var ignore = [];
    // test arguments
    if(typeof args === 'object'){
        if(args.hasOwnProperty('ignore')){
            if(args.ignore.length > 0){
                ignore = args.ignore;
            }
        }
    }

    // get dataSource of grid and columns of grid
    var fields = [], filter = this.dataSource.filter(), col = this.columns;
    if( $.isEmptyObject(filter) || $.isEmptyObject(filter)) return;

    // Create array of Fields to remove from filter and apply ignore fields if exist
    for(var i = 0, l = col.length; i < l; i++){
        if(col[i].hasOwnProperty('field')){
            if(ignore.indexOf(col[i].field) === -1){
                fields.push(col[i].field)
            }
        }
    }

    if($.isEmptyObject(fields)) return;

    // call "private" method
    var newFilter = this._eraseFiltersField(fields, filter)

    // set new filter
    this.dataSource.filter(newFilter);
}

递归之所以存在，是因为数据源筛选器可能类似于：

{
    logic: "and"
    filters: [
        {
            logic: "or"     
            filters:[
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val1"
                        },
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val2"
                        }
            ],
        },
        {
            field: "Field3"
            operator: "contains"
            value: "val3"
        }
    ],
}

方法在所有嵌套的“过滤器”数组上递归调用。 上面的过滤器类似于：

("Field3" === "val3" && ("Field1" === "val1" || "Field1" === "val2" ) )

该方法并不完美，有一些是经过测试的。

---

我希望这对某人有所帮助。

谢谢您的快速回复，我尝试了这个，但没有得到任何结果。这是小提琴。您的JSFIDLE中有一个JavaScript错误。这就是它不起作用的原因。在过滤条件中什么是

val

？你想做什么？在调试时，我遇到了一个错误，我的代码中没有小写方法，但为什么我会出现这个错误，“Uncaught TypeError:Object 10248没有方法‘toLowerCase’”？我能知道代码中哪里有错吗？我试图在列过滤中过滤数据，第一次我们在列过滤器中输入值，然后过滤数据，然后网格显示过滤数据，当我们单击“清除”按钮时，网格显示实际数据，但我想显示实际数据，而不单击“清除”按钮

{
    logic: "and"
    filters: [
        {
            logic: "or"     
            filters:[
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val1"
                        },
                        {
                            field: "Field1"
                            operator: "contains"
                            value: "val2"
                        }
            ],
        },
        {
            field: "Field3"
            operator: "contains"
            value: "val3"
        }
    ],
}

("Field3" === "val3" && ("Field1" === "val1" || "Field1" === "val2" ) )