forked from fanruan/fineui
guy
7 years ago
18 changed files with 1475 additions and 72 deletions
@ -0,0 +1,233 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var items = [[{ |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第二列" |
||||
}, { |
||||
text: "第一行第三列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第二行第二列" |
||||
}, { |
||||
text: "第二行第三列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第三行第二列" |
||||
}, { |
||||
text: "第三行第三列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第四行第二列" |
||||
}, { |
||||
text: "第四行第三列" |
||||
}], [{ |
||||
text: "第五行第一列" |
||||
}, { |
||||
text: "第五行第二列" |
||||
}, { |
||||
text: "第五行第三列" |
||||
}], [{ |
||||
text: "第六行第一列" |
||||
}, { |
||||
text: "第六行第二列" |
||||
}, { |
||||
text: "第六行第三列" |
||||
}], [{ |
||||
text: "第七行第一列" |
||||
}, { |
||||
text: "第七行第二列" |
||||
}, { |
||||
text: "第七行第三列" |
||||
}], [{ |
||||
text: "第八行第一列" |
||||
}, { |
||||
text: "第八行第二列" |
||||
}, { |
||||
text: "第八行第三列" |
||||
}], [{ |
||||
text: "第九行第一列" |
||||
}, { |
||||
text: "第九行第二列" |
||||
}, { |
||||
text: "第九行第三列" |
||||
}], [{ |
||||
text: "第十行第一列" |
||||
}, { |
||||
text: "第十行第二列" |
||||
}, { |
||||
text: "第十行第三列" |
||||
}], [{ |
||||
text: "第十一行第一列" |
||||
}, { |
||||
text: "第十一行第二列" |
||||
}, { |
||||
text: "第十一行第三列" |
||||
}], [{ |
||||
text: "第十二行第一列" |
||||
}, { |
||||
text: "第十二行第二列" |
||||
}, { |
||||
text: "第十二行第三列" |
||||
}], [{ |
||||
text: "第十三行第一列" |
||||
}, { |
||||
text: "第十三行第二列" |
||||
}, { |
||||
text: "第十三行第三列" |
||||
}], [{ |
||||
text: "第十四行第一列" |
||||
}, { |
||||
text: "第十四行第二列" |
||||
}, { |
||||
text: "第十四行第三列" |
||||
}], [{ |
||||
text: "第十五行第一列" |
||||
}, { |
||||
text: "第十五行第二列" |
||||
}, { |
||||
text: "第十五行第三列" |
||||
}], [{ |
||||
text: "第十六行第一列" |
||||
}, { |
||||
text: "第十六行第二列" |
||||
}, { |
||||
text: "第十六行第三列" |
||||
}], [{ |
||||
text: "第十七行第一列" |
||||
}, { |
||||
text: "第十七行第二列" |
||||
}, { |
||||
text: "第十七行第三列" |
||||
}], [{ |
||||
text: "第十八行第一列" |
||||
}, { |
||||
text: "第十八行第二列" |
||||
}, { |
||||
text: "第十八行第三列" |
||||
}]]; |
||||
|
||||
var header = [[{ |
||||
text: "表头1" |
||||
}, { |
||||
text: "表头2" |
||||
}, { |
||||
text: "表头3" |
||||
}]]; |
||||
|
||||
var table1 = BI.createWidget({ |
||||
type: "bi.preview_table", |
||||
columnSize: ["", "", ""], |
||||
header: header, |
||||
items: items |
||||
}); |
||||
var table2 = BI.createWidget({ |
||||
type: "bi.preview_table", |
||||
header: header, |
||||
columnSize: [100, "", 50], |
||||
items: items |
||||
}); |
||||
var table3 = BI.createWidget({ |
||||
type: "bi.preview_table", |
||||
header: header, |
||||
columnSize: [0.2, 0.4, 0.4], |
||||
headerRowSize: 30, |
||||
items: items |
||||
}); |
||||
var table4 = BI.createWidget({ |
||||
type: "bi.preview_table", |
||||
header: header, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: [0.2, "", 0.4], |
||||
items: items |
||||
}); |
||||
var table5 = BI.createWidget({ |
||||
type: "bi.preview_table", |
||||
header: header, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: [200, 100, ""], |
||||
items: items |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 3, |
||||
rows: 2, |
||||
items: [[{ |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: table1, |
||||
left: 5, |
||||
right: 5, |
||||
top: 5, |
||||
bottom: 5 |
||||
}] |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: table2, |
||||
left: 5, |
||||
right: 5, |
||||
top: 5, |
||||
bottom: 5 |
||||
}] |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: table3, |
||||
left: 5, |
||||
right: 5, |
||||
top: 5, |
||||
bottom: 5 |
||||
}] |
||||
} |
||||
}], [{ |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: table4, |
||||
left: 5, |
||||
right: 5, |
||||
top: 5, |
||||
bottom: 5 |
||||
}] |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: table5, |
||||
left: 5, |
||||
right: 5, |
||||
top: 5, |
||||
bottom: 5 |
||||
}] |
||||
} |
||||
}]] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
BI.shortcut("demo.preview_table", Demo.Func); |
||||
@ -0,0 +1,8 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-responsive-table > div.bottom-left > div > div > table > * > * > td.last-col, |
||||
.bi-responsive-table > div.bottom-right > div > div > table > * > * > td.last-col, |
||||
.bi-responsive-table > div > div > table > * > * > td.last-col { |
||||
min-width: 80px; |
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
@import "../../bibase"; |
||||
|
||||
.bi-responsive-table { |
||||
& > div.bottom-left > div > div > table, & > div.bottom-right > div > div > table, > div > div > table { |
||||
& > * > * > td { |
||||
&.last-col { |
||||
min-width: 80px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,363 @@
|
||||
/** |
||||
* 自适应宽度的表格 |
||||
* |
||||
* Created by GUY on 2016/2/3. |
||||
* @class BI.ResponisveTable |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.ResponisveTable = BI.inherit(BI.Widget, { |
||||
|
||||
_const: { |
||||
perColumnSize: 100 |
||||
}, |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.ResponisveTable.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-responsive-table", |
||||
isNeedFreeze: false,//是否需要冻结单元格
|
||||
freezeCols: [], //冻结的列号,从0开始,isNeedFreeze为true时生效
|
||||
|
||||
isNeedMerge: false,//是否需要合并单元格
|
||||
mergeCols: [], //合并的单元格列号
|
||||
mergeRule: function (row1, row2) { //合并规则, 默认相等时合并
|
||||
return BI.isEqual(row1, row2); |
||||
}, |
||||
|
||||
columnSize: [], |
||||
headerRowSize: 25, |
||||
footerRowSize: 25, |
||||
rowSize: 25, |
||||
|
||||
regionColumnSize: false, |
||||
|
||||
header: [], |
||||
footer: false, |
||||
items: [], //二维数组
|
||||
|
||||
//交叉表头
|
||||
crossHeader: [], |
||||
crossItems: [] |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.ResponisveTable.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
|
||||
this.table = BI.createWidget({ |
||||
type: "bi.table_view", |
||||
element: this, |
||||
|
||||
isNeedFreeze: o.isNeedFreeze, |
||||
freezeCols: o.freezeCols, |
||||
|
||||
isNeedMerge: o.isNeedMerge, |
||||
mergeCols: o.mergeCols, |
||||
mergeRule: o.mergeRule, |
||||
|
||||
columnSize: o.columnSize, |
||||
headerRowSize: o.headerRowSize, |
||||
footerRowSize: o.footerRowSize, |
||||
rowSize: o.rowSize, |
||||
|
||||
regionColumnSize: o.regionColumnSize, |
||||
|
||||
header: o.header, |
||||
footer: o.footer, |
||||
items: o.items, |
||||
//交叉表头
|
||||
crossHeader: o.crossHeader, |
||||
crossItems: o.crossItems |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_AFTER_INIT, function () { |
||||
self._initRegionSize(); |
||||
self.table.resize(); |
||||
self._resizeHeader(); |
||||
self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_RESIZE, function () { |
||||
self._resizeRegion(); |
||||
self._resizeHeader(); |
||||
self.fireEvent(BI.Table.EVENT_TABLE_RESIZE, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_SCROLL, function () { |
||||
self.fireEvent(BI.Table.EVENT_TABLE_SCROLL, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_BEFORE_REGION_RESIZE, function () { |
||||
self.fireEvent(BI.Table.EVENT_TABLE_BEFORE_REGION_RESIZE, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_REGION_RESIZE, function () { |
||||
//important:在冻结并自适应列宽的情况下要随时变更表头宽度
|
||||
if (o.isNeedResize === true && self._isAdaptiveColumn()) { |
||||
self._resizeHeader(); |
||||
} |
||||
self.fireEvent(BI.Table.EVENT_TABLE_REGION_RESIZE, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_AFTER_REGION_RESIZE, function () { |
||||
self._resizeHeader(); |
||||
self.fireEvent(BI.Table.EVENT_TABLE_AFTER_REGION_RESIZE, arguments); |
||||
}); |
||||
|
||||
this.table.on(BI.Table.EVENT_TABLE_BEFORE_COLUMN_RESIZE, function () { |
||||
self._resizeBody(); |
||||
self.fireEvent(BI.Table.EVENT_TABLE_BEFORE_COLUMN_RESIZE, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_COLUMN_RESIZE, function () { |
||||
self.fireEvent(BI.Table.EVENT_TABLE_COLUMN_RESIZE, arguments); |
||||
}); |
||||
this.table.on(BI.Table.EVENT_TABLE_AFTER_COLUMN_RESIZE, function () { |
||||
self._resizeRegion(); |
||||
self._resizeHeader(); |
||||
self.fireEvent(BI.Table.EVENT_TABLE_AFTER_COLUMN_RESIZE, arguments); |
||||
}); |
||||
}, |
||||
|
||||
_initRegionSize: function () { |
||||
var o = this.options; |
||||
if (o.isNeedFreeze === true) { |
||||
var regionColumnSize = this.table.getRegionColumnSize(); |
||||
var maxWidth = this.table.element.width(); |
||||
if (!regionColumnSize[0] || (regionColumnSize[0] === 'fill') || regionColumnSize[0] > maxWidth || regionColumnSize[1] > maxWidth) { |
||||
var freezeCols = o.freezeCols; |
||||
if (freezeCols.length === 0) { |
||||
this.table.setRegionColumnSize([0, "fill"]); |
||||
} else if (freezeCols.length > 0 && freezeCols.length < o.columnSize.length) { |
||||
var size = maxWidth / 3; |
||||
if (freezeCols.length > o.columnSize.length / 2) { |
||||
size = maxWidth * 2 / 3; |
||||
} |
||||
this.table.setRegionColumnSize([size, "fill"]); |
||||
} else { |
||||
this.table.setRegionColumnSize(["fill", 0]); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
|
||||
_getBlockSize: function () { |
||||
var o = this.options; |
||||
var columnSize = this.table.getCalculateColumnSize(); |
||||
if (o.isNeedFreeze === true) { |
||||
var columnSizeLeft = [], columnSizeRight = []; |
||||
BI.each(columnSize, function (i, size) { |
||||
if (o.freezeCols.contains(i)) { |
||||
columnSizeLeft.push(size); |
||||
} else { |
||||
columnSizeRight.push(size); |
||||
} |
||||
}); |
||||
//因为有边框，所以加上数组长度的参数调整
|
||||
var sumLeft = BI.sum(columnSizeLeft) + columnSizeLeft.length, sumRight = BI.sum(columnSizeRight) + columnSizeRight.length; |
||||
return { |
||||
sumLeft: sumLeft, |
||||
sumRight: sumRight, |
||||
left: columnSizeLeft, |
||||
right: columnSizeRight |
||||
} |
||||
} |
||||
return { |
||||
size: columnSize, |
||||
sum: BI.sum(columnSize) + columnSize.length |
||||
}; |
||||
}, |
||||
|
||||
_isAdaptiveColumn: function (columnSize) { |
||||
return !(BI.last(columnSize || this.table.getColumnSize()) > 1.05); |
||||
}, |
||||
|
||||
_resizeHeader: function () { |
||||
var self = this, o = this.options; |
||||
if (o.isNeedFreeze === true) { |
||||
//若是当前处于自适应调节阶段
|
||||
if (this._isAdaptiveColumn()) { |
||||
var columnSize = this.table.getCalculateColumnSize(); |
||||
this.table.setHeaderColumnSize(columnSize); |
||||
} else { |
||||
var regionColumnSize = this.table.getClientRegionColumnSize(); |
||||
var block = this._getBlockSize(); |
||||
var sumLeft = block.sumLeft, sumRight = block.sumRight; |
||||
var columnSizeLeft = block.left, columnSizeRight = block.right; |
||||
columnSizeLeft[columnSizeLeft.length - 1] += regionColumnSize[0] - sumLeft; |
||||
columnSizeRight[columnSizeRight.length - 1] += regionColumnSize[1] - sumRight; |
||||
|
||||
var newLeft = BI.clone(columnSizeLeft), newRight = BI.clone(columnSizeRight); |
||||
newLeft[newLeft.length - 1] = ""; |
||||
newRight[newRight.length - 1] = ""; |
||||
this.table.setColumnSize(newLeft.concat(newRight)); |
||||
|
||||
block = self._getBlockSize(); |
||||
if (columnSizeLeft[columnSizeLeft.length - 1] < block.left[block.left.length - 1]) { |
||||
columnSizeLeft[columnSizeLeft.length - 1] = block.left[block.left.length - 1] |
||||
} |
||||
if (columnSizeRight[columnSizeRight.length - 1] < block.right[block.right.length - 1]) { |
||||
columnSizeRight[columnSizeRight.length - 1] = block.right[block.right.length - 1] |
||||
} |
||||
|
||||
self.table.setColumnSize(columnSizeLeft.concat(columnSizeRight)); |
||||
} |
||||
} else { |
||||
if (!this._isAdaptiveColumn()) { |
||||
var regionColumnSize = this.table.getClientRegionColumnSize(); |
||||
var block = this._getBlockSize(); |
||||
var sum = block.sum; |
||||
var size = block.size; |
||||
|
||||
size[size.length - 1] += regionColumnSize[0] - sum; |
||||
|
||||
var newSize = BI.clone(size); |
||||
newSize[newSize.length - 1] = ""; |
||||
this.table.setColumnSize(newSize); |
||||
block = this._getBlockSize(); |
||||
|
||||
if (size[size.length - 1] < block.size[block.size.length - 1]) { |
||||
size[size.length - 1] = block.size[block.size.length - 1] |
||||
} |
||||
this.table.setColumnSize(size); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
_resizeBody: function () { |
||||
if (this._isAdaptiveColumn()) { |
||||
var columnSize = this.table.getCalculateColumnSize(); |
||||
this.setColumnSize(columnSize); |
||||
} |
||||
}, |
||||
|
||||
_adjustRegion: function () { |
||||
var o = this.options; |
||||
var regionColumnSize = this.table.getCalculateRegionColumnSize(); |
||||
if (o.isNeedFreeze === true && o.freezeCols.length > 0 && o.freezeCols.length < o.columnSize.length) { |
||||
var block = this._getBlockSize(); |
||||
var sumLeft = block.sumLeft, sumRight = block.sumRight; |
||||
if (sumLeft < regionColumnSize[0] || regionColumnSize[0] >= (sumLeft + sumRight)) { |
||||
this.table.setRegionColumnSize([sumLeft, "fill"]); |
||||
} |
||||
this._resizeRegion(); |
||||
} |
||||
}, |
||||
|
||||
_resizeRegion: function () { |
||||
var o = this.options; |
||||
var regionColumnSize = this.table.getCalculateRegionColumnSize(); |
||||
if (o.isNeedFreeze === true && o.freezeCols.length > 0 && o.freezeCols.length < o.columnSize.length) { |
||||
var maxWidth = this.table.element.width(); |
||||
if (regionColumnSize[0] < 15 || regionColumnSize[1] < 15) { |
||||
var freezeCols = o.freezeCols; |
||||
var size = maxWidth / 3; |
||||
if (freezeCols.length > o.columnSize.length / 2) { |
||||
size = maxWidth * 2 / 3; |
||||
} |
||||
this.table.setRegionColumnSize([size, "fill"]); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
|
||||
resize: function () { |
||||
this.table.resize(); |
||||
this._resizeRegion(); |
||||
this._resizeHeader(); |
||||
}, |
||||
|
||||
setColumnSize: function (columnSize) { |
||||
this.table.setColumnSize(columnSize); |
||||
this._adjustRegion(); |
||||
this._resizeHeader(); |
||||
}, |
||||
|
||||
getColumnSize: function () { |
||||
return this.table.getColumnSize(); |
||||
}, |
||||
|
||||
getCalculateColumnSize: function () { |
||||
return this.table.getCalculateColumnSize(); |
||||
}, |
||||
|
||||
setHeaderColumnSize: function (columnSize) { |
||||
this.table.setHeaderColumnSize(columnSize); |
||||
this._adjustRegion(); |
||||
this._resizeHeader(); |
||||
}, |
||||
|
||||
setRegionColumnSize: function (columnSize) { |
||||
this.table.setRegionColumnSize(columnSize); |
||||
this._resizeHeader(); |
||||
}, |
||||
|
||||
getRegionColumnSize: function () { |
||||
return this.table.getRegionColumnSize(); |
||||
}, |
||||
|
||||
getCalculateRegionColumnSize: function () { |
||||
return this.table.getCalculateRegionColumnSize(); |
||||
}, |
||||
|
||||
getCalculateRegionRowSize: function () { |
||||
return this.table.getCalculateRegionRowSize(); |
||||
}, |
||||
|
||||
getClientRegionColumnSize: function () { |
||||
return this.table.getClientRegionColumnSize(); |
||||
}, |
||||
|
||||
getScrollRegionColumnSize: function () { |
||||
return this.table.getScrollRegionColumnSize(); |
||||
}, |
||||
|
||||
getScrollRegionRowSize: function () { |
||||
return this.table.getScrollRegionRowSize(); |
||||
}, |
||||
|
||||
hasVerticalScroll: function () { |
||||
return this.table.hasVerticalScroll(); |
||||
}, |
||||
|
||||
setVerticalScroll: function (scrollTop) { |
||||
this.table.setVerticalScroll(scrollTop); |
||||
}, |
||||
|
||||
setLeftHorizontalScroll: function (scrollLeft) { |
||||
this.table.setLeftHorizontalScroll(scrollLeft); |
||||
}, |
||||
|
||||
setRightHorizontalScroll: function (scrollLeft) { |
||||
this.table.setRightHorizontalScroll(scrollLeft); |
||||
}, |
||||
|
||||
getVerticalScroll: function () { |
||||
return this.table.getVerticalScroll(); |
||||
}, |
||||
|
||||
getLeftHorizontalScroll: function () { |
||||
return this.table.getLeftHorizontalScroll(); |
||||
}, |
||||
|
||||
getRightHorizontalScroll: function () { |
||||
return this.table.getRightHorizontalScroll(); |
||||
}, |
||||
|
||||
getColumns: function () { |
||||
return this.table.getColumns(); |
||||
}, |
||||
|
||||
attr: function () { |
||||
BI.ResponisveTable.superclass.attr.apply(this, arguments); |
||||
this.table.attr.apply(this.table, arguments); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
var self = this, o = this.options; |
||||
this.table.populate.apply(this.table, arguments); |
||||
if (o.isNeedFreeze === true) { |
||||
BI.nextTick(function () { |
||||
if (self.element.is(":visible")) { |
||||
self._initRegionSize(); |
||||
self.table.resize(); |
||||
self._resizeHeader(); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
BI.shortcut('bi.responsive_table', BI.ResponisveTable); |
||||
Loading…
Reference in new issue