如何设置搜索 bootgrid

Question

我正在尝试为 bootgrid 控件设置搜索框，如示例页面所示 here. Page navigation invokes the ajax call and the server method processing the ajax call receives the searchPhrase, but typing into the search box does not invoke the server method. Both the documentation and various Q&A did not have guidance, this 是最接近的问题，但没有解决我的问题。

我在ASP.NET MVC网站上做这个，这里是相关的代码片段。

            <div id="grid-command-buttons-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search form-group">
                        <div class="input-group">
                            <span class="icon fa input-group-addon fa-search"></span>
                            <input type="text" class="search-field form-control" placeholder="Search">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-condensed table-hover table-striped" id="redisKeyResults">
            <thead>
                <tr>
                    <th data-column-id="KeyName" data-formatter="link" data-type="string" data-order="desc" data-identifier="true">Key</th>
                    <th data-column-id="KeyName" data-formatter="commands">Flush</th>
                </tr>
            </thead>
        </table>

Javascript设置bootgrid的代码如下

$("#redisKeyResults").bootgrid({
    ajax: true,
    url: "RedisCacheKeyManagement/GetRedisKeyResultGrid",
    post: function() {
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    formatters: {
        "commands": function(column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" +
                row.KeyName +
                "\">Flush</button>";
        },
        "link": function(column, row) {
            return "<a class=\"link-get\" data-row-id=\"" + row.KeyName + "\" href=\"" + row.link + "\">" + row.KeyName + "</a>";
        }
    }
})

Answer 1

设置搜索的答案是在 bootgrid 上启用 header 导航。可以使用 table 标签上的 API 和标签上的列设置来设置常规设置。

基于 documentation guidance，在 table 标签上设置 data-navigation 属性值为 2 或 3 显示具有所有功能的搜索框。

<table class="table table-condensed table-hover table-striped" id="redisKeyResults" data-navigation="3">

希望这对面临同样问题的人有所帮助。

如何设置搜索 bootgrid

How to set up search for bootgrid

asp.net-mvc

jquery-bootgrid