2013-03-13 45 views
5

我的應用程序中有劍道網格,並且它具有可過濾的「真實」。當我們應用過濾時,網格項目被過濾,網格大小也重新調整大小。當我們清除過濾器欄中的文本,然後自動網格顯示頁面加載中顯示的項目,而不用按清除按鈕。這可能嗎?我的網格碼是清除過濾出來單擊清除按鈕

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"); 

回答

14

您需要使用網格的數據源的filter方法:如果你打電話

grid.dataSource.filter({}) 

有可能

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

感謝您的快速回復,我試過那個,但我沒有得到任何結果。這裏是小提琴http://jsfiddle.net/SZBrt/17/。 – user2138545 2013-03-13 09:55:34

+0

您的jsfiddle中存在JavaScript錯誤。這是它不工作的原因。 – 2013-03-13 11:28:16

+0

你的過濾條件是什麼'val'?你想做什麼? – OnaBai 2013-03-13 11:44:10

3

,你擦除整dataSource過濾器,不僅是網格中的字段。我的意思是dataSource可以由於某種原因進行預過濾。

我開發的方法,它只刪除網格的過濾器。

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); 
} 

這裏是第二種方法。它被分離,因爲它可以遞歸調用:

kendo.ui.Grid.prototype._eraseFiltersField = function(fields, filter){ 
    for (var i = 0; i < filter.filters.length; i++) { 

     // For combination 'and' and 'or', kendo use nested filters so here is recursion 
     if(filter.filters[i].hasOwnProperty('filters')){ 
      filter.filters[i] = this._eraseFiltersField(fields, filter.filters[i]); 
      if($.isEmptyObject(filter.filters[i])){ 
       filter.filters.splice(i, 1); 
       i--; 
       continue; 
      } 
     } 

     // Remove filters 
     if(filter.filters[i].hasOwnProperty('field')){ 
      if(fields.indexOf(filter.filters[i].field) > -1){ 
       filter.filters.splice(i, 1); 
       i--; 
       continue; 
      } 
     } 
    } 

    if(filter.filters.length === 0){ 
     filter = {}; 
    } 

    return filter; 
} 

方法可以這樣調用:

$('#my-grid').data('kendoGrid').clearFilters({ 
    ignore: ['Field1', 'Field2'] 
}) 

遞歸是存在的,因爲數據源過濾器可以看起來像:

{ 
    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")) 

的方法是不完美的和幾個測試。 我希望這可以幫助某人。