问题标签 [gridstack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2130 浏览

css - 未设置 gridstack 边距宽度 - 项目在每一行上相互接触

我第一次使用 gridstack,但水平边距有问题。很明显,我的 css 中有一些东西使我的项目太宽了。

我在演示中看到 gridstack.css 的左右设置为 10px,我使用的是相同的默认 css。

我已将 gridstack 设置为使用 6 列,如下所示:

我正在使用以下选项:

我包括 gridstack-extra 和 gridstack.css。

为什么我的项目根本没有水平边距?

非常感谢

0 投票
2 回答
708 浏览

javascript - 变更检测中的Angular 2 + GridStack错误?

我正在开发一个应用程序,而 GridStack 不仅可以很好地与 A2 配合使用,我还设法在 webpack 中对其进行了转换,但是该插件有两个主要缺陷,我必须声明 ngFor 呈现的项目是 gridstack 项目然后破解触发窗口调整大小更新以显示元素的更新。

到目前为止它正在工作,但第二个缺陷非常糟糕,发生的情况是 ngFor 制作的 A2 模型停止传播数据的更改,这完全是错误的,任何人都知道如何修复,更好的插件或其他东西仪表板页面?

也许最好用手来做,虽然我失去了拖放功能以及响应能力。

0 投票
0 回答
1485 浏览

javascript - Gridstack 两个网格

当我们将项目从一个容器拖到另一个容器时,使用带有两个网格的 gridstack 项目消失。有时它不会在第一次拖动中发生。

我确实使用了官方示例并进行了一些更改:

http://troolee.github.io/gridstack.js/demo/two.html

我的代码有问题:

http://codepen.io/ricardo85x/pen/vGzXwO

0 投票
1 回答
2184 浏览

javascript - GridStack 项目的高度和宽度(以像素为单位)

我的每个 GridStack 项目(想想图表)中都有元素,当 gridstack 项目(单元格)大小发生变化时需要重新渲染。我想在 GridStack 上使用更改事件来识别更改的项目并触发一个自定义事件,其中包含内部元素侦听的每个项目的大小和宽度。

现在的问题是更改事件以其格式报告新的高度和宽度,但我需要实际的新像素来触发正确的事件。在项目本身上使用 jquery 不起作用,因为它不会报告快照后大小。

1> 如何将 GridStack 的高度和宽度转换为像素?

2>有没有更好的方法来做我想做的事情。我的意思是一种更好的方法来通知每个网格项中的元素有关大小项大小(以像素为单位)的信息?

0 投票
2 回答
1936 浏览

gridstack - Gridstack:更改项目之间的空间

希望我只是遗漏了一些简单的东西,但是项目(“grid-stack-item”div)之间的空间太大了。我想要一个网格,其中项目更靠近一点。我希望也许有人有一个代码笔或小提琴来展示如何减少项目之间的空间(缩小列)。

在此处输入图像描述

相关代码:

0 投票
2 回答
679 浏览

javascript - Jquery - 如何从 e.target 获取嵌套 DIV 的 ID?

这段代码:

输出:

到 console.log。我正在尝试使用 jquery 获取 cars-sold-minute-block 的 ID,但没有成功。使用事件目标时如何获取 id?

编辑:我不想命名 id,因为这将用于许多不同的元素。

0 投票
1 回答
834 浏览

scroll - 拖动 gridstack 卡时滚动内容

我正在使用 gridstack 来显示我的小部件。拖动和调整大小对于 gridstack 卡片效果很好,但是当我将卡片拖到底部时,卡片的容器不会滚动。我想在拖动卡片时滚动该容器。该容器只是一个 div 元素,所有卡片都添加到该容器中。(我在骨干网工作并使用下划线、jQuery 和 gridstack。)

0 投票
1 回答
3250 浏览

javascript - 如何将部分视图生成的 HTML 插入到 javascript 代码中?

我在我的 asp.net mvc Web 应用程序中使用网格堆栈来实现拖放功能。

我有一个“添加小部件”按钮....

我还有一堆 MVC5 部分页面(Razor),每个“小部件”一个文件。当我单击“添加小部件”按钮时,我想在页面上插入一个小部件。现在这里是按钮点击事件的js代码......

是的,那是与 js 混合的 Razor 代码。而且,不幸的是,正如您可能已经猜到的那样,它根本不喜欢 partialView。

我试图基本上将生成的部分视图转换为字符串,以便我可以在 addWidget 函数中使用该 html 字符串。如果我对 partialView 进行硬编码,这可以工作并添加小部件。

有任何想法吗?谢谢!

0 投票
0 回答
226 浏览

javascript - Gridstact:使小部件静态和类型错误

我是 javascript 和 gridstack 的新手。我的工作是创建一个基于 gridstack 的仪表板。我的目标最接近的例子是 demo example knockout.html。另外,我需要在此示例的基础上添加几个新功能。这是我面临的问题。

  1. 我需要为每个小部件添加一个下拉菜单并将其添加到模板中,请参阅下面附加的代码。现在我正在使用一个按钮来切换下拉菜单。我可以使用鼠标右键单击显示下拉菜单吗?

  2. 当我添加名为 toggleDropdownMenu 的方法时,我收到一个类型错误为“TypeError:this.toggleDropdownMenu 不是函数”,这个函数应该在某个地方定义吗?

  3. 我想让指定的小部件成为静态的。我在创建诸如 staticGrid: true 之类的小部件时添加了一个 attr 设置,但不起作用。如何解决这个问题?

  4. 对于每个仪表板,每个小部件的下拉菜单都不同。如何为每个小部件附加带有不同项目的下拉菜单?

请参考代码...非常感谢您的任何建议!

0 投票
1 回答
2609 浏览

jquery - 如何将“id”添加到 GridStack 中的小部件

我想在我的项目中使用 Gridstack,我正在使用它,现在我正在添加带有 JSON 数据的小部件。我无法向小部件添加 id。

这是JsFiddle的链接。这个“id”非常重要,因为没有它我将无法从数据库中保存/检索数据。

根据Guthub 上的这篇文章,我将 id 提供给 ** grid.add_widget** 方法。但我不知道如何访问它。