如何設置默認篩選器在頁面加載在slickgrid

Question

我想在頁面加載設置默認篩選器在slickgrid.This是以下代碼 在調用slicgrid。

$(document).ready(function() { 
LoadslickGrid(); 
}); 



function LoadSlickGrid(txtHRMFilter) { 
     $(function() { 
      var data = []; 

      $.ajax({ 
       url: '/Home/GetDetails/?strFilter=' + txtFilter, 
       dataType: "json", 
       type: "POST", 
       async: false, 
       contentType: "application/json", 
       success: function (result) { 
        data = result.desc; 

       } 
      }); 

      // Need to use a DataView for the filter plugin 
      //var dataView = new Slick.Data.DataView(); 

      grid = new Slick.Grid("#grid", dataView, columns, options); 

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





      dataView.onRowCountChanged.subscribe(function (e, args) { 
       grid.updateRowCount(); 
       grid.render(); 
      }); 

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

      dataView.beginUpdate(); 
      dataView.setItems(data); 
      dataView.setFilter(filter); 
      dataView.endUpdate(); 

      var filterPlugin = new Ext.Plugins.HeaderFilter({sortAvailable: false}); 

      // This event is fired when a filter is selected 
      filterPlugin.onFilterApplied.subscribe(function() { 
       dataView.refresh(); 
       grid.resetActiveCell(); 

       // Excel like status bar at the bottom 
       var status; 

       if (dataView.getLength() === dataView.getItems().length) { 
        status = ""; 
       } else { 
        status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND'; 
       } 
       $('#status-label').text(status); 

      }); 
      var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); 
      // Event fired when a menu option is selected 
      filterPlugin.onCommand.subscribe(function (e, args) { 
       dataView.fastSort(args.column.field, args.command === "sort-asc"); 
      }); 

      grid.registerPlugin(filterPlugin); 

      var overlayPlugin = new Ext.Plugins.Overlays({}); 

      // Event fires when a range is selected 
      overlayPlugin.onFillUpDown.subscribe(function (e, args) { 
       var column = grid.getColumns()[args.range.fromCell]; 

       // Ensure the column is editable 
       if (!column.editor) { 
        return; 
       } 

       // Find the initial value 
       var value = dataView.getItem(args.range.fromRow)[column.field]; 

       dataView.beginUpdate(); 

       // Copy the value down 
       for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) { 
        dataView.getItem(i)[column.field] = value; 
        grid.invalidateRow(i); 
       } 

       dataView.endUpdate(); 
       grid.render(); 
      }); 

      grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false })); 
      grid.registerPlugin(checkboxSelector); 

      grid.registerPlugin(overlayPlugin); 


      grid.init(); 


      function filter(item) { 

       var columns = grid.getColumns(); 
       var value = true; 
       for (var i = 0; i < columns.length; i++) { 
        var col = columns[i]; 
        var filterValues = col.filterValues; 
        if (filterValues && filterValues.length > 0) { 
         value = value & _.contains(filterValues, item[col.field]); 
        } 
       } 
       return value; 
      } 


      $("#divLoading").fadeOut("fast"); 
      if (data.length == 0) { 
       $("#divLoading").fadeOut("fast"); 
       $.ajax().done(function() { alert("No records found"); }); 
       $("#txtHRMFilter").val(''); 
      } 

     }); 
    } 

過濾器工作正常，但我想顯示在頁面加載

過濾器的默認值

這些列的詳細信息

var columns = []; 
    var columnFilters = {}; 
    columns.push(checkboxSelector.getColumnDefinition()); 
    columns[1] = { id: "id", name: "Id", field: "id", sortable: true, width: 103, formatter: docNoFormatter }; 
    columns[2] = { id: "FirstName", name: "First Name", field: "FirstName", sortable: true, width: 135, formatter: formatter }; 
    columns[3] = { id: "LastName", name: "Last Name", field: "LastName", sortable: true, width: 135, formatter: formatter }; 
    columns[4] = { id: "Flag", name: " Flag", field: "HighRiskFlag", sortable: true, width: 128, formatter: formatter }; 
    //columns[4] = { id: "Date", name: " Date", field: "JoiningDate", sortable: true, width: 125, formatter: formatter }; 
    columns[5] = { id: "Category", name: "Category", field: "Category", sortable: true, width: 250, formatter: formatter }; 
    columns[6] = { id: "Date", name: "Date", field: "RenewalDate", sortable: true, width: 125, formatter: formatter }; 
    columns[7] = { id: "State", name: "State", field: "State", sortable: true, width: 100, formatter: formatter }; 

在此先感謝

Answer 1

你的過濾函數如下爲每列上名爲filterValues的屬性中的值。要在網格上放置過濾器，請將相關列的filterValues屬性設置爲包含所有過濾器值的數組。

您可以在初始化網格之前設置列時執行此操作。下面的片段是將一個過濾器放在'TEST1'和'TEST2'值到名爲'Category'的列上的一個例子。

columns[5] = { 
    id: "Category", 
    name: "Category", 
    field: "Category", 
    sortable: true, 
    width: 250, 
    formatter: formatter, 
    filterValues: ['TEST1', 'TEST2'] 
}; 

或者你也可以以編程方式添加/通過更新相關欄目，然後刷新網格（並更新狀態欄）刪除過濾器。下面的代碼片段將值「TEST1」和「TEST2」上的過濾器放在名爲「類別」的列上。

function applyAFilter(){ 
    //Retrieve the column for 'Category' 
    var column = grid.getColumns()[grid.getColumnIndex("Category")]; 

    //Set the filterValues on this column to 'TEST1' and 'TEST2' 
    column.filterValues = ['TEST1', 'TEST2']; 

    //Alternatively clear the filterValues on this column 
    //column.filterValues = []; 

    //Ideally the below would be placed in a function and called from both the anonymous function subscribed to the filterPlugin.onFilterApplied event and here. 
    dataView.refresh(); 
    grid.resetActiveCell(); 

    //Update status bar 
    var status; 

    if (dataView.getLength() === dataView.getItems().length) { 
     status = ""; 
    } else { 
     status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND'; 
    } 
    $('#status-label').text(status); 
}