我正在使用gridstack.js(v0.2.6)库作为Web应用程序中的仪表板视图。我试图让用户改变网格宽度。几乎所有东西似乎都在工作,但我遇到了maxWidth
小部件的问题。将窗口小部件的maxWidth
设置为比网格列数更大的值似乎会导致窗口小部件的大小调整。例如,当我设置gridWidth = 3
和窗口小部件maxWidth = 5
时,我可以将窗口小部件调整为最大~1.3 *列宽而不是3列。
我提供了最重要的代码部分:
HTML
<div class="grid-stack grid-stack-3">
</div>
的Javascript
初始化:
var $dashboard = $('.grid-stack');
var columnsNumber = 3;
function initGridStack() {
$dashboard[0].className = "grid-stack grid-stack-" + columnsNumber;
var options = {
cell_height: 200,
vertical_margin: 10,
animate: true,
width: columnsNumber,
draggable: {
handle: '.widget-header',
}
};
$dashboard.gridstack(options);
添加小部件:
// ...
$widget = createWidgetElement()
$dashboard.data('gridstack').addWidget($widget, x, y, width, height, autoposition, minWidth, maxWidth, minHeight, maxHeight);
问题
有没有人有类似的问题,并且知道我该如何处理?我会感激任何帮助。