javascript 结合 SlickGrid 过滤器示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6507583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining SlickGrid Filter Examples
提问by Kevin
I like the functionality of the Filter in this example:
我喜欢这个例子中过滤器的功能：
http://mleibman.github.com/SlickGrid/examples/example-header-row.html
http://mleibman.github.com/SlickGrid/examples/example-header-row.html
where each column has its own filter, but I also require the functionality of the Filter from:
每列都有自己的过滤器，但我还需要过滤器的功能：
http://mleibman.github.com/SlickGrid/examples/example4-model.html
http://mleibman.github.com/SlickGrid/examples/example4-model.html
In that it can be hidden and shown via button click.
因为它可以通过单击按钮隐藏和显示。
Is it possible to have the Filters from the first link, with the "hide-ability" of the Filter from the second link? Thanks!
是否可以从第一个链接获得过滤器，并从第二个链接获得过滤器的“隐藏能力”？谢谢！
回答by Willi Ballenthin
Yes, it is. You may use the method grid.hideHeaderRowColumns()in the first example to hide the filter bar. Then use grid.showHeaderRowColumns()to show it again.
是的。您可以使用grid.hideHeaderRowColumns()第一个示例中的方法来隐藏过滤器栏。然后用grid.showHeaderRowColumns()它再次显示。
For example, navigate to the first link, and replace the contents of the URL bar with:
例如，导航到第一个链接，并将 URL 栏的内容替换为：
javascript:grid.hideHeaderRowColumns()
and hit Enter. You should see the filter bar slide up and away. If you are building your app from the first example code, you should be able to call these functions from almost anywhere, ie.
然后按 Enter。您应该会看到过滤器栏向上滑动。如果您从第一个示例代码构建您的应用程序，您应该能够从几乎任何地方调用这些函数，即。
<input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" />
Note that in the second example, the author uses the following code to add a predefined, but hidden, element to the styled header bar:
请注意，在第二个示例中，作者使用以下代码向样式化的标题栏添加了一个预定义但隐藏的元素：
// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
.appendTo(grid.getTopPanel())
.show();
And the hidden element:
和隐藏元素：
<div id="inlineFilterPanel"
style="display:none;background:#dddddd;padding:3px;color:black;">
Show tasks with title including
<input type="text" id="txtSearch2">
and % at least
<div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>
