[英]How to build grid from Gridstack with saved html
I've been using Gridstack for dynamically creating a grid. 我一直在使用Gridstack来动态创建网格。 I have used the following function to serialize the grid and it's data.
我使用以下函数来序列化网格及其数据。 But I can't seem to figure out how to build my grid and its content from the JSON array it created.
但我似乎无法弄清楚如何建立自己的网格,并从它创建的JSON数组的内容。 Ive checked https://github.com/troolee/gridstack.js#load-grid-from-array , but adding the content part is the whole problem.
我已经检查了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()
});
});
}
And that creates the following array: 这会创建以下数组:
[
{"x":"0","y":"0","w":"4","h":"2","content":"<h1>Test title for content</h1>"},
{"x":"4","y":"0","w":"4","h":"4","content":""}
];
So my question is: how can I build my grid, including its content, using this array? 所以我的问题是:如何使用这个数组构建我的网格,包括其内容?
I answered a similar question here . 我在这里回答了类似的问题。
In your case, you can use the following code in the load function provided by the gridstack serialization example: 在您的情况下,您可以在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 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.