【问题标题】:How to clear all filters when single click button in slick grid单击光滑网格中的按钮时如何清除所有过滤器
【发布时间】:2015-07-09 12:19:09
【问题描述】:

我使用下面的代码来加载 div 标签内的光滑网格,它是 工作正常,但我想在光滑的网格中玩更多的功能。 如何在单击中删除所有过滤器?


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


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

                        }
                    });



            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();
            dataView.refresh();
            var filterPlugin = new Ext.Plugins.HeaderFilter({});

            filterPlugin.onFilterApplied.subscribe(function () {
                dataView.refresh();
                grid.resetActiveCell();

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

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

                dataView.beginUpdate();

                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`enter code here`; i++) {
                    var col = columns[i];
                    var filterValues = col.filterValues;

                    if (filterValues && filterValues.length > 0) {
                        value = value & _.contains(filterValues, item[col.field]);
                    }
                }
                return value;
            }
        });
    }

--------------------------------

现在我想在 slickgrid 中通过单击按钮清除所有过滤器。

$("#btnclear").click(function () {
            ClearSlickGrid();
});

我怎样才能做到这一点? 提前致谢。

【问题讨论】:

    标签: jquery slickgrid


    【解决方案1】:

    您可以简单地设置一个空白过滤器:

    $("#btnclear").click(function () {
        dataView.setFilter(function(item){
            return true;
        }
    });
    

    当您想重新应用旧过滤器时,只需调用:

    dataView.setFilter(filter);
    

    【讨论】:

    • 感谢您的回复。单击“btnclear”按钮时,它工作正常,但在我无法再次过滤之后。
    • 感谢您的回复。单击“btnclear”按钮时,它工作正常,但在我无法再次过滤之后。在 clearall 过滤器之后,过滤器图标仍然可见。
    • 您介意设置小提琴或发送指向现场示例的链接吗?当您想再次过滤时,您需要重新分配过滤功能。
    • 感谢您的友好回复。无论您说哪个想法,它都可以很好地清除所有过滤器。但是在没有页面刷新的情况下调用“函数LoadSlickGrid(txtHRMFilter){..}”后过滤器不起作用,默认通过过滤器值为“True”。所以,应用“””后我无法再次过滤$("#btnclear").click(function () { dataView.setFilter(function(item){ return true; } });"""" 你的函数。
    • 你能提供一个活生生的例子的链接吗?您正在使用多个插件,如果不查看并运行完整的代码(包括列定义),就很难说出您的目标是什么。您不太可能每次都通过在页面上多次调用 LoadSlickGrid 来创建网格的新实例。要在页面上重新启用过滤器,您可以在其处理程序中设置另一个调用 dataView.setFilter(filter) 的按钮,甚至将清除按钮设置为切换按钮。
    猜你喜欢
    • 2016-08-26
    • 2012-03-14
    • 1970-01-01
    • 1970-01-01
    • 2020-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多