Question

假设我有一个正常运行的Gridster网格

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
  </ul>
</div>

现在我想让它成为一个网格可以有三个部分：header，body和footer。

例如

<div class="gridster">
  <ul>
    <!-- header begin -->
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- header end -->
    <!-- body begin -->
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- body end -->
    <!-- footer begin -->
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- footer end -->
  </ul>
</div>

我想要实现的是在一个gridster实例中有三个独立的网格部分。页眉和页脚都没有固定的行数。用户应该能够在页眉，正文和页脚之间拖动小部件，然后相应地增加页眉和页脚高度。

我想避免为此使用多个gridster实例，因为网格的数据将被保存，并且正文可以是12页A4长，并且在多个实例中执行时间和内存使用量要大得多。

有没有人对如何实现这个目标有任何想法？

更新（29/04）：

在布局方面，我发现最佳解决方案是：

<div class="gridster">
  <ul class="gheader"></ul>
  <ul class="gbody"></ul>
  <ul class="gfooter"></ul>
</div>

有了这个，我可以在调用$(".gridster ul").gridster();时有三个网格区域。

当我静态加载一些小部件时，我可以很好地在各自的ul中移动它们但是当我动态添加带有add_widget功能的小部件时，小部件会被添加到第一个小部件中仅ul {在这种情况下为.gheader）并在它们之间拖动仍然需要弄明白。

我目前的init gridster代码：

Formbuilder.initGrid = function(selector){
  $(selector).gridster({
    widget_margins: [0, 0],
    widget_base_dimensions: [this.baseWidth, this.baseHeight],
    max_cols: 10,
    min_rows: 10,
    max_size_x: 10,
    shift_larger_widgets_down: false,
    resize: {
      enabled: true,
      max_size: [10, 10]
    }
  });

  gridster = $(selector).gridster().data("gridster");

  return gridster;
}

一个gridster实例中的多个网格区域

0 个答案: