我们如何在 ext js 4.2 中隐藏和显示网格面板的行？

Posted 2023-02-26

【中文标题】我们如何在 ext js 4.2 中隐藏和显示网格面板的行？

【英文标题】：How can we hide and show the row of grid panel in ext js 4.2?

【发布时间】：2014-06-11 18:46:19

【问题描述】：

你好， 我有带有行的网格面板，并且有一个与其他值相对应的列名 ID，例如：-

ID    Type    Status
--------------------------
1      A      True
1      B      True
1      C      False
1      D      False
1      E      False
2      A      True
2      B      False
2      C      False
2      D      False

我需要像下面这样：所以当我点击[显示所有记录..]时，将显示 1 条记录的 ID。与 Id 2 相同，依此类推....

ID    Type    Status
--------------------------
1      A      True
1      B      True
Show all record..
2      A      True
2      B      False
Show all record..

点击显示所有记录后将输出...

   ID    Type    Status
  ----------------------------
    1      A      True
    1      B      True
    1      C      False
    1      D      False
    1      E      False
    2      A      True
    2      B      False
    Show all record..

希望你能理解我要达到的目标。

感谢和问候 维克

【参考方案1】：

您可以将 id 列用作一个组，在分组网格中，您可以选择展开或折叠共享相同值的记录，但如果组折叠它不会显示第一条记录，也不会显示第二条记录.

请参阅此示例：http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid

【讨论】：

感谢您的回复，我已经看到了这个例子，但这是我不需要它来实现的。希望能得到任何帮助:)

【参考方案2】：

没有这样的视图或插件可以完全满足您的需要（在 Ext 4.x 和 Ext 5.x 中都没有），因此需要大量的编码来实现它。

根据 Elias 的建议，如果没有自定义编码，您可以获得的最接近的是分组网格，或者可能不是那么接近，the tree grid。

【讨论】：

感谢您的回复和建议。好吧，现在我在网格面板中使用分组功能，但是我们可以对具有超过 1 条记录的那些行应用分组，并且这些行必须是 startCollapsed =true 否则为 false ...???？目前我正在对每一行进行分组..

好的，现在考虑我的这个问题。我们如何根据条件隐藏网格面板行？例如我不想显示那些工资大于 rs.20000/- 的记录，当我点击它时我已经放置了一个按钮，然后必须显示工资大于 Rs 的隐藏行。 20000/- 关于 vik

这可以通过过滤来实现。使用 store.filterBy

时，您很可能需要自定义过滤器功能

【参考方案3】：

实现它的一种简单方法可能是使用单个网格，对于每个 ID，它可能会影响性能。 所以，这个想法是：

1) 为每个 ID 创建一个单独的网格，具有单独的存储

2) 限制一次要设置可见的行数（在 store 中使用 getRange()）

3）添加一个按钮，对应每个网格，并执行单击时显示所有行、刷新网格、隐藏按钮（或将文本更改为折叠，并处理单击事件）的动作

注意：会很慢

你可以想出更好的方法来实现这一点，这种方法肯定不需要太多的编码

【讨论】：

好的，我的第二个条件，我们如何在条件基础上隐藏网格面板行？例如我不想显示那些薪水大于 rs.20000/- 的记录，当我单击它时我已经放置了一个按钮，然后必须显示其薪水大于 Rs 的隐藏行。 20000/-。关于维克

使用过滤而不是存储中的范围