如何让 SlickGrid 标题过滤器出现在网格负载上？答案

【问题标题】：How can I get SlickGrid header filters to appear on grid load?如何让 SlickGrid 标题过滤器出现在网格负载上？
【发布时间】：2014-07-26 23:13:25
【问题描述】：

我使用的是 MVC C#/Razor，我的过滤功能完全正常，页面加载时标题输入不会出现。我使用以下 sn-p 来设置输入：

    grid.onHeaderRowCellRendered.subscribe(function (e, args) {
        $(args.node).empty();
        $("<input type='text'>")
           .data("columnId", args.column.id)
           .val(columnFilters[args.column.id])
           .appendTo(args.node);
    });

但是，为了让输入出现，我需要先重新排序一列。我假设重新排序列函数正在调用 onHeaderRowCellRendered 函数，然后创建这些输入。我的问题是，为什么在首先加载网格时不调用 onHeaderRowCellRendered 函数，以及如何在创建网格时让它运行，或者，我怎样才能让输入文本框出现?

更多代码如下：

    grid = new Slick.Grid("#versionGrid", filteredData, columns, options);
    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
        var columnId = $(this).data("columnId");
        if (columnId != null) {
            columnFilters[columnId] = $.trim($(this).val());
            var localData = JSON.parse(JSON.stringify(slickdata));
            filteredData = filterData(columnFilters, localData);
            grid.setData(filteredData);
            $("#versionGrid").show();

        }
    });

    grid.autosizeColumns();
    $("#versionGrid").show();

    grid.onHeaderRowCellRendered.subscribe(function (e, args) {
        $(args.node).empty();
        $("<input type='text'>")
           .data("columnId", args.column.id)
           .val(columnFilters[args.column.id])
           .appendTo(args.node);
    });

【问题讨论】：

我基于以下示例：github.com/mleibman/SlickGrid/blob/master/examples/…
你不应该$("#versionGrid").show();。 Slickgrid 为您处理。查看this fiddle。确保您的 options 相同，并且您已包含对 grid.init() 的调用。注意：forceFitColumns 替换了 grid.autosizeColumns();

标签： c# javascript jquery model-view-controller slickgrid

【解决方案1】：

为了实现这一点，我只需要自己调用一次过滤器创建代码。

function appendFiltersCreators(e, sender){
    ...
}

$(function () {
    slickgrid.onColumnsReordered.subscribe(appendFiltersCreators);
    appendFiltersCreators(null, {"grid": slickgrid});
});

我使用不同的事件，但它也应该适用于您的情况。

【讨论】：