如何设置搜索引导网格答案

【问题标题】：How to set up search for bootgrid如何设置搜索引导网格
【发布时间】：2019-04-24 12:33:12
【问题描述】：

我正在尝试为 bootgrid 控件设置搜索框，如示例页面 here 中所示。页面导航调用 ajax 调用，处理 ajax 调用的服务器方法接收 searchPhrase，但在搜索框中键入不会调用服务器方法。文档和各种问答都没有指导，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>

设置bootgrid的Javascript代码如下

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

【问题讨论】：

标签： asp.net-mvc jquery-bootgrid

【解决方案1】：

设置搜索的答案是在 bootgrid 上启用标题导航。常规设置可以使用 API 对 table 标签和 column settings 在标签上进行设置。

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

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

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

【讨论】：