我想在Kendo UI Grid上顯示應用的過濾標準

Question

如何在Kendo UI Grid上顯示任何應用的過濾標準。 我想有一個只讀的顯示，適用的標準。 當前的功能確實允許用戶應用過濾器，但用戶必須轉到過濾器菜單才能查找過濾器的詳細信息。

Answer 1

劍道UI數據源沒有過濾器的事件，所以你需要實現自己。然後，當事件被觸發時，您可以獲取當前過濾器並以您希望顯示的任何方式對其進行格式化。

例如：

var grid = $("#grid").kendoGrid(...); 

// override the original filter method in the grid's data source 
grid.dataSource.originalFilter = grid.dataSource.filter; 
grid.dataSource.filter = function() { 
    var result = grid.dataSource.originalFilter.apply(this, arguments); 
    if (arguments.length > 0) { 
     this.trigger("afterfilter", arguments); 
    } 

    return result; 
} 

// bind to your filter event 
grid.dataSource.bind("afterfilter", function() { 
    var currentFilter = this.filter(); // get current filter 

    // create HTML representation of the filter (this implementation works only for simple cases) 
    var filterHtml = ""; 
    currentFilter.filters.forEach(function (filter, index) { 
     filterHtml += "Field: " + filter.field + "<br/>" + 
      "Operator: " + filter.operator + "<br/>" + 
      "Value: " + filter.value + "<br/><br/>"; 

     if (currentFilter.filters.length > 1 && index !== currentFilter.filters.length - 1) { 
      filterHtml += "Logic: " + currentFilter.logic + "<br/><br/>"; 
     } 
    }); 

    // display it somewhere 
    $("#filter").html(filterHtml); 
}); 

參見demo here。

注意，過濾器可以被嵌套，所以一旦出現這種情況，這個例子的代碼是不夠的 - 你必須作出這樣的轉換過濾器，HTML遞歸的代碼。

爲了增強所有數據源與「後過濾器」事件，你必須改變的數據源protototype而不是改變它在你的實例：

kendo.data.DataSource.fn.originalFilter = kendo.data.DataSource.fn.filter; 
kendo.data.DataSource.fn.filter = function() { 
    var result = this.originalFilter.apply(this, arguments); 
    if (arguments.length > 0) { 
     this.trigger("afterfilter", arguments); 
    } 

    return result; 
} 

如果你想整個事情納入所有網格窗口小部件，你可以創建一個新的方法filtersToHtml它可以讓你的HTML represenatation並將其添加到kendo.data.DataSource.fn像上面證明（或者你可以從劍道的網格衍生create your own widget）;以同樣的方式，你可以添加一個方法displayFilters到kendo.ui.Grid.fn（網格原型），它將這個HTML表示顯示在一個DOM元素中，它的選擇器可以將你的小部件的選項傳入（你最終也可以在網格小部件中創建這個元素）。然後，您可以改爲使用displayFilters來代替在過濾器方法中觸發「afterfilter」。

考慮到總是顯示過濾器的完整實現的複雜性，我建議擴展Kendo網格，而不是簡單地修改原始代碼。這將有助於保持這種可維護性並使其具有一定的結構。

Answer 2

如何組合兩個網格過濾器。 用這種方式，用戶可以在文本框中看到選定的過濾器，甚至通過點擊過濾列文本框上的「x」按鈕將其刪除。

你可以通過設置過濾格這樣

filterable: { 
     mode: "menu, row" 
    } 

的文檔和示例做，這是在here