使用搜索欄和下拉列表過濾器Kendo ListView

我的頁面上有一個Kendo ListView，我希望能夠使用自定義搜索欄和兩個Kendo DropDownLists以允許用戶過濾ListView。使用搜索欄和下拉列表過濾器Kendo ListView

我，而只是用搜索欄或只使用下拉菜單，但我遇到了問題，試圖找出如何能夠過濾使用所有這三個在同一時間的數據沒有問題的過濾。

例如，我希望能夠到的東西輸入到搜索，並把它過濾搜索詞。然後顯示結果，我希望能夠通過使用下拉列表來篩選這些結果。

我已經有了一個完整的例子在這裏：https://codepen.io/anon/pen/eRpoag

對其進行測試，輸入到搜索欄中的「測試」。你會注意到它過濾到一個結果。現在展開「產品類型」下拉菜單並選擇「類型1」。注意它是如何顯示所有這種類型的產品？它應該顯示沒有結果，因爲我只想在當前的過濾器上應用該過濾器。

2017-06-08 Quiver

我想篩選使用多個多選擇下拉菜單網格和管理使用的答案來解決的時候碰到了類似的問題。 [檢查出來]（https://stackoverflow.com/questions/43780495/custom-filtering-with-multi-select-drop-downs）看看是否有幫助。 :) – Sandman

當您使用退格鍵和其他鍵刪除過濾器時，您的文本框不會觸發過濾器。我無法完整地查看代碼，但是，我建議您將邏輯壓縮爲一個過濾器方法，並傳入網格或數據源，並讓所有更改事件處理程序調用一個過濾器函數，以檢查所有字段並構建過濾器並將其應用於數據源。 –

我給你讀了最後一段，並按照你的指示。您正在處理所有事件，但是，您的產品下拉事件不會查找名稱上是否存在過濾器。您必須在一個功能中同時處理兩個或全部三個過濾器，才能按照您的喜好進行工作。 –

感謝Sandman爲我提供一個鏈接到他的問題，這是非常類似地雷，而他能夠找到一個解決方案。我已經改變了他的解決方案，以便它對我有用。 Original Solution。

function applyClientFilters() { 
    var listView = $("#ProductsList").data("kendoListView"); 
    var listViewDataSource = listView.dataSource; 
    // clear existing datasource 
    listViewDataSource.filter([]); 
    // extract selected items from each of the dropdown controls and the search box 
    var productType = $("#ProductTypeDropDown").data("kendoDropDownList").value(); 
    var therapeuticClass = $("#TherapeuticClassDropDown").data("kendoDropDownList").value(); 
    var searchString = $(".search-filter").val(); 
    // setup filter object (using and logic) 
    var filter = { 
     logic: "and", 
     filters: [] // ready for filter from each of the dropdowns and search bar 
    }; 
    // push new filter into array of filters with or logic on each filter 
    if (productType.length > 0) { 
     var productTypeFilter = { 
      logic: "or", 
      filters: [ 
       { field: "ProductTypeId", operator: "equals", value: productType } 
      ] 
     }; 
     filter.filters.push(productTypeFilter); 
    } 


    if (therapeuticClass.length > 0) { 
     var therapeuticClassFilter = { 
      logic: "or", 
      filters: [ 
       { 
        field: "TherapeuticClasses", 
        operator: function (itemValue, value) { 
         return itemValue && 
          itemValue.find(function (item) { 
           if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) { 
            return true; 
           } else { 
            return false; 
           } 
          }); 
        }, 
        value: therapeuticClass 
       } 
      ] 
     }; 
     filter.filters.push(therapeuticClassFilter); 
    } 

    if (searchString.length > 0) { 
     var searchFilter = { 
      logic: "or", 
      filters: [ 
       { field: "Name", operator: "startswith", value: searchString }, 
       { field: "ProductTypeDisplay", operator: "startswith", value: searchString }, 
       { field: "NdcCode", operator: "startswith", value: searchString }, 
       { 
        field: "TherapeuticClasses", 
        operator: function(itemValue, value) { 
         return itemValue && 
          itemValue.find(function(item) { 
           // If a therapeutic class name matches search then return true 
           if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) { 
            return true; 
           } else { 
            return false; 
           } 
          }); 
        }, 
        value: searchString 
       } 
      ] 
     }; 
     filter.filters.push(searchFilter); 
    } 

    // apply filter query to datasource 
    listViewDataSource.query({ 
     filter: filter 
    }); 
}

然後我打電話applyClientFilters()功能在每個下拉菜單和搜索框的變化情況和過濾的偉大工程。

來源

2017-06-16 16:37:15 Quiver

使用搜索欄和下拉列表過濾器Kendo ListView

回答

相關問題