这是我的代码：
$(document).ready(function () {
$.getJSON("data.json", function(data) {
if (data!=null) {
response = JSON.parse(data)
$.each(response, function(i,value) {
var id_name;id_name="#";
id_name = id_name + value.id;
$(id_name).attr({"data-col":value.col, "data-row":value.row, "data-sizex":value.size_x, "data-sizey":value.size_y});
});
} else {
console.log('No data returned by the server. Continue with the default positions');
}
});
// widget_selector: "> ul"
// Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements.
// widget_margins: [3, 3]
// Horizontal and vertical margins respectively for widgets.
// widget_base_dimensions: [110, 110]
// Base widget dimensions in pixels. The first index is the width, the second is the height.
var grid_canvas = $(".gridster > ul").gridster({
widget_margins: [3, 3],
widget_base_dimensions: [150, 150],
// serialize_params: function($w, wgd) { return { id: $($w).attr('id'),col: wgd.col, row: wgd.row,size_x: wgd.size_x,size_y: wgd.size_y }
// A function to return serialized data for each each widget, used when calling the serialize method. Two arguments are passed:
// $w: the jQuery wrapped HTMLElement which is used to get the id, and wgd: the grid coords object with keys col, row, size_x and size_y.
serialize_params: function($w, wgd)
{
return {
id: $($w).attr('id'),
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y,
};
},
// draggable.stop: function(event, ui){} -- A callback for when dragging stops.
// You can also implement other draggable options based on your requirements
// draggable.start: function(event, ui){} -- A callback for when dragging starts.
// draggable.drag: function(event, ui){} -- A callback for when the mouse is moved during the dragging.
draggable: {
stop: function(event, ui) {
// .serialize( )
// Creates an array of objects representing the current position of all widgets in the grid.
// Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified by the serialize_params option
// JSON.stringify() converts a primitive value, object or array to a JSON-formatted string that can later be parsed with JSON.parse().
var positions = JSON.stringify(this.serialize());
// With HTML5, web pages can store data locally within the user's browser.
// Earlier, this was done with cookies. However, Web Storage is more secure and faster.
// The data is not included with every server request, but used ONLY when asked for.
// It is also possible to store large amounts of data, without affecting the website's performance.
// The data is stored in key/value pairs, and a web page can only access data stored by itself.
localStorage.setItem('positions', positions);
$.post(
"process.php",
{"positions": positions},
function(data) {
// this is where you can check if your data is sent to the server or not.
// A status of 200 implies success
console.log(data);
if (data==200)
console.log("Data successfully sent to the server");
else
console.log("Failed")
}
);
}
}
}).data('gridster');
$('.1x-add').on('click', function() {
grid_canvas.add_widget('<li class="new">...</li>', 1, 1);
});
$('.2x-add').on('click', function() {
grid_canvas.add_widget('<li class="new">...</li>', 2, 1);console.log($(".gridster > ul").html())
});
//Predefined colorscheme, right now static but should be imported from the users choice. Loops through all boxes and randoms a color out of the array.
$('ul li').each(function () {
var back = ["#475f7b;","#75879c","#a3afbd"];
var rand = back[Math.floor(Math.random() * back.length)];
$(this).css('background',rand);
});
})
目前我在json文件中保存元素的位置，如下所示：
[
{\"col\":1,\"row\":1,\"size_x\":1,\"size_y\":1},
{\"col\":1,\"row\":2,\"size_x\":2,\"size_y\":1},
{\"col\":4,\"row\":1,\"size_x\":2,\"size_y\":1}
]
然而..这只是硬编码元素的位置，我有一个新功能：
$('.1x-add').on('click', function() {
grid_canvas.add_widget('<li class="new">...</li>', 1, 1);
});
这正确地添加了一个新的小部件，但我希望能够将完整的元素保存到包含位置的json文件中。喜欢：
[
{<li id="1" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>},
{<li id="2" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>},
{<li id="3" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>}
]
然后从json文件中循环它们。
有人可以帮助我上路吗？
或者保持json的位置，然后将元素存储在另一个json文件中