Question

我正在尝试为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>";
        }
    }
})

Answer 1

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

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

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

希望这可以帮助面临相同问题的人。

如何设置对bootgrid的搜索

1 个答案: