当前位置：文江博客话题详情

组合 SlickGrid 过滤器示例

发布于 2024-11-17 15:59:43 字数 493 浏览 0 评论 0原文

我喜欢此示例中过滤器的功能：

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

其中每列都有自己的过滤器，但我还需要以下过滤器的功能：

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轮廓§ 2024-11-24 15:59:43

是的。您可以使用第一个示例中的方法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   
      <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>

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.

For example, navigate to the first link, and replace the contents of the URL bar with:

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.

<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>

回复收藏 0 原文

~没有更多了~