结合SlickGrid过滤器示例

时间:2011-06-28 13:55:58

标签: javascript slickgrid

我喜欢此示例中Filter的功能:

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

其中每列都有自己的过滤器,但我还需要过滤器的功能:

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

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

是否可以从第一个链接获得过滤器,从第二个链接获得过滤器的“隐藏能力”?谢谢!

1 个答案:

答案 0 :(得分:7)

是的,确实如此。您可以使用第一个示例中的方法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>