SlickGrid过滤器不工作

Question

我对SlickGrid相当新。我正在尝试使SlickGrid过滤器工作，但没有运气。我正在遵循示例（http://mleibman.github.io/SlickGrid/examples/example4-model.html）。 以下是我的源代码。

$(document).ready(function() { 
    var tName; 
    $('#submit').click(function(e) { 
     tName = $('#source option:selected').text();// name1 
     tName = tName.trim(); 
     $.ajax({ 
      url : 'someUrl', 
      type : 'GET', 
      cache : false, 
      success : function(d) { 
       var grid; 
       var searchString = ""; 
       var data = []; 
       var columns = new Array(); 
       var cols = d[0].columns; 
       var pkColNames = d[0].pkColNames; 
       for (var j=0; j< cols.length; j++) { 
        var key = {id: cols[j].colName, name: cols[j].colName, field: cols[j].colName, width: 200, sortable:true, editor: Slick.Editors.LongText}; 
        columns[j] = key; 
       }     

       var options = { 
         editable: true, 
         enableAddRow: false, 
         enableCellNavigation: true, 
         asyncEditorLoading: false, 
         enableColumnReorder:true, 
         multiColumnSort: false, 
         autoEdit: false, 
         autoHeight: false 
       }; 

       function myFilter(item, args) { 
        return true;// Let us return true all time ? 
       } 

       for (var i = 0; i < d.length; i++) { 
        var tempData = (data[i] = {}); 
        var title = null; 
        var val = null; 
        for (var q = 0; q < d[i].columns.length; q++) { 
         title = d[i].columns[q].colName; 
         val = d[i].columns[q].colValue; 
         tempData[title] = val; 
        } 
       } 

       var dataView = new Slick.Data.DataView({ inlineFilters: true }); 

       grid = new Slick.Grid("#myGrid", dataView, columns, options); 
       dataView.setPagingOptions({ 
        pageSize: 25 
       }); 
       var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager")); 
       var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); 

       grid.setSelectionModel(new Slick.CellSelectionModel()); 

       grid.onAddNewRow.subscribe(function(e, args) { 
        // Adding a new record is not yet decided. 
       }); 

       grid.onCellChange.subscribe(function (e) { 
        var editedCellNo = arguments[1].cell; 
        var editedColName = grid.getColumns()[editedCellNo].field; 
        var newUpdatedValue= arguments[1].item[grid.getColumns()[editedCellNo].field]; 
        var editedColType = ""; 
        for (var cnt = 0; cnt < cols.length; cnt++) { 
         if (editedColName == cols[cnt].colName) { 
          editedColType = cols[cnt].colType; 
          break; 
         } 
        } 
        var pkKeyValue=""; 

        for (var v=0; v <pkColNames.length;v++) { 
         for (var p=0; p<grid.getColumns().length; p++) { 
          if (pkColNames[v] == grid.getColumns()[p].field) { 
           var value = arguments[1].item[grid.getColumns()[p].field]; 
           pkKeyValue += "{"+pkColNames[v] + '~' +getColDbType(grid.getColumns()[p].field) + ":"+value+"},"; 
           break; 
          } 
         } 
        } 

        function getColDbType(colName) { 
         for (var c = 0; c < cols.length; c++) { 
          if (colName == cols[c].colName) { 
           return cols[c].colType; 
          } 
         } 
        } 

        pkKeyValue = pkKeyValue.substring(0, pkKeyValue.length-1); 
        $.ajax({ 
         url: 'anotherUrl', 
         type:'GET', 
         dataType:'text', 
         success: function(f) { 
          bootbox.alert("Data updated successfully"); 
         }, 
         error: function() { 
          bootbox.alert("Error - updating data. Please ensure you are adding the data in right format."); 
          grid.invalidateAllRows(); 
          grid.render(); 


         } 
        }); 
       }); 

       grid.onClick.subscribe(function (e) { 
        //do-nothing 
       }); 

       dataView.onRowsChanged.subscribe(function(e, args) { 
        grid.updateRowCount(); 
        grid.invalidateRows(args.rows); 
        grid.render(); 
       }); 

       grid.onSort.subscribe(function(e, args) { 
         // args.multiColumnSort indicates whether or not this is a multi-column sort. 
         // If it is, args.sortCols will have an array of {sortCol:..., sortAsc:...} objects. 
         // If not, the sort column and direction will be in args.sortCol & args.sortAsc. 

         // We'll use a simple comparer function here. 
         var comparer = function(a, b) { 
         return a[args.sortCol.field] > b[args.sortCol.field]; 
         } 

         // Delegate the sorting to DataView. 
         // This will fire the change events and update the grid. 
         dataView.sort(comparer, args.sortAsc); 
       }); 

       // wire up the search textbox to apply the filter to the model 
       $("#txtSearch").keyup(function (e) { 
        console.log('Called...txtSearch'); 
        Slick.GlobalEditorLock.cancelCurrentEdit(); 

        // clear on Esc 
        if (e.which == 27) { 
        this.value = ""; 
        } 

        searchString = this.value; 
        updateFilter(); 
       }); 

       function updateFilter() { 
        console.log("updateFilter"); 
        dataView.setFilterArgs({ 
        searchString: searchString 
        }); 
        dataView.refresh(); 
       } 

       dataView.beginUpdate(); 
       dataView.setItems(data, pkColNames); 
       dataView.setFilterArgs({ 
        searchString: searchString 
        }); 
       dataView.setFilter(myFilter); 
       dataView.endUpdate(); 
      }, 
      error : function() { 
       bootbox.alert("Invalid user"); 
      } 
     }); 
    }); 
}); 

Answer 1

你的功能myFilter()总是返回true所以当然不会有任何效果。你看过的例子是过滤特定的东西。我会建议你看看下面的例子有一个通用的过滤器。从示例中，只需输入您正在查看选定列的文本并查看结果...请参阅下面的示例（来自SlickGrid示例）。
Using fixed header row for quick filters

如果您想要更深入的条件过滤器（> 10,<> 10等），请查看我以前的答案，了解如何使这种过滤成为可能，请参阅我的以前的过滤器下面回答：
SlickGrid column type

希望帮助你出来