问题标签 [gridstack]

我有一些 gridster 小部件。我想在它们上显示来自 json 的文本内容（后端数据库，为了简单起见，我现在将对其进行硬编码）。

默认函数可以从 json 变量生成网格。但我也想在生成小部件后立即在这些小部件上显示文本

我的 JS 代码从数据库中获取变量并从中生成一个网格

我的 HTML

我得到的 JSON 是默认形式

我只想要网格上的文本内容（通过修改 JSON 等）或任何方式

我正在尝试制作具有固定标题和自动调整高度的表格，以用tbody填充包装 div 的铰孔空间。我花了几天时间来解决这个问题，但每个解决方案都有自己的问题，我很想向你寻求帮助。

我正在研究Vue和Gridstack，因为我想拥有可调整大小和可拖动的模块。

I. https://codepen.io/anon/pen/eMpXrN
- 适用于 Mac（Chrome 和 Safari）
- 不适用于 Windows，Edge：标题不固定
- 不适用于 Windows，Chrome：滚动时在 tbody 上可见，标题与列不匹配（tbody 被移动）；示例：https ://www.dropbox.com/s/e730d7z4p10wpoe/Zrzut%20ekranu%202018-03-13%2011.20.30.png?dl=0 ）

二、https://codepen.io/anon/pen/LdpaKz
- 工作得几乎完美，但如果我们水平滚动，标题不会跟随内容 - 例如：https ://www.dropbox.com/s/jqe0b0k8a3qcr0v/Zrzut% 20ekranu%202018-03-13%2011.25.18.png?dl=0

总结：
到目前为止，我已经花了几天时间，试图建立工作台。我尝试过基于 flexbox 的表格（除了无法修复标题之外，效果很好），常规表格。我失败得很惨。
我正在寻找的是创建表格：
- 不需要 jQuery（它可以使用 vanilla JS）
- 有固定的标题
- 水平滚动两个标题的内容
- 自动调整单元格的宽度以防用户调整大小它（并为该列的列和标题保持相同的宽度）

真的是不可能的事情吗？我想观察列的宽度并相应地调整标题的宽度，但是使用 gridstack，DOM 不会在 vue 中更新它的宽度。

PS。我必须获得可以修改的常规 DOM（而不是只注入数据数组），因为表中可能有复杂的元素。

我已经尝试过数据表，但在调整大小时无法填充 gridstack 包装器。

谢谢！

正如标题所示，我在禁用移动或拖动网格小部件时遇到问题。我试过使用data-gs-no-move,data-gs-locked和data-gs-no-resizeGridStack 文档中列出的，但它仍然可以在我的浏览器中拖动和移动。有什么解决方法吗？

目前使用GridStack 0.2.6.

我在这个 CodePen 中重新创建了这个问题：

https://codepen.io/GeorgeBT97/pen/BxKdEW

如您所见，如果您调整 Gridstack tile 的大小，尽管 Highchart 设置为其父 div 的高度和宽度的 100%，但它并不会随之调整大小。

我看过这个线程：

https://github.com/gridstack/gridstack.js/issues/792

其中说使用这种方法应该可以解决问题：

但是，我不知道如何或在哪里实施它来解决问题。如果有人可以解释，将不胜感激。附带说明一下，尽管 Highchart 容器默认设置为其父 div 的 100% 高度和宽度，但您可以在 CodePen 中清楚地看到它不是 div 的完整高度 - 谁能解释这是为什么?

非常感谢，G

我正在使用 gridstack 开发一个应用程序，我想使用 RGraph 库将多个图形（线条和仪表）放在不同的容器中。

我无法使图形填充容器的宽度和高度。此外，当我更改大小时，我希望图形适应容器。

我有一个例子：

代码 JSFiddle

我已经实现了 Gridstack，但我不知道如何使项目粘住。

单击时固定项目，即它们移动到顶部并且不能移动或拖动。可以固定更多项目，它们将从左到右，从上到下流动。

设想

我有一个仪表板，其中一些小部件分组到用户可以单击的选项卡中。小部件具有默认的起始高度，并且当它们包含的内容（图表、图形、表格等）呈现时，它们的高度会更新。

我目前仅在页面加载的活动选项卡中更新小部件的高度，然后当用户单击不同的选项卡时更新这些小部件。

问题

在更新高度之前，我必须使用 asetTimeout来确保活动选项卡可见，这意味着小部件在单击后会立即向下滑动，而不是立即以最佳高度出现。

问题

1. 有没有办法在加载时更新所有小部件的高度，即使是隐藏在其他选项卡上的那些display:none？

我尝试使用:visible和:hidden选择器，但它没有用。

2. 我是否应该坚持当前的性能方法，因为最终可能会在许多选项卡中出现许多小部件？如果是这样，是否可以在没有 a 的情况下完成，setTimeout因为我只是猜测 200 毫秒的延迟就足够了。

剥离示例

下面的示例，加上Codepen。

设想

我有一个仪表板，其中一些小部件分组到用户可以单击的选项卡中。小部件具有默认的起始位置，包括高度和宽度，但如果用户移动或调整它们的大小（使用gridstack.js），我会将新的小部件数据保存到本地存储。

如果用户在选项卡之间单击，则保持新的小部件位置。

问题

当用户刷新页面时，会加载默认的小部件位置，而不是本地存储中的数据。我尝试使用设置新位置，getWidgetData()但没有运气。

我已经检查了我的grid-layout数据的本地存储并且存在新位置。

代码示例

这是Codepen，因为我认为 SO 需要allow-same-origin，因此破坏了代码段。

我需要在我的应用程序中禁用水平拖动或调整大小选项。我正在使用gridstack.js插件。

我正在使用带有 acceptWidgets 的 gridstack 将小部件从左侧面板拖放到主面板，类似于http://gridstackjs.com/demo/two.html

就我而言，我想为我的“grid-stack-item”设置高度、宽度和其他项目属性。但是，设置这些属性不会影响项目何时被放到网格堆栈中。

这是一个 JSFiddle：https ://jsfiddle.net/trevisan/wt7bg6s1/8/

请注意，“Drag me”元素具有 data-gs-width="6" ，因为我的 gridstack 有 6 列，因此我希望它可以拉伸。

我曾尝试调用makeWidget方法，但最终我的 gridstack 上有两个小部件。

有谁知道如何解决这个问题？