如何使用gridstack.js从本地存储设置小部件数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (571)

脚本

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

如果用户在选项卡之间单击,则维护新的窗口小部件位置。

问题

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

我已检查本地存储空间以查找我的grid-layout数据,并且新位置存在。

代码示例

这是Codepen,因为我认为SO需要allow-same-origin,因此打破了片段。

// Initialize zurb foundation
$(document).foundation();

$(function() {
  var grid = $('.grid-stack').data('gridstack');

  var options = {
    cellHeight: 40,
    verticalMargin: 28,
    animate: false,
  };

  // Initialize grid-stack widgets
  widgetsInit = function(options) {
    $('.grid-stack').gridstack(options);
    getWidgetData(); // Find and set positions from local storage
  }

  updateVisibleWidgetHeights = function(options) {
    var targetPanel = '.tabs-panel.is-active';

    $(targetPanel + ' .grid-stack .grid-stack-item').each(function(i){
      $(targetPanel + ' .grid-stack').data('gridstack').resize(
        $(targetPanel + ' .grid-stack .grid-stack-item')[i],
        $($(targetPanel + ' .grid-stack .grid-stack-item')[i]).attr('data-gs-width'),
        Math.ceil(($(targetPanel + ' .grid-stack .grid-stack-item .grid-stack-item-content')[i].scrollHeight + $(targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin) / ($(targetPanel + ' .grid-stack').data('gridstack').cellHeight() + $(targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin))
      );
    });
  }

  updateAllWidgetHeights = function(options) {
    $('.grid-stack .grid-stack-item').each(function(i){
      $('.grid-stack').data('gridstack').resize(
        $('.grid-stack .grid-stack-item')[i],
        $($('.grid-stack .grid-stack-item')[i]).attr('data-gs-width'),
        Math.ceil(($('.grid-stack .grid-stack-item .grid-stack-item-content')[i].scrollHeight + $('.grid-stack').data('gridstack').opts.verticalMargin) / ($('.grid-stack').data('gridstack').cellHeight() + $('.grid-stack').data('gridstack').opts.verticalMargin))
      );
    });
  }

  getWidgetData = function() {
    // // Load from local storage
    var serialization = null;
    if (serialization = localStorage.getItem("grid-layout")) {
      _.each(JSON.parse(serialization), function (node) {
        // Update each widget's properties from values in storage
        $('.grid-stack-item[data-custom-id='+ node.id +']').attr({
          'data-gs-x': node.x,
          'data-gs-y': node.y,
          'data-gs-width': node.width,
          'data-gs-height': node.height,
        });
      });
    } else {
      console.log("There was no local storage data to read")
    }
  }

  widgetsInit(options);
  updateVisibleWidgetHeights();

  $('.grid-stack').on('change', function (event, items) {
    // Save data to local storage
    var res = _.map($('.grid-stack .grid-stack-item'), function (el) {
      el = $(el);
      node = el.data('_gridstack_node');
      return {
        // Grab widget properties
        id: el.attr('data-custom-id'),
        x: node.x,
        y: node.y,
        width: node.width,
        height: node.height
      };
    });
    localStorage.setItem("grid-layout", JSON.stringify(res))
  });

  // On tab change update widget heights to the height of the content they contain
  $(document).on('change.zf.tabs', function() {
    updateVisibleWidgetHeights();
  })
});

.grid-stack > .grid-stack-item > .grid-stack-item-content {
    background-color: #fff;
    cursor: move;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
	padding: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>


<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-match-height="false">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>

<div class="tabs-content unstyled" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <div class="grid-stack">
      <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#1</div>
      </div>
      <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#2</div>
      </div>
      <div class="grid-stack-item" data-gs-x="8" data-gs-y="0"data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#3</div>
      </div>
    </div>
  </div>
  <div class="tabs-panel" id="panel2">
    <div class="grid-stack">
      <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#4</div>
      </div>
      <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#5</div>
      </div>
      <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content">#6</div>
      </div>
    </div>
  </div>
</div>
提问于
用户回答回答于

你需要研究一些事情。

可用的默认示例适用于单个实例,而你有多个实例。

你正在gridstack一次性保存和加载,这意味着你没有跟踪元素grid-stack-item,也没有跟踪哪个点属于第一个选项卡或第二个选项卡的实例,

因此,即使你让它工作,它也会尝试将所有6个不同的小部件放在第一个标签中,而不是将它们加载到各自的标签中。

因此,你需要对以下内容进行更改

  • $('.grid-stack').on('change', function (event, items) {
  • getWidgetData()
  • 在你中分配idcustom-data-id属性,grid-stack-items以便它们具有唯一标识符
  • 将标签包装在带有id的conatiner中tabs-cotnainer

对于gridstack的事件更改,你应该创建一个json对象,该对象包含专用于它将存储的选项卡的部分中的点,如下所示。

{
  "items": {
    "panel1": [
      {
        "id": "panel1-item1",
        "x": 0,
        "y": 0,
        "width": 4,
        "height": 2
      },
      {
        "id": "panel1-item2",
        "x": 4,
        "y": 0,
        "width": 4,
        "height": 2
      },
      {
        "id": "panel1-item3",
        "x": 8,
        "y": 0,
        "width": 4,
        "height": 2
      }
    ],
    "panel2": [
      {
        "id": "panel2-item1",
        "x": 0,
        "y": 0,
        "width": 4,
        "height": 2
      },
      {
        "id": "panel2-item2",
        "x": 4,
        "y": 0,
        "width": 4,
        "height": 2
      },
      {
        "id": "panel2-item3",
        "x": 8,
        "y": 0,
        "width": 4,
        "height": 2
      }
    ]
  }
}

替换为以下

$('.grid-stack').on('change', function (event, items) {
    let tabs = $('#tabs-container >ul >li');
    let totalTabs = $('#tabs-container >ul >li').length;

    let storagePositions = {
        items: {}
    };
    $.each(tabs, function (index, elem) {
        let panel = $(elem).find('a').attr('href').replace("#", '');
        let stackItems = $('#' + panel + ' .grid-stack .grid-stack-item');

        storagePositions.items[panel] = _.map(stackItems, function (el) {

            el = $(el);
            node = el.data('_gridstack_node');
            //console.log(node);

            return { // Grab widget properties
                id: el.attr('data-custom-id'),
                x: node.x,
                y: node.y,
                width: node.width,
                height: node.height
            };
        });
    });

    // Save data to local storage
    localStorage.setItem("grid-layout", JSON.stringify(storagePositions))
});

然后以类似的方式加载选项卡

getWidgetData = function () {

    // // Load from local storage
    var serialization = null;
    let tabs = $('#tabs-container >ul >li');
    let totalTabs = $('#tabs-container >ul >li').length;

    if (localStorage.getItem("grid-layout") !== null) {

        serialization = JSON.parse(localStorage.getItem("grid-layout"));



        $.each(tabs, function (index, elem) {
            let panel = $(elem).find('a').attr('href').replace('#', '');
            let myGrid = $('#' + panel + ' .grid-stack').data('gridstack')

            var items = GridStackUI.Utils.sort(serialization.items[panel]);
            _.each(items, function (node) {

                myGrid.update($('div[data-custom-id="' + node.id + '"]'),
                    node.x, node.y, node.width, node.height);
            });
        });
    } else {
        console.log("There was no local storage data to read")
    }
}

您更新的HTML将如下所示

<div id="tabs-container">
    <ul class="tabs dashboard-tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-match-height="false">
        <li class="tabs-title is-active">
            <a href="#panel1" aria-selected="true">Tab 1</a>
        </li>
        <li class="tabs-title">
            <a href="#panel2">Tab 2</a>
        </li>
    </ul>

    <div class="tabs-content unstyled" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1">
            <div class="grid-stack">
                <div class="grid-stack-item" data-custom-id="panel1-item1" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#1</div>
                </div>
                <div class="grid-stack-item" data-custom-id="panel1-item2" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#2</div>
                </div>
                <div class="grid-stack-item" data-custom-id="panel1-item3" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#3</div>
                </div>
            </div>
        </div>
        <div class="tabs-panel" id="panel2">
            <div class="grid-stack">
                <div class="grid-stack-item" data-custom-id="panel2-item1" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#4</div>
                </div>
                <div class="grid-stack-item" data-custom-id="panel2-item2" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#5</div>
                </div>
                <div class="grid-stack-item" data-custom-id="panel2-item3" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                    <div class="grid-stack-item-content">#6</div>
                </div>
            </div>
        </div>
    </div>
</div>

在这里看到完整的工作演示,JSFIDDLE您可以更新两个选项卡中的位置,然后尝试刷新页面,它将显示更新的位置。

注意:只需通过写入localStorage.removeItem("grid-layout")脚本顶部一次删除以前的值,并在第一次运行后删除此行。

所属标签

可能回答问题的人

  • Hanzo

    6 粉丝0 提问7 回答
  • Richel

    9 粉丝0 提问3 回答
  • mariolu

    31 粉丝0 提问2 回答
  • 上云小秘书

    15 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券