Question

我想在slickgrid中设置页面加载的默认过滤器。这是下面的代码在调用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('');
            }

        });
    }

过滤器工作正常，但我想在pageLoad

上显示默认过滤器值

这些是列详细信息

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

如何在slickgrid中设置页面加载的默认过滤器

1 个答案: