fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

表格滚动性能优化

es6
guy 7 years ago
parent
f638558b07
commit
3c9175eb65
7 changed files with 525 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 221
      bi/base.js
  2. 23
      bi/core.js
  3. 221
      docs/base.js
  4. 23
      docs/core.js
  5. 193
      src/base/collection/collection.js
  6. 28
      src/base/grid/grid.js
  7. 23
      src/core/base.js

221
bi/base.js
Unescape View File

@ -2539,6 +2539,7 @@ BI.Collection = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -2588,12 +2589,10 @@ BI.Collection = BI.inherit(BI.Widget, {
for (var index = 0, len = o.items.length; index < len; index++) {
var cellMetadatum = o.cellSizeAndPositionGetter(index);
if (
cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
if (cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
cellMetadatum.width == null || isNaN(cellMetadatum.width) ||
cellMetadatum.x == null || isNaN(cellMetadatum.x) ||
cellMetadatum.y == null || isNaN(cellMetadatum.y)
) {
cellMetadatum.y == null || isNaN(cellMetadatum.y)) {
throw Error();
}
@ -2634,75 +2633,134 @@ BI.Collection = BI.inherit(BI.Widget, {
var top = Math.max(0, scrollTop - o.verticalOverscanSize);
var right = Math.min(this._width, scrollLeft + o.width + o.horizontalOverscanSize);
var bottom = Math.min(this._height, scrollTop + o.height + o.verticalOverscanSize);
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
if (right > 0 && bottom > 0) {
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
//存储所有的left和top
var lefts = {}, tops = {};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
lefts[datum.x] = datum.x;
lefts[datum.x + datum.width] = datum.x + datum.width;
tops[datum.y] = datum.y;
tops[datum.y + datum.height] = datum.y + datum.height;
}
lefts = BI.toArray(lefts);
tops = BI.toArray(tops);
var leftMap = BI.invert(lefts);
var topMap = BI.invert(tops);
//存储上下左右四个边界
var leftBorder = {}, rightBorder = {}, topBorder = {}, bottomBorder = {};
var assertMinBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = Number.MAX_VALUE;
}
};
var assertMaxBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = 0;
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
var startTopIndex = topMap[datum.y] | 0;
var endTopIndex = topMap[datum.y + datum.height] | 0;
for (var k = startTopIndex; k <= endTopIndex; k++) {
var t = tops[k];
assertMinBorder(leftBorder, t);
assertMaxBorder(rightBorder, t);
leftBorder[t] = Math.min(leftBorder[t], datum.x);
rightBorder[t] = Math.max(rightBorder[t], datum.x + datum.width);
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
var startLeftIndex = leftMap[datum.x] | 0;
var endLeftIndex = leftMap[datum.x + datum.width] | 0;
for (var k = startLeftIndex; k <= endLeftIndex; k++) {
var l = lefts[k];
assertMinBorder(topBorder, l);
assertMaxBorder(bottomBorder, l);
topBorder[l] = Math.min(topBorder[l], datum.y);
bottomBorder[l] = Math.max(bottomBorder[l], datum.y + datum.height);
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
renderedKeys.push(datum.index);
}
renderedKeys.push(datum.index);
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
//Todo 左右比较特殊
var minX = BI.min(leftBorder);
var maxX = BI.max(rightBorder);
var minY = BI.max(topBorder);
var maxY = BI.min(bottomBorder);
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
},
_getMaxScrollLeft: function () {
@ -2789,6 +2847,7 @@ BI.Collection = BI.inherit(BI.Widget, {
});
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
},
@ -14613,6 +14672,7 @@ BI.Grid = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -14661,13 +14721,17 @@ BI.Grid = BI.inherit(BI.Widget, {
_calculateChildrenToRender: function () {
var self = this, o = this.options;
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount;
if (height > 0 && width > 0) {
var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft);
var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop);
if (BI.isEmpty(visibleColumnIndices) || BI.isEmpty(visibleRowIndices)) {
return;
}
var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
@ -14685,8 +14749,22 @@ BI.Grid = BI.inherit(BI.Widget, {
var rowStartIndex = overscanRowIndices.overscanStartIndex;
var rowStopIndex = overscanRowIndices.overscanStopIndex;
var renderedCells = [], renderedKeys = [];
//算区间size
var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex);
var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex);
var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex);
var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex);
var top = minRowDatum.offset + verticalOffsetAdjustment;
var left = minColumnDatum.offset + horizontalOffsetAdjustment;
var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size;
var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size;
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var renderedCells = [], renderedKeys = [];
var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
@ -14731,6 +14809,10 @@ BI.Grid = BI.inherit(BI.Widget, {
_height: rowDatum.size
});
}
minX = Math.min(minX, columnDatum.offset + horizontalOffsetAdjustment);
maxX = Math.max(maxX, columnDatum.offset + horizontalOffsetAdjustment + columnDatum.size);
minY = Math.min(minY, rowDatum.offset + verticalOffsetAdjustment);
maxY = Math.max(maxY, rowDatum.offset + verticalOffsetAdjustment + rowDatum.size);
renderedKeys.push(key);
}
}
@ -14762,6 +14844,7 @@ BI.Grid = BI.inherit(BI.Widget, {
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
},

23
bi/core.js
Unescape View File

@ -2163,6 +2163,29 @@ if (!window.BI) {
return true;
},
backFindKey: function (obj, predicate, context) {
predicate = BI.iteratee(predicate, context);
var keys = _.keys(obj), key;
for (var i = keys.length - 1; i >= 0; i--) {
key = keys[i];
if (predicate(obj[key], key, obj)) {
return key;
}
}
},
backFind: function (obj, predicate, context) {
var key;
if (BI.isArray(obj)) {
key = BI.findLastIndex(obj, predicate, context);
} else {
key = BI.backFindKey(obj, predicate, context);
}
if (key !== void 0 && key !== -1) {
return obj[key];
}
},
remove: function (obj, target, context) {
var isFunction = BI.isFunction(target);
target = isFunction || BI.isArray(target) ? target : [target];

221
docs/base.js
Unescape View File

@ -2539,6 +2539,7 @@ BI.Collection = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -2588,12 +2589,10 @@ BI.Collection = BI.inherit(BI.Widget, {
for (var index = 0, len = o.items.length; index < len; index++) {
var cellMetadatum = o.cellSizeAndPositionGetter(index);
if (
cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
if (cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
cellMetadatum.width == null || isNaN(cellMetadatum.width) ||
cellMetadatum.x == null || isNaN(cellMetadatum.x) ||
cellMetadatum.y == null || isNaN(cellMetadatum.y)
) {
cellMetadatum.y == null || isNaN(cellMetadatum.y)) {
throw Error();
}
@ -2634,75 +2633,134 @@ BI.Collection = BI.inherit(BI.Widget, {
var top = Math.max(0, scrollTop - o.verticalOverscanSize);
var right = Math.min(this._width, scrollLeft + o.width + o.horizontalOverscanSize);
var bottom = Math.min(this._height, scrollTop + o.height + o.verticalOverscanSize);
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
if (right > 0 && bottom > 0) {
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
//存储所有的left和top
var lefts = {}, tops = {};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
lefts[datum.x] = datum.x;
lefts[datum.x + datum.width] = datum.x + datum.width;
tops[datum.y] = datum.y;
tops[datum.y + datum.height] = datum.y + datum.height;
}
lefts = BI.toArray(lefts);
tops = BI.toArray(tops);
var leftMap = BI.invert(lefts);
var topMap = BI.invert(tops);
//存储上下左右四个边界
var leftBorder = {}, rightBorder = {}, topBorder = {}, bottomBorder = {};
var assertMinBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = Number.MAX_VALUE;
}
};
var assertMaxBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = 0;
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
var startTopIndex = topMap[datum.y] | 0;
var endTopIndex = topMap[datum.y + datum.height] | 0;
for (var k = startTopIndex; k <= endTopIndex; k++) {
var t = tops[k];
assertMinBorder(leftBorder, t);
assertMaxBorder(rightBorder, t);
leftBorder[t] = Math.min(leftBorder[t], datum.x);
rightBorder[t] = Math.max(rightBorder[t], datum.x + datum.width);
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
var startLeftIndex = leftMap[datum.x] | 0;
var endLeftIndex = leftMap[datum.x + datum.width] | 0;
for (var k = startLeftIndex; k <= endLeftIndex; k++) {
var l = lefts[k];
assertMinBorder(topBorder, l);
assertMaxBorder(bottomBorder, l);
topBorder[l] = Math.min(topBorder[l], datum.y);
bottomBorder[l] = Math.max(bottomBorder[l], datum.y + datum.height);
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
renderedKeys.push(datum.index);
}
renderedKeys.push(datum.index);
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
//Todo 左右比较特殊
var minX = BI.min(leftBorder);
var maxX = BI.max(rightBorder);
var minY = BI.max(topBorder);
var maxY = BI.min(bottomBorder);
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
},
_getMaxScrollLeft: function () {
@ -2789,6 +2847,7 @@ BI.Collection = BI.inherit(BI.Widget, {
});
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
},
@ -14613,6 +14672,7 @@ BI.Grid = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -14661,13 +14721,17 @@ BI.Grid = BI.inherit(BI.Widget, {
_calculateChildrenToRender: function () {
var self = this, o = this.options;
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount;
if (height > 0 && width > 0) {
var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft);
var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop);
if (BI.isEmpty(visibleColumnIndices) || BI.isEmpty(visibleRowIndices)) {
return;
}
var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
@ -14685,8 +14749,22 @@ BI.Grid = BI.inherit(BI.Widget, {
var rowStartIndex = overscanRowIndices.overscanStartIndex;
var rowStopIndex = overscanRowIndices.overscanStopIndex;
var renderedCells = [], renderedKeys = [];
//算区间size
var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex);
var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex);
var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex);
var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex);
var top = minRowDatum.offset + verticalOffsetAdjustment;
var left = minColumnDatum.offset + horizontalOffsetAdjustment;
var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size;
var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size;
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var renderedCells = [], renderedKeys = [];
var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
@ -14731,6 +14809,10 @@ BI.Grid = BI.inherit(BI.Widget, {
_height: rowDatum.size
});
}
minX = Math.min(minX, columnDatum.offset + horizontalOffsetAdjustment);
maxX = Math.max(maxX, columnDatum.offset + horizontalOffsetAdjustment + columnDatum.size);
minY = Math.min(minY, rowDatum.offset + verticalOffsetAdjustment);
maxY = Math.max(maxY, rowDatum.offset + verticalOffsetAdjustment + rowDatum.size);
renderedKeys.push(key);
}
}
@ -14762,6 +14844,7 @@ BI.Grid = BI.inherit(BI.Widget, {
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
},

23
docs/core.js
Unescape View File

@ -13305,6 +13305,29 @@ if (!window.BI) {
return true;
},
backFindKey: function (obj, predicate, context) {
predicate = BI.iteratee(predicate, context);
var keys = _.keys(obj), key;
for (var i = keys.length - 1; i >= 0; i--) {
key = keys[i];
if (predicate(obj[key], key, obj)) {
return key;
}
}
},
backFind: function (obj, predicate, context) {
var key;
if (BI.isArray(obj)) {
key = BI.findLastIndex(obj, predicate, context);
} else {
key = BI.backFindKey(obj, predicate, context);
}
if (key !== void 0 && key !== -1) {
return obj[key];
}
},
remove: function (obj, target, context) {
var isFunction = BI.isFunction(target);
target = isFunction || BI.isArray(target) ? target : [target];

193
src/base/collection/collection.js
Unescape View File

@ -27,6 +27,7 @@ BI.Collection = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -76,12 +77,10 @@ BI.Collection = BI.inherit(BI.Widget, {
for (var index = 0, len = o.items.length; index < len; index++) {
var cellMetadatum = o.cellSizeAndPositionGetter(index);
if (
cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
if (cellMetadatum.height == null || isNaN(cellMetadatum.height) ||
cellMetadatum.width == null || isNaN(cellMetadatum.width) ||
cellMetadatum.x == null || isNaN(cellMetadatum.x) ||
cellMetadatum.y == null || isNaN(cellMetadatum.y)
) {
cellMetadatum.y == null || isNaN(cellMetadatum.y)) {
throw Error();
}
@ -122,75 +121,134 @@ BI.Collection = BI.inherit(BI.Widget, {
var top = Math.max(0, scrollTop - o.verticalOverscanSize);
var right = Math.min(this._width, scrollLeft + o.width + o.horizontalOverscanSize);
var bottom = Math.min(this._height, scrollTop + o.height + o.verticalOverscanSize);
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
if (right > 0 && bottom > 0) {
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = [];
//存储所有的left和top
var lefts = {}, tops = {};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
lefts[datum.x] = datum.x;
lefts[datum.x + datum.width] = datum.x + datum.width;
tops[datum.y] = datum.y;
tops[datum.y + datum.height] = datum.y + datum.height;
}
lefts = BI.toArray(lefts);
tops = BI.toArray(tops);
var leftMap = BI.invert(lefts);
var topMap = BI.invert(tops);
//存储上下左右四个边界
var leftBorder = {}, rightBorder = {}, topBorder = {}, bottomBorder = {};
var assertMinBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = Number.MAX_VALUE;
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
};
var assertMaxBorder = function (border, offset) {
if (border[offset] == null) {
border[offset] = 0;
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = BI.deepIndexOf(this.renderedKeys, datum.index);
if (index > -1) {
if (datum.width !== this.renderedCells[index]._width) {
this.renderedCells[index]._width = datum.width;
this.renderedCells[index].el.setWidth(datum.width);
}
if (datum.height !== this.renderedCells[index]._height) {
this.renderedCells[index]._height = datum.height;
this.renderedCells[index].el.setHeight(datum.height);
}
if (this.renderedCells[index].left !== datum.x) {
this.renderedCells[index].el.element.css("left", datum.x + "px");
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
}
if (this.renderedCells[index].top !== datum.y) {
this.renderedCells[index].el.element.css("top", datum.y + "px");
var startTopIndex = topMap[datum.y] | 0;
var endTopIndex = topMap[datum.y + datum.height] | 0;
for (var k = startTopIndex; k <= endTopIndex; k++) {
var t = tops[k];
assertMinBorder(leftBorder, t);
assertMaxBorder(rightBorder, t);
leftBorder[t] = Math.min(leftBorder[t], datum.x);
rightBorder[t] = Math.max(rightBorder[t], datum.x + datum.width);
}
renderedCells.push(this.renderedCells[index]);
} else {
var child = BI.createWidget(BI.extend({
type: "bi.label",
width: datum.width,
height: datum.height
}, o.items[datum.index], {
cls: (o.items[datum.index].cls || "") + " container-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
_left: datum.x,
_top: datum.y
}));
renderedCells.push({
el: child,
left: datum.x,
top: datum.y,
_width: datum.width,
_height: datum.height
});
var startLeftIndex = leftMap[datum.x] | 0;
var endLeftIndex = leftMap[datum.x + datum.width] | 0;
for (var k = startLeftIndex; k <= endLeftIndex; k++) {
var l = lefts[k];
assertMinBorder(topBorder, l);
assertMaxBorder(bottomBorder, l);
topBorder[l] = Math.min(topBorder[l], datum.y);
bottomBorder[l] = Math.max(bottomBorder[l], datum.y + datum.height);
}
renderedKeys.push(datum.index);
}
renderedKeys.push(datum.index);
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
//Todo 左右比较特殊
var minX = BI.min(leftBorder);
var maxX = BI.max(rightBorder);
var minY = BI.max(topBorder);
var maxY = BI.min(bottomBorder);
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
//已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (BI.deepContains(self.renderedKeys, key)) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
if (BI.deepContains(existSet, key)) {
return;
}
if (BI.deepContains(addSet, key)) {
return;
}
deleteArray.push(i);
});
BI.each(deleteArray, function (i, index) {
self.renderedCells[index].el.destroy();
});
var addedItems = [];
BI.each(addSet, function (index) {
addedItems.push(renderedCells[index])
});
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
},
_getMaxScrollLeft: function () {
@ -277,6 +335,7 @@ BI.Collection = BI.inherit(BI.Widget, {
});
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
},

28
src/base/grid/grid.js
Unescape View File

@ -30,6 +30,7 @@ BI.Grid = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
@ -78,13 +79,17 @@ BI.Grid = BI.inherit(BI.Widget, {
_calculateChildrenToRender: function () {
var self = this, o = this.options;
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount;
if (height > 0 && width > 0) {
var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft);
var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop);
if (BI.isEmpty(visibleColumnIndices) || BI.isEmpty(visibleRowIndices)) {
return;
}
var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
@ -102,8 +107,22 @@ BI.Grid = BI.inherit(BI.Widget, {
var rowStartIndex = overscanRowIndices.overscanStartIndex;
var rowStopIndex = overscanRowIndices.overscanStopIndex;
var renderedCells = [], renderedKeys = [];
//算区间size
var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex);
var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex);
var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex);
var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex);
var top = minRowDatum.offset + verticalOffsetAdjustment;
var left = minColumnDatum.offset + horizontalOffsetAdjustment;
var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size;
var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size;
//如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var renderedCells = [], renderedKeys = [];
var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
@ -148,6 +167,10 @@ BI.Grid = BI.inherit(BI.Widget, {
_height: rowDatum.size
});
}
minX = Math.min(minX, columnDatum.offset + horizontalOffsetAdjustment);
maxX = Math.max(maxX, columnDatum.offset + horizontalOffsetAdjustment + columnDatum.size);
minY = Math.min(minY, rowDatum.offset + verticalOffsetAdjustment);
maxY = Math.max(maxY, rowDatum.offset + verticalOffsetAdjustment + rowDatum.size);
renderedKeys.push(key);
}
}
@ -179,6 +202,7 @@ BI.Grid = BI.inherit(BI.Widget, {
this.container.addItems(addedItems);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
this.renderRange = {minX: minX, minY: minY, maxX: maxX, maxY: maxY};
}
},

23
src/core/base.js
Unescape View File

@ -268,6 +268,29 @@ if (!window.BI) {
return true;
},
backFindKey: function (obj, predicate, context) {
predicate = BI.iteratee(predicate, context);
var keys = _.keys(obj), key;
for (var i = keys.length - 1; i >= 0; i--) {
key = keys[i];
if (predicate(obj[key], key, obj)) {
return key;
}
}
},
backFind: function (obj, predicate, context) {
var key;
if (BI.isArray(obj)) {
key = BI.findLastIndex(obj, predicate, context);
} else {
key = BI.backFindKey(obj, predicate, context);
}
if (key !== void 0 && key !== -1) {
return obj[key];
}
},
remove: function (obj, target, context) {
var isFunction = BI.isFunction(target);
target = isFunction || BI.isArray(target) ? target : [target];

Write Preview
Loading…
Cancel
Save