gridster.js 序列化创建网格

gridster.js 通过 sort_by_row_and_col_asc、sort_by_row_asc 、sort_by_row_desc 、sort_by_col_asc、sort_by_col_desc   方法序列化网格数组并创建网格。

序列化数组排序

var gridster;
//需要排序的数组
var serialization = [
  { row: 1, col: 1, size_x: 3, size_y: 1 },
  { row: 1, col: 4, size_x: 1, size_y: 1 },
  { row: 2, col: 1, size_x: 4, size_y: 1 },
];
// 还有sort_by_row_asc、sort_by_col_asc、sort_by_col_desc、sort_by_row_desc等
serialization = Gridster.sort_by_row_and_col_asc(serialization);

$(function () {
  //初始化 gridster 对象
  gridster = $(".gridster ul").gridster({
    //每个单元格最小的宽高 单位像素
    widget_base_dimensions: [150, 150],
    //单元格之间的距离
    widget_margins: [5, 5],
    //是否可以放大缩小单元格
    resize: {
      enabled: true
    }
  }).data('gridster');
 
  gridster.remove_all_widgets();
  $.each(serialization, function (index) {
    gridster.add_widget('<li>' + (index+1) + '</li>', this.size_x, this.size_y, this.col, this.row);
  });
});

在线试一试