仅使用视图创建FooTable功能

Question

我注意到，在我的Drupal 8站点的视图上使用FooTable显示，会使视图的加载时间增加2000 ms以上。

我使用Footable的主要想法是，当您单击该表行(可折叠字段)时，可以将字段隐藏在表行中并使其可见。

我是否可以仅使用带有可折叠字段的视图进行构建，而不安装Footable模块？

任何帮助建议只是为了让我开始！

下面是我试图仅使用视图核心模块构建的图像：

注意:在我的情况下，表的响应性并不重要！

我希望该表始终显示4列(每个列中有一个字段)，当单击“查看更多”链接时，其他字段将显示/隐藏在可折叠的手风琴中。

Answer 1

提供“可折叠”功能的模块是观点手风琴，所以您也许可以尝试一下，看看它的性能是否更好。

但是它不会根据浏览器的宽度改变布局。

解决这一问题的正确方法是使用CSS。您可以使用CSS网格使字段在更宽的宽度上显示为表，并在窄宽度上将其中的一个放在另一个下面。您甚至可以重新创建手风琴，查看某些字段最初隐藏的位置，单击可见的字段显示所有其他字段。我希望这个解决方案在性能上得分最高，但是我不知道任何为D8提供它的贡献模块，您可以自己构建它的子主题。

对于D7，有查看CSS表。

CSS路由可能不支持一些较旧的浏览器，因此它取决于您的项目访问者的统计数据，如果它是安全的。

编辑:是的，我认为这是可以做到的，虽然我从来没有尝试过这样的观点，而且它肯定不是微不足道的。您需要学习的概念是：

• @根据浏览器宽度限制代码的查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_查询/使用_媒体_查询或任何其他教程，
• 您将需要一个"CSS手风琴“，只需搜索它，下面是一个示例：https://codepen.io/raphaelgoetter/pen/bBXPYP，或者您可以使用<details>：https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/代替CSS手风琴。
• 您必须自己构建“查看更多”链接，要么使用简单的重写字段输出来匹配Details HTML，要么使用视图行的ID为CSS手风琴应用::focus。
• 您将需要"CSS网格“将字段布局构造为一个部分表：https://gridbyexample.com/examples/