针对 jQuery Gridly 控件显示多少列的问题。

针对 jQuery Gridly 控件显示多少列的问题,完全根据 columns 的值来显示。

但是显示columns,并不是给多少值显示几列。到目前还是很模糊的。官方文档没有给出具体的一个解释。

$('.gridly').gridly({
base: 60, // px
gutter: 20, // px
columns: $("#FormColumnCount").val() * 3,
callbacks: {
reordered: function ($elements) {

// Called after the drag and drop ends with the elements in their ending position.
// 当前对象
var currentObj = this.reordered.arguments[1];

var arr = $elements;
// 前一个对象
var prevObj;
// 后一个对象
var afterObj;
for (i = 0; i < arr.length; i++) {
$(arr[i]).find('input[name=SortBy]').val((i + 2) * 10);
}

//执行保存排序,更新数据
//sortData...
}
}
});

  

决定坐标的代码如下:

   Gridly.prototype.position = function($element, columns) {
      var column, height, i, j, k, max, ref, ref1, ref2, size;
      size = this.size($element);
      height = Infinity;
      column = 0;
      for (i = j = 0, ref = columns.length - size; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
        max = Math.max.apply(Math, columns.slice(i, i + size));
        if (max < height) {
          height = max;
          column = i;
        }
      }
      for (i = k = ref1 = column, ref2 = column + size; ref1 <= ref2 ? k < ref2 : k > ref2; i = ref1 <= ref2 ? ++k : --k) {
        columns[i] = height + ($element.data('height') || $element.outerHeight()) + this.settings.gutter;
      }
      return {
        x: column * (this.settings.base + this.settings.gutter),
        y: height
      };
    };

  

原文地址:https://www.cnblogs.com/vincentvoid/p/6758828.html