结合 SlickGrid 过滤器示例答案

【问题标题】：Combining SlickGrid Filter Examples结合 SlickGrid 过滤器示例
【发布时间】：2011-09-24 08:31:21
【问题描述】：

我喜欢这个例子中过滤器的功能：

http://mleibman.github.com/SlickGrid/examples/example-header-row.html

每列都有自己的过滤器，但我还需要过滤器的功能来自：

http://mleibman.github.com/SlickGrid/examples/example4-model.html

因为它可以通过单击按钮隐藏和显示。

是否可以从第一个链接获得过滤器，并从第二个链接获得过滤器的“隐藏能力”？谢谢！

【问题讨论】：

标签： javascript slickgrid

【解决方案1】：

是的，是的。您可以使用第一个示例中的方法grid.hideHeaderRowColumns() 来隐藏过滤器栏。然后使用grid.showHeaderRowColumns() 再次显示。

例如，导航到第一个链接，并将 URL 栏的内容替换为：

javascript:grid.hideHeaderRowColumns()

然后按 Enter。您应该会看到过滤器栏向上滑动并移开。如果您从第一个示例代码构建您的应用程序，您应该能够从几乎任何地方调用这些函数，即。

<input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" />

请注意，在第二个示例中，作者使用以下代码将预定义但隐藏的元素添加到样式标题栏：

// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
    .appendTo(grid.getTopPanel())
    .show();

还有隐藏元素：

<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 &nbsp; 
      <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>

【讨论】：