如何在jquery-bootgrid表上隐藏搜索框？

Question

我找不到隐藏搜索框的选项。

有选择吗？

我应该通过Javascript将类设置为隐藏吗？

谢谢， ˚F

Answer 1

我不知道这是否是最佳解决方案，但您可以为搜索模板添加空字符串

$(...).bootgrid({
    // ...
    templates: {
        search: ""
    }
});

Answer 2

我想安德烈亚斯的答案对你来说更好，但你也可以用以下方式覆盖你表格的标题：

$("#grid").bootgrid({
    templates: {
        header: "<your header>"    
    }
});

更多解释如下：https://github.com/rstaib/jquery-bootgrid/issues/82

所以默认的标题模板是：

header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\">
<div class=\"row\"><div class=\"col-sm-12 actionBar\"><p class=\"
{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div></div></div>"

您可以在源代码中找到所有默认模板（它是jquery.bootgrid.js文件的大约1210行编号）。

在您的情况下，您只需要使用原始标题，在bootgrid设置中覆盖它，然后隐藏或删除（如果需要）或将额外的id或css类设置为：<p class=\"{{css.search}}\"></p>。

Answer 3

虽然之前的答案可行，但有一种方法可以隐藏页眉和页脚元素，例如内置于Bootgrid的搜索栏。从Bootgrid文档：

您可以这样使用它：

$("#example-table").bootgrid({
    selection: true,
    rowCount: -1,
    rowSelect : true,
    navigation: 0
});

Answer 4

以下代码有效

.bootgrid-header .actionBar .actions{ display:none;}

Answer 5

如果你想通过jQuery这样做，你可以$('.search').hide();或者像你所要求的那样添加一个类。

如果您希望在文档加载后隐藏搜索元素，那么您将...

$(function(){
 $('.search').addClass('hidden');
});

然后在你的css ......

.hidden { display: none }

您可能希望使用.search ( display: none }

将其隐藏在样式表中

这种方法会阻止搜索显示，直到jQuery隐藏它，并且下一个开发人员更容易理解。

在简要搜索在线文档（http://www.jquery-bootgrid.com/Documentation）后，我没有看到任何隐藏脚本中内置功能的内容。

祝你好运（在控制台测试过，它工作正常）