Cómo construir la cuadrícula de Gridstack con html guardado

He estado usando Gridstack para crear dinámicamente una cuadrícula. He utilizado la siguiente función para serializar la cuadrícula y sus datos. Pero parece que no puedo entender cómo construir mi cuadrícula y su contenido a partir de la matriz JSON que creó. He revisado https://github.com/troolee/gridstack.js#load-grid-from-array , pero agregar la parte del contenido es todo el problema.

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() }); }); } 

Y eso crea la siguiente matriz:

 [ {"x":"0","y":"0","w":"4","h":"2","content":"

Test title for content

"}, {"x":"4","y":"0","w":"4","h":"4","content":""} ];

Entonces, mi pregunta es: ¿cómo puedo construir mi cuadrícula, incluido su contenido, utilizando esta matriz?

Aquí respondí una pregunta similar.

En su caso, puede usar el siguiente código en la función de carga provista por el ejemplo de serialización de 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( '
' + node.content + '
' ), node.x, node.y, node.width, node.height ); }, this ); }.bind( this );