|
|
@ -5,9 +5,11 @@ |
|
|
|
* @class BI.GridView |
|
|
|
* @class BI.GridView |
|
|
|
* @extends BI.Widget |
|
|
|
* @extends BI.Widget |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
import { Widget, shortcut } from "../../core"; |
|
|
|
_defaultConfig: function () { |
|
|
|
@shortcut() |
|
|
|
return BI.extend(BI.GridView.superclass._defaultConfig.apply(this, arguments), { |
|
|
|
export default class GridView extends Widget { |
|
|
|
|
|
|
|
_defaultConfig() { |
|
|
|
|
|
|
|
return BI.extend(super._defaultConfig(arguments), { |
|
|
|
baseCls: "bi-grid-view", |
|
|
|
baseCls: "bi-grid-view", |
|
|
|
// width: 400, //必设
|
|
|
|
// width: 400, //必设
|
|
|
|
// height: 300, //必设
|
|
|
|
// height: 300, //必设
|
|
|
@ -28,50 +30,54 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
scrollLeft: 0, |
|
|
|
scrollLeft: 0, |
|
|
|
scrollTop: 0, |
|
|
|
scrollTop: 0, |
|
|
|
items: [], |
|
|
|
items: [], |
|
|
|
itemFormatter: function (item, row, col) { |
|
|
|
itemFormatter: (item, row, col) => { |
|
|
|
return item; |
|
|
|
return item; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
static xtype = "bi.grid_view"; |
|
|
|
|
|
|
|
static EVENT_SCROLL = "EVENT_SCROLL"; |
|
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
render() { |
|
|
|
var self = this, o = this.options; |
|
|
|
const o = this.options; |
|
|
|
|
|
|
|
const { overflowX, overflowY, el } = this.options; |
|
|
|
this.renderedCells = []; |
|
|
|
this.renderedCells = []; |
|
|
|
this.renderedKeys = []; |
|
|
|
this.renderedKeys = []; |
|
|
|
this.renderRange = {}; |
|
|
|
this.renderRange = {}; |
|
|
|
this._scrollLock = false; |
|
|
|
this._scrollLock = false; |
|
|
|
this._debounceRelease = BI.debounce(function () { |
|
|
|
this._debounceRelease = BI.debounce(() => { |
|
|
|
self._scrollLock = false; |
|
|
|
this._scrollLock = false; |
|
|
|
}, 1000 / 60); |
|
|
|
}, 1000 / 60); |
|
|
|
this.container = BI._lazyCreateWidget({ |
|
|
|
this.container = BI._lazyCreateWidget({ |
|
|
|
type: "bi.absolute", |
|
|
|
type: "bi.absolute", |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.element.scroll(function () { |
|
|
|
this.element.scroll(() => { |
|
|
|
if (self._scrollLock === true) { |
|
|
|
if (this._scrollLock === true) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
o.scrollLeft = self.element.scrollLeft(); |
|
|
|
o.scrollLeft = this.element.scrollLeft(); |
|
|
|
o.scrollTop = self.element.scrollTop(); |
|
|
|
o.scrollTop = this.element.scrollTop(); |
|
|
|
self._calculateChildrenToRender(); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
self.fireEvent(BI.GridView.EVENT_SCROLL, { |
|
|
|
this.fireEvent(GridView.EVENT_SCROLL, { |
|
|
|
scrollLeft: o.scrollLeft, |
|
|
|
scrollLeft: o.scrollLeft, |
|
|
|
scrollTop: o.scrollTop, |
|
|
|
scrollTop: o.scrollTop, |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 兼容一下
|
|
|
|
// 兼容一下
|
|
|
|
var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly; |
|
|
|
let scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly; |
|
|
|
if (o.overflowX === false) { |
|
|
|
if (overflowX === false) { |
|
|
|
if (o.overflowY === false) { |
|
|
|
if (overflowY === false) { |
|
|
|
scrollable = false; |
|
|
|
scrollable = false; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
scrollable = "y"; |
|
|
|
scrollable = "y"; |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (o.overflowY === false) { |
|
|
|
if (overflowY === false) { |
|
|
|
scrollable = "x"; |
|
|
|
scrollable = "x"; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
BI._lazyCreateWidget(o.el, { |
|
|
|
BI._lazyCreateWidget(el, { |
|
|
|
type: "bi.vertical", |
|
|
|
type: "bi.vertical", |
|
|
|
element: this, |
|
|
|
element: this, |
|
|
|
scrollable: scrollable, |
|
|
|
scrollable: scrollable, |
|
|
@ -79,111 +85,113 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
scrollx: scrollx, |
|
|
|
scrollx: scrollx, |
|
|
|
items: [this.container], |
|
|
|
items: [this.container], |
|
|
|
}); |
|
|
|
}); |
|
|
|
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { |
|
|
|
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { |
|
|
|
self.populate(newValue); |
|
|
|
this.populate(newValue); |
|
|
|
}) : o.items; |
|
|
|
}) : o.items; |
|
|
|
if (o.items.length > 0) { |
|
|
|
if (o.items.length > 0) { |
|
|
|
this._calculateSizeAndPositionData(); |
|
|
|
this._calculateSizeAndPositionData(); |
|
|
|
this._populate(); |
|
|
|
this._populate(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// mounted之后绑定事件
|
|
|
|
// mounted之后绑定事件
|
|
|
|
mounted: function () { |
|
|
|
mounted() { |
|
|
|
var o = this.options; |
|
|
|
const { scrollLeft, scrollTop } = this.options; |
|
|
|
if (o.scrollLeft !== 0 || o.scrollTop !== 0) { |
|
|
|
if (scrollLeft !== 0 || scrollTop !== 0) { |
|
|
|
this.element.scrollTop(o.scrollTop); |
|
|
|
this.element.scrollTop(scrollTop); |
|
|
|
this.element.scrollLeft(o.scrollLeft); |
|
|
|
this.element.scrollLeft(scrollLeft); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
destroyed: function () { |
|
|
|
destroyed() { |
|
|
|
BI.each(this.renderedCells, function(i, cell) { |
|
|
|
BI.each(this.renderedCells, (i, cell) => { |
|
|
|
cell.el._destroy(); |
|
|
|
cell.el._destroy(); |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_calculateSizeAndPositionData: function () { |
|
|
|
_calculateSizeAndPositionData() { |
|
|
|
var o = this.options; |
|
|
|
const { columnCount, items, rowCount, columnWidthGetter, estimatedColumnSize, rowHeightGetter, estimatedRowSize } = this.options; |
|
|
|
this.rowCount = 0; |
|
|
|
this.rowCount = 0; |
|
|
|
this.columnCount = 0; |
|
|
|
this.columnCount = 0; |
|
|
|
if (BI.isNumber(o.columnCount)) { |
|
|
|
if (BI.isNumber(columnCount)) { |
|
|
|
this.columnCount = o.columnCount; |
|
|
|
this.columnCount = columnCount; |
|
|
|
} else if (o.items.length > 0) { |
|
|
|
} else if (items.length > 0) { |
|
|
|
this.columnCount = o.items[0].length; |
|
|
|
this.columnCount = items[0].length; |
|
|
|
} |
|
|
|
} |
|
|
|
if (BI.isNumber(o.rowCount)) { |
|
|
|
if (BI.isNumber(rowCount)) { |
|
|
|
this.rowCount = o.rowCount; |
|
|
|
this.rowCount = rowCount; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.rowCount = o.items.length; |
|
|
|
this.rowCount = items.length; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, columnWidthGetter, estimatedColumnSize); |
|
|
|
|
|
|
|
this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, rowHeightGetter, estimatedRowSize); |
|
|
|
} |
|
|
|
} |
|
|
|
this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, o.columnWidthGetter, o.estimatedColumnSize); |
|
|
|
|
|
|
|
this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, o.rowHeightGetter, o.estimatedRowSize); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_getOverscanIndices: function (cellCount, overscanCellsCount, startIndex, stopIndex) { |
|
|
|
_getOverscanIndices(cellCount, overscanCellsCount, startIndex, stopIndex) { |
|
|
|
return { |
|
|
|
return { |
|
|
|
overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), |
|
|
|
overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), |
|
|
|
overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount), |
|
|
|
overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount), |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_calculateChildrenToRender: function () { |
|
|
|
_calculateChildrenToRender() { |
|
|
|
var self = this, o = this.options; |
|
|
|
const o = this.options; |
|
|
|
|
|
|
|
|
|
|
|
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), |
|
|
|
const { itemFormatter, items } = this.options; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), |
|
|
|
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()), |
|
|
|
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()), |
|
|
|
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount; |
|
|
|
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount; |
|
|
|
|
|
|
|
|
|
|
|
if (height > 0 && width > 0) { |
|
|
|
if (height > 0 && width > 0) { |
|
|
|
var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft); |
|
|
|
const visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft); |
|
|
|
var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop); |
|
|
|
const visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop); |
|
|
|
|
|
|
|
|
|
|
|
var renderedCells = [], renderedKeys = {}, renderedWidgets = {}; |
|
|
|
const renderedCells = [], renderedKeys = {}, renderedWidgets = {}; |
|
|
|
|
|
|
|
let minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0; |
|
|
|
// 没有可见的单元格就干掉所有渲染过的
|
|
|
|
// 没有可见的单元格就干掉所有渲染过的
|
|
|
|
if (!BI.isEmpty(visibleColumnIndices) && !BI.isEmpty(visibleRowIndices)) { |
|
|
|
if (!BI.isEmpty(visibleColumnIndices) && !BI.isEmpty(visibleRowIndices)) { |
|
|
|
var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft); |
|
|
|
const horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft); |
|
|
|
var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop); |
|
|
|
const verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop); |
|
|
|
|
|
|
|
|
|
|
|
this._renderedColumnStartIndex = visibleColumnIndices.start; |
|
|
|
this._renderedColumnStartIndex = visibleColumnIndices.start; |
|
|
|
this._renderedColumnStopIndex = visibleColumnIndices.stop; |
|
|
|
this._renderedColumnStopIndex = visibleColumnIndices.stop; |
|
|
|
this._renderedRowStartIndex = visibleRowIndices.start; |
|
|
|
this._renderedRowStartIndex = visibleRowIndices.start; |
|
|
|
this._renderedRowStopIndex = visibleRowIndices.stop; |
|
|
|
this._renderedRowStopIndex = visibleRowIndices.stop; |
|
|
|
|
|
|
|
|
|
|
|
var overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex); |
|
|
|
const overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex); |
|
|
|
|
|
|
|
|
|
|
|
var overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex); |
|
|
|
const overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex); |
|
|
|
|
|
|
|
|
|
|
|
var columnStartIndex = overscanColumnIndices.overscanStartIndex; |
|
|
|
const columnStartIndex = overscanColumnIndices.overscanStartIndex; |
|
|
|
var columnStopIndex = overscanColumnIndices.overscanStopIndex; |
|
|
|
const columnStopIndex = overscanColumnIndices.overscanStopIndex; |
|
|
|
var rowStartIndex = overscanRowIndices.overscanStartIndex; |
|
|
|
const rowStartIndex = overscanRowIndices.overscanStartIndex; |
|
|
|
var rowStopIndex = overscanRowIndices.overscanStopIndex; |
|
|
|
const rowStopIndex = overscanRowIndices.overscanStopIndex; |
|
|
|
|
|
|
|
|
|
|
|
// 算区间size
|
|
|
|
// 算区间size
|
|
|
|
var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex); |
|
|
|
const minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex); |
|
|
|
var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex); |
|
|
|
const minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex); |
|
|
|
var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex); |
|
|
|
const maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex); |
|
|
|
var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex); |
|
|
|
const maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex); |
|
|
|
var top = minRowDatum.offset + verticalOffsetAdjustment; |
|
|
|
const top = minRowDatum.offset + verticalOffsetAdjustment; |
|
|
|
var left = minColumnDatum.offset + horizontalOffsetAdjustment; |
|
|
|
const left = minColumnDatum.offset + horizontalOffsetAdjustment; |
|
|
|
var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size; |
|
|
|
const bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size; |
|
|
|
var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size; |
|
|
|
const right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size; |
|
|
|
// 如果滚动的区间并没有超出渲染的范围
|
|
|
|
// 如果滚动的区间并没有超出渲染的范围
|
|
|
|
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) { |
|
|
|
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0; |
|
|
|
let count = 0; |
|
|
|
var count = 0; |
|
|
|
for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { |
|
|
|
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { |
|
|
|
const rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); |
|
|
|
var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { |
|
|
|
for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { |
|
|
|
var key = rowIndex + "-" + columnIndex; |
|
|
|
const key = rowIndex + "-" + columnIndex; |
|
|
|
var columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex); |
|
|
|
const columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex); |
|
|
|
|
|
|
|
|
|
|
|
var index = this.renderedKeys[key] && this.renderedKeys[key][2]; |
|
|
|
const index = this.renderedKeys[key] && this.renderedKeys[key][2]; |
|
|
|
var child; |
|
|
|
let child; |
|
|
|
if (index >= 0) { |
|
|
|
if (index >= 0) { |
|
|
|
this.renderedCells[index].el.setWidth(columnDatum.size); |
|
|
|
this.renderedCells[index].el.setWidth(columnDatum.size); |
|
|
|
this.renderedCells[index].el.setHeight(rowDatum.size); |
|
|
|
this.renderedCells[index].el.setHeight(rowDatum.size); |
|
|
@ -193,7 +201,7 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
child = this.renderedCells[index].el; |
|
|
|
child = this.renderedCells[index].el; |
|
|
|
renderedCells.push(this.renderedCells[index]); |
|
|
|
renderedCells.push(this.renderedCells[index]); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
var item = o.itemFormatter(o.items[rowIndex][columnIndex], rowIndex, columnIndex); |
|
|
|
const item = itemFormatter(items[rowIndex][columnIndex], rowIndex, columnIndex); |
|
|
|
child = BI._lazyCreateWidget(BI.extend({ |
|
|
|
child = BI._lazyCreateWidget(BI.extend({ |
|
|
|
type: "bi.label", |
|
|
|
type: "bi.label", |
|
|
|
width: columnDatum.size, |
|
|
|
width: columnDatum.size, |
|
|
@ -226,15 +234,15 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 已存在的, 需要添加的和需要删除的
|
|
|
|
// 已存在的, 需要添加的和需要删除的
|
|
|
|
var existSet = {}, addSet = {}, deleteArray = []; |
|
|
|
const existSet = {}, addSet = {}, deleteArray = []; |
|
|
|
BI.each(renderedKeys, function (i, key) { |
|
|
|
BI.each(renderedKeys, (i, key) => { |
|
|
|
if (self.renderedKeys[i]) { |
|
|
|
if (this.renderedKeys[i]) { |
|
|
|
existSet[i] = key; |
|
|
|
existSet[i] = key; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
addSet[i] = key; |
|
|
|
addSet[i] = key; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.each(this.renderedKeys, function (i, key) { |
|
|
|
BI.each(this.renderedKeys, (i, key) => { |
|
|
|
if (existSet[i]) { |
|
|
|
if (existSet[i]) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
@ -243,12 +251,12 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
} |
|
|
|
} |
|
|
|
deleteArray.push(key[2]); |
|
|
|
deleteArray.push(key[2]); |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.each(deleteArray, function (i, index) { |
|
|
|
BI.each(deleteArray, (i, index) => { |
|
|
|
// 性能优化,不调用destroy方法防止触发destroy事件
|
|
|
|
// 性能优化,不调用destroy方法防止触发destroy事件
|
|
|
|
self.renderedCells[index].el._destroy(); |
|
|
|
this.renderedCells[index].el._destroy(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
var addedItems = []; |
|
|
|
const addedItems = []; |
|
|
|
BI.each(addSet, function (index, key) { |
|
|
|
BI.each(addSet, (index, key) => { |
|
|
|
addedItems.push(renderedCells[key[2]]); |
|
|
|
addedItems.push(renderedCells[key[2]]); |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 与listview一样, 给上下文
|
|
|
|
// 与listview一样, 给上下文
|
|
|
@ -260,13 +268,12 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
this.renderedKeys = renderedKeys; |
|
|
|
this.renderedKeys = renderedKeys; |
|
|
|
this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY }; |
|
|
|
this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY }; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_isOverflowX: function () { |
|
|
|
_isOverflowX() { |
|
|
|
var o = this.options; |
|
|
|
const { scrollable, scrollx, overflowX } = this.options; |
|
|
|
// 兼容一下
|
|
|
|
// 兼容一下
|
|
|
|
var scrollable = o.scrollable, scrollx = o.scrollx; |
|
|
|
if (overflowX === false) { |
|
|
|
if (o.overflowX === false) { |
|
|
|
|
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if (scrollx) { |
|
|
|
if (scrollx) { |
|
|
@ -276,13 +283,13 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
return true; |
|
|
|
return true; |
|
|
|
} |
|
|
|
} |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_isOverflowY: function () { |
|
|
|
_isOverflowY() { |
|
|
|
var o = this.options; |
|
|
|
const { scrollable, scrolly, overflowX } = this.options; |
|
|
|
// 兼容一下
|
|
|
|
// 兼容一下
|
|
|
|
var scrollable = o.scrollable, scrolly = o.scrolly; |
|
|
|
// var scrollable = o.scrollable, scrolly = o.scrolly;
|
|
|
|
if (o.overflowX === false) { |
|
|
|
if (overflowX === false) { |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if (scrolly) { |
|
|
|
if (scrolly) { |
|
|
@ -292,26 +299,26 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
return true; |
|
|
|
return true; |
|
|
|
} |
|
|
|
} |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_getMaxScrollLeft: function () { |
|
|
|
_getMaxScrollLeft() { |
|
|
|
return Math.max(0, this._getContainerWidth() - this.options.width + (this._isOverflowX() ? BI.DOM.getScrollWidth() : 0)); |
|
|
|
return Math.max(0, this._getContainerWidth() - this.options.width + (this._isOverflowX() ? BI.DOM.getScrollWidth() : 0)); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_getMaxScrollTop: function () { |
|
|
|
_getMaxScrollTop() { |
|
|
|
return Math.max(0, this._getContainerHeight() - this.options.height + (this._isOverflowY() ? BI.DOM.getScrollWidth() : 0)); |
|
|
|
return Math.max(0, this._getContainerHeight() - this.options.height + (this._isOverflowY() ? BI.DOM.getScrollWidth() : 0)); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_getContainerWidth: function () { |
|
|
|
_getContainerWidth() { |
|
|
|
return this.columnCount * this.options.estimatedColumnSize; |
|
|
|
return this.columnCount * this.options.estimatedColumnSize; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_getContainerHeight: function () { |
|
|
|
_getContainerHeight() { |
|
|
|
return this.rowCount * this.options.estimatedRowSize; |
|
|
|
return this.rowCount * this.options.estimatedRowSize; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_populate: function (items) { |
|
|
|
_populate(items) { |
|
|
|
var o = this.options; |
|
|
|
const { scrollTop, scrollLeft } = this.options; |
|
|
|
this._reRange(); |
|
|
|
this._reRange(); |
|
|
|
if (items && items !== this.options.items) { |
|
|
|
if (items && items !== this.options.items) { |
|
|
|
this.options.items = items; |
|
|
|
this.options.items = items; |
|
|
@ -323,14 +330,14 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
// 元素未挂载时不能设置scrollTop
|
|
|
|
// 元素未挂载时不能设置scrollTop
|
|
|
|
this._debounceRelease(); |
|
|
|
this._debounceRelease(); |
|
|
|
try { |
|
|
|
try { |
|
|
|
this.element.scrollTop(o.scrollTop); |
|
|
|
this.element.scrollTop(scrollTop); |
|
|
|
this.element.scrollLeft(o.scrollLeft); |
|
|
|
this.element.scrollLeft(scrollLeft); |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
} |
|
|
|
} |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setScrollLeft: function (scrollLeft) { |
|
|
|
setScrollLeft(scrollLeft) { |
|
|
|
if (this.options.scrollLeft === scrollLeft) { |
|
|
|
if (this.options.scrollLeft === scrollLeft) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
@ -339,9 +346,9 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
this._debounceRelease(); |
|
|
|
this._debounceRelease(); |
|
|
|
this.element.scrollLeft(this.options.scrollLeft); |
|
|
|
this.element.scrollLeft(this.options.scrollLeft); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setScrollTop: function (scrollTop) { |
|
|
|
setScrollTop(scrollTop) { |
|
|
|
if (this.options.scrollTop === scrollTop) { |
|
|
|
if (this.options.scrollTop === scrollTop) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
@ -350,72 +357,68 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
this._debounceRelease(); |
|
|
|
this._debounceRelease(); |
|
|
|
this.element.scrollTop(this.options.scrollTop); |
|
|
|
this.element.scrollTop(this.options.scrollTop); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
this._calculateChildrenToRender(); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setColumnCount: function (columnCount) { |
|
|
|
setColumnCount(columnCount) { |
|
|
|
this.options.columnCount = columnCount; |
|
|
|
this.options.columnCount = columnCount; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setRowCount: function (rowCount) { |
|
|
|
setRowCount(rowCount) { |
|
|
|
this.options.rowCount = rowCount; |
|
|
|
this.options.rowCount = rowCount; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setOverflowX: function (b) { |
|
|
|
setOverflowX(b) { |
|
|
|
var self = this; |
|
|
|
|
|
|
|
if (this.options.overflowX !== !!b) { |
|
|
|
if (this.options.overflowX !== !!b) { |
|
|
|
this.options.overflowX = !!b; |
|
|
|
this.options.overflowX = !!b; |
|
|
|
BI.nextTick(function () { |
|
|
|
BI.nextTick(() => { |
|
|
|
self.element.css({ overflowX: b ? "auto" : "hidden" }); |
|
|
|
this.element.css({ overflowX: b ? "auto" : "hidden" }); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setOverflowY: function (b) { |
|
|
|
setOverflowY(b) { |
|
|
|
var self = this; |
|
|
|
|
|
|
|
if (this.options.overflowY !== !!b) { |
|
|
|
if (this.options.overflowY !== !!b) { |
|
|
|
this.options.overflowY = !!b; |
|
|
|
this.options.overflowY = !!b; |
|
|
|
BI.nextTick(function () { |
|
|
|
BI.nextTick(() => { |
|
|
|
self.element.css({ overflowY: b ? "auto" : "hidden" }); |
|
|
|
this.element.css({ overflowY: b ? "auto" : "hidden" }); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getScrollLeft: function () { |
|
|
|
getScrollLeft() { |
|
|
|
return this.options.scrollLeft; |
|
|
|
return this.options.scrollLeft; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
getScrollTop() { |
|
|
|
getScrollTop: function () { |
|
|
|
|
|
|
|
return this.options.scrollTop; |
|
|
|
return this.options.scrollTop; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getMaxScrollLeft: function () { |
|
|
|
getMaxScrollLeft() { |
|
|
|
return this._getMaxScrollLeft(); |
|
|
|
return this._getMaxScrollLeft(); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getMaxScrollTop: function () { |
|
|
|
getMaxScrollTop() { |
|
|
|
return this._getMaxScrollTop(); |
|
|
|
return this._getMaxScrollTop(); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setEstimatedColumnSize: function (width) { |
|
|
|
setEstimatedColumnSize(width) { |
|
|
|
this.options.estimatedColumnSize = width; |
|
|
|
this.options.estimatedColumnSize = width; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setEstimatedRowSize: function (height) { |
|
|
|
setEstimatedRowSize(height) { |
|
|
|
this.options.estimatedRowSize = height; |
|
|
|
this.options.estimatedRowSize = height; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 重新计算children
|
|
|
|
// 重新计算children
|
|
|
|
_reRange: function () { |
|
|
|
_reRange() { |
|
|
|
this.renderRange = {}; |
|
|
|
this.renderRange = {}; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_clearChildren: function () { |
|
|
|
_clearChildren() { |
|
|
|
this.container._children = {}; |
|
|
|
this.container._children = {}; |
|
|
|
this.container.attr("items", []); |
|
|
|
this.container.attr("items", []); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
restore: function () { |
|
|
|
restore() { |
|
|
|
BI.each(this.renderedCells, function (i, cell) { |
|
|
|
BI.each(this.renderedCells, (i, cell) => { |
|
|
|
cell.el._destroy(); |
|
|
|
cell.el._destroy(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this._clearChildren(); |
|
|
|
this._clearChildren(); |
|
|
@ -423,14 +426,12 @@ BI.GridView = BI.inherit(BI.Widget, { |
|
|
|
this.renderedKeys = []; |
|
|
|
this.renderedKeys = []; |
|
|
|
this.renderRange = {}; |
|
|
|
this.renderRange = {}; |
|
|
|
this._scrollLock = false; |
|
|
|
this._scrollLock = false; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
populate: function (items) { |
|
|
|
populate(items) { |
|
|
|
if (items && items !== this.options.items) { |
|
|
|
if (items && items !== this.options.items) { |
|
|
|
this.restore(); |
|
|
|
this.restore(); |
|
|
|
} |
|
|
|
} |
|
|
|
this._populate(items); |
|
|
|
this._populate(items); |
|
|
|
}, |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
BI.GridView.EVENT_SCROLL = "EVENT_SCROLL"; |
|
|
|
|
|
|
|
BI.shortcut("bi.grid_view", BI.GridView); |
|
|
|
|
|
|
|