如何從Gridstack建立網格與保存的HTML

Question

我一直在使用Gridstack動態創建網格。我已經使用以下函數來序列化網格及其數據。但我似乎無法弄清楚如何構建我的網格和它的內容來自它創建的JSON數組。我檢查了https://github.com/troolee/gridstack.js#load-grid-from-array，但添加內容部分是整個問題。

function saveData() { 
     var s_data = []; 

     $('.grid-stack-item.ui-draggable').each(function() { 
      var $this = $(this); 

      s_data.push({ 
       x: $this.attr('data-gs-x'), 
       y: $this.attr('data-gs-y'), 
       w: $this.attr('data-gs-width'), 
       h: $this.attr('data-gs-height'), 
       content: $('.grid-stack-item-content', $this).html() 
      }); 
     });   
    } 

以及創建下面的數組：

[ 
    {"x":"0","y":"0","w":"4","h":"2","content":"<h1>Test title for content</h1>"}, 
    {"x":"4","y":"0","w":"4","h":"4","content":""} 
]; 

所以我的問題是：如何建立我的網格，包括它的內容，用此陣？

Answer 1

我回答了類似的問題here。

在你的情況，你可以通過gridstack系列化例如提供負載的功能使用下面的代碼：

this.load_grid = function() {    

    var items = GridStackUI.Utils.sort(this.s_data); 
    this.grid.remove_all(); 

    _.each(items, function(node) { 
     this.grid.add_widget(jQuery('<div class="grid-stack-item"><div class="grid-stack-item-content">' + node.content + '</div></div>'), node.x, node.y, node.width, node.height); 
    }, this); 

}.bind(this);