From fa15987bbcdf98239905ae26b6ec25d6afa88eff Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 28 Mar 2017 14:52:17 +0800 Subject: [PATCH] add --- bi/base.js | 10 +- bi/core.js | 6 +- bi/widget.css | 8 + bi/widget.js | 488 ++++++++++++++++-- demo/js/config/widget.js | 8 + demo/js/widget/table/demo.preview_table.js | 233 +++++++++ dist/base.js | 10 +- dist/core.js | 6 +- dist/widget.css | 8 + dist/widget.js | 367 ++++++++++++- src/base/table/table.js | 10 +- src/core/widget.js | 2 + src/core/wrapper/layout/adapt/float.center.js | 2 +- .../wrapper/layout/adapt/float.horizontal.js | 2 +- .../responsivetable/responsivetable.css | 8 + .../responsivetable/responsivetable.less | 11 + src/widget/previewtable/previewtable.js | 5 - src/widget/responsivetable/responsivetable.js | 363 +++++++++++++ 18 files changed, 1475 insertions(+), 72 deletions(-) create mode 100644 demo/js/widget/table/demo.preview_table.js create mode 100644 src/css/widget/responsivetable/responsivetable.css create mode 100644 src/less/widget/responsivetable/responsivetable.less create mode 100644 src/widget/responsivetable/responsivetable.js diff --git a/bi/base.js b/bi/base.js index 7fdca65c7..c15461b3b 100644 --- a/bi/base.js +++ b/bi/base.js @@ -30423,11 +30423,9 @@ BI.Table = BI.inherit(BI.Widget, { self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT); } }); - BI.Resizers.add(this.getName(), function (e) { - if (BI.isWindow(e.target) && self.element.is(":visible")) { - self._resize(); - self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); - } + BI.ResizeDetector.addResizeListener(this, function () { + self._resize(); + self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); }); }, @@ -30809,6 +30807,7 @@ BI.Table = BI.inherit(BI.Widget, { .addClass(c === rows.length - 1 ? "last-col" : ""); var w = BI.createWidget(map[r][c], { type: "bi.table_cell", + root: true, textAlign: "left", width: BI.isNumeric(width) ? width : "", height: BI.isNumeric(height) ? height : "", @@ -30887,6 +30886,7 @@ BI.Table = BI.inherit(BI.Widget, { this.footer.element.append(this._createFooterCells(o.footer, null, this.footerTds, this.footerItems)); return this.footer; }, + _createBody: function () { var self = this, o = this.options; diff --git a/bi/core.js b/bi/core.js index 4d76894e9..4201d5d85 100644 --- a/bi/core.js +++ b/bi/core.js @@ -4432,6 +4432,7 @@ $.extend(BI.OB.prototype, { BI.Widget = BI.inherit(BI.OB, { _defaultConfig: function () { return BI.extend(BI.Widget.superclass._defaultConfig.apply(this), { + root: false, tagName: "div", attributes: null, data: null, @@ -4480,6 +4481,7 @@ BI.Widget = BI.inherit(BI.OB, { _initRoot: function () { var o = this.options; this.widgetName = o.widgetName || BI.uniqueId("widget"); + this._isRoot = o.root; if (BI.isWidget(o.element)) { if (o.element instanceof BI.Widget) { this._parent = o.element; @@ -12351,7 +12353,7 @@ BI.FloatCenterAdaptLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, stroke: function (items) { @@ -12414,7 +12416,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, _addElement: function (i, item) { diff --git a/bi/widget.css b/bi/widget.css index 300750cb6..51d075000 100644 --- a/bi/widget.css +++ b/bi/widget.css @@ -632,6 +632,14 @@ /****添加计算宽度的--运算符直接需要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; +} +/****添加计算宽度的--运算符直接需要space****/ +/****** common color(常用颜色,可用于普遍场景) *****/ +/**** custom color(自定义颜色,用于特定场景) ****/ .bi-sequence-table-dynamic-number .sequence-table-title-cell { overflow: hidden; overflow-x: hidden; diff --git a/bi/widget.js b/bi/widget.js index d768f95d1..79b37753d 100644 --- a/bi/widget.js +++ b/bi/widget.js @@ -4920,7 +4920,7 @@ BI.shortcut('bi.date_combo', BI.DateCombo);BI.DateTrigger = BI.inherit(BI.Trigge if (BI.isNotEmptyString(value)) { var date = value.split("-"); self.store_value = { - type: BICst.MULTI_DATE_CALENDAR, + type: BI.DateTrigger.MULTI_DATE_CALENDAR, value:{ year: date[0] | 0, month: date[1] - 1, @@ -4988,7 +4988,7 @@ BI.shortcut('bi.date_combo', BI.DateCombo);BI.DateTrigger = BI.inherit(BI.Trigge var date = new Date(); this.store_value = v; if (BI.isNotNull(v)) { - type = v.type || BICst.MULTI_DATE_CALENDAR; value = v.value; + type = v.type || BI.DateTrigger.MULTI_DATE_CALENDAR; value = v.value; if(BI.isNull(value)){ value = v; } @@ -5000,88 +5000,88 @@ BI.shortcut('bi.date_combo', BI.DateCombo);BI.DateTrigger = BI.inherit(BI.Trigge self.setTitle(text + ":" + dateStr); }; switch (type) { - case BICst.MULTI_DATE_YEAR_PREV: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_YEAR_PREV]; + case BI.DateTrigger.MULTI_DATE_YEAR_PREV: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_PREV]; date = new Date((date.getFullYear() - 1 * value), date.getMonth(), date.getDate()); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_YEAR_AFTER: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_YEAR_AFTER]; + case BI.DateTrigger.MULTI_DATE_YEAR_AFTER: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_AFTER]; date = new Date((date.getFullYear() + 1 * value), date.getMonth(), date.getDate()); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_YEAR_BEGIN: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_YEAR_BEGIN]; + case BI.DateTrigger.MULTI_DATE_YEAR_BEGIN: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_BEGIN]; date = new Date(date.getFullYear(), 0, 1); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_YEAR_END: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_YEAR_END]; + case BI.DateTrigger.MULTI_DATE_YEAR_END: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_END]; date = new Date(date.getFullYear(), 11, 31); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_QUARTER_PREV: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_QUARTER_PREV]; + case BI.DateTrigger.MULTI_DATE_QUARTER_PREV: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_PREV]; date = new Date().getBeforeMulQuarter(value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_QUARTER_AFTER: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_QUARTER_AFTER]; + case BI.DateTrigger.MULTI_DATE_QUARTER_AFTER: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_AFTER]; date = new Date().getAfterMulQuarter(value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_QUARTER_BEGIN: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_QUARTER_BEGIN]; + case BI.DateTrigger.MULTI_DATE_QUARTER_BEGIN: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_BEGIN]; date = new Date().getQuarterStartDate(); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_QUARTER_END: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_QUARTER_END]; + case BI.DateTrigger.MULTI_DATE_QUARTER_END: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_END]; date = new Date().getQuarterEndDate(); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_MONTH_PREV: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_MONTH_PREV]; + case BI.DateTrigger.MULTI_DATE_MONTH_PREV: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_PREV]; date = new Date().getBeforeMultiMonth(value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_MONTH_AFTER: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_MONTH_AFTER]; + case BI.DateTrigger.MULTI_DATE_MONTH_AFTER: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_AFTER]; date = new Date().getAfterMultiMonth(value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_MONTH_BEGIN: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_MONTH_BEGIN]; + case BI.DateTrigger.MULTI_DATE_MONTH_BEGIN: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_BEGIN]; date = new Date(date.getFullYear(), date.getMonth(), 1); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_MONTH_END: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_MONTH_END]; + case BI.DateTrigger.MULTI_DATE_MONTH_END: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_END]; date = new Date(date.getFullYear(), date.getMonth(), (date.getLastDateOfMonth()).getDate()); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_WEEK_PREV: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_WEEK_PREV]; + case BI.DateTrigger.MULTI_DATE_WEEK_PREV: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_WEEK_PREV]; date = date.getOffsetDate(-7 * value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_WEEK_AFTER: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_WEEK_AFTER]; + case BI.DateTrigger.MULTI_DATE_WEEK_AFTER: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_WEEK_AFTER]; date = date.getOffsetDate(7 * value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_DAY_PREV: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_DAY_PREV]; + case BI.DateTrigger.MULTI_DATE_DAY_PREV: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_PREV]; date = date.getOffsetDate(-1 * value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_DAY_AFTER: - var text = value + BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_DAY_AFTER]; + case BI.DateTrigger.MULTI_DATE_DAY_AFTER: + var text = value + BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_AFTER]; date = date.getOffsetDate(1 * value); _setInnerValue(date, text); break; - case BICst.MULTI_DATE_DAY_TODAY: - var text = BICst.MULTI_DATE_SEGMENT_NUM[BICst.MULTI_DATE_DAY_TODAY]; + case BI.DateTrigger.MULTI_DATE_DAY_TODAY: + var text = BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_TODAY]; date = new Date(); _setInnerValue(date, text); break; @@ -5108,6 +5108,55 @@ BI.shortcut('bi.date_combo', BI.DateCombo);BI.DateTrigger = BI.inherit(BI.Trigge } }); + +BI.DateTrigger.MULTI_DATE_YEAR_PREV = 1; +BI.DateTrigger.MULTI_DATE_YEAR_AFTER = 2; +BI.DateTrigger.MULTI_DATE_YEAR_BEGIN = 3; +BI.DateTrigger.MULTI_DATE_YEAR_END = 4; + +BI.DateTrigger.MULTI_DATE_MONTH_PREV = 5; +BI.DateTrigger.MULTI_DATE_MONTH_AFTER = 6; +BI.DateTrigger.MULTI_DATE_MONTH_BEGIN = 7; +BI.DateTrigger.MULTI_DATE_MONTH_END = 8; + +BI.DateTrigger.MULTI_DATE_QUARTER_PREV = 9; +BI.DateTrigger.MULTI_DATE_QUARTER_AFTER = 10; +BI.DateTrigger.MULTI_DATE_QUARTER_BEGIN = 11; +BI.DateTrigger.MULTI_DATE_QUARTER_END = 12; + +BI.DateTrigger.MULTI_DATE_WEEK_PREV = 13; +BI.DateTrigger.MULTI_DATE_WEEK_AFTER = 14; + +BI.DateTrigger.MULTI_DATE_DAY_PREV = 15; +BI.DateTrigger.MULTI_DATE_DAY_AFTER = 16; +BI.DateTrigger.MULTI_DATE_DAY_TODAY = 17; + +BI.DateTrigger.MULTI_DATE_PARAM = 18; +BI.DateTrigger.MULTI_DATE_CALENDAR = 19; + +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM = {}; +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_PREV] = BI.i18nText("BI-Multi_Date_Year_Prev"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_AFTER] = BI.i18nText("BI-Multi_Date_Year_Next"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_BEGIN] = BI.i18nText("BI-Multi_Date_Year_Begin"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_YEAR_END] = BI.i18nText("BI-Multi_Date_Year_End"); + +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_PREV] = BI.i18nText("BI-Multi_Date_Quarter_Prev"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_AFTER] = BI.i18nText("BI-Multi_Date_Quarter_Next"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_BEGIN] = BI.i18nText("BI-Multi_Date_Quarter_Begin"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_QUARTER_END] = BI.i18nText("BI-Multi_Date_Quarter_End"); + +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_PREV] = BI.i18nText("BI-Multi_Date_Month_Prev"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_AFTER] = BI.i18nText("BI-Multi_Date_Month_Next"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_BEGIN] = BI.i18nText("BI-Multi_Date_Month_Begin"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_MONTH_END] = BI.i18nText("BI-Multi_Date_Month_End"); + +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_WEEK_PREV] = BI.i18nText("BI-Multi_Date_Week_Prev"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_WEEK_AFTER] = BI.i18nText("BI-Multi_Date_Week_Next"); + +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_PREV] = BI.i18nText("BI-Multi_Date_Day_Prev"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_AFTER] = BI.i18nText("BI-Multi_Date_Day_Next"); +BI.DateTrigger.MULTI_DATE_SEGMENT_NUM[BI.DateTrigger.MULTI_DATE_DAY_TODAY] = BI.i18nText("BI-Multi_Date_Today"); + BI.DateTrigger.EVENT_FOCUS = "EVENT_FOCUS"; BI.DateTrigger.EVENT_START = "EVENT_START"; BI.DateTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; @@ -13814,11 +13863,6 @@ BI.PreviewTable = BI.inherit(BI.Widget, { populate: function (items, header) { this.table.populate(items, header); - }, - - destroy: function () { - this.table.destroy(); - BI.PreviewTable.superclass.destroy.apply(this, arguments); } }); BI.PreviewTable.EVENT_CHANGE = "PreviewTable.EVENT_CHANGE"; @@ -14704,6 +14748,368 @@ BI.RelationViewRegion.EVENT_HOVER_IN = "RelationViewRegion.EVENT_HOVER_IN"; BI.RelationViewRegion.EVENT_HOVER_OUT = "RelationViewRegion.EVENT_HOVER_OUT"; BI.RelationViewRegion.EVENT_PREVIEW = "RelationViewRegion.EVENT_PREVIEW"; BI.shortcut('bi.relation_view_region', BI.RelationViewRegion);/** + * 自适应宽度的表格 + * + * 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);/** * 加号表示的组节点 * Created by GUY on 2015/9/6. * @class BI.SelectTreeFirstPlusGroupNode diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index b8051a481..3d083e5a5 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -1,6 +1,14 @@ Demo.WIDGET_CONFIG = [{ id: 4, text: "详细控件" +}, { + id: 401, + pId: 4, + text: "table" +}, { + pId: 401, + text: "bi.preview_table", + value: "demo.preview_table" }, { pId: 4, text: "bi.multi_select_combo", diff --git a/demo/js/widget/table/demo.preview_table.js b/demo/js/widget/table/demo.preview_table.js new file mode 100644 index 000000000..17113ff3c --- /dev/null +++ b/demo/js/widget/table/demo.preview_table.js @@ -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); \ No newline at end of file diff --git a/dist/base.js b/dist/base.js index 7fdca65c7..c15461b3b 100644 --- a/dist/base.js +++ b/dist/base.js @@ -30423,11 +30423,9 @@ BI.Table = BI.inherit(BI.Widget, { self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT); } }); - BI.Resizers.add(this.getName(), function (e) { - if (BI.isWindow(e.target) && self.element.is(":visible")) { - self._resize(); - self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); - } + BI.ResizeDetector.addResizeListener(this, function () { + self._resize(); + self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); }); }, @@ -30809,6 +30807,7 @@ BI.Table = BI.inherit(BI.Widget, { .addClass(c === rows.length - 1 ? "last-col" : ""); var w = BI.createWidget(map[r][c], { type: "bi.table_cell", + root: true, textAlign: "left", width: BI.isNumeric(width) ? width : "", height: BI.isNumeric(height) ? height : "", @@ -30887,6 +30886,7 @@ BI.Table = BI.inherit(BI.Widget, { this.footer.element.append(this._createFooterCells(o.footer, null, this.footerTds, this.footerItems)); return this.footer; }, + _createBody: function () { var self = this, o = this.options; diff --git a/dist/core.js b/dist/core.js index 9a8ab007e..ca58c5699 100644 --- a/dist/core.js +++ b/dist/core.js @@ -14344,6 +14344,7 @@ $.extend(BI.OB.prototype, { BI.Widget = BI.inherit(BI.OB, { _defaultConfig: function () { return BI.extend(BI.Widget.superclass._defaultConfig.apply(this), { + root: false, tagName: "div", attributes: null, data: null, @@ -14392,6 +14393,7 @@ BI.Widget = BI.inherit(BI.OB, { _initRoot: function () { var o = this.options; this.widgetName = o.widgetName || BI.uniqueId("widget"); + this._isRoot = o.root; if (BI.isWidget(o.element)) { if (o.element instanceof BI.Widget) { this._parent = o.element; @@ -25765,7 +25767,7 @@ BI.FloatCenterAdaptLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, stroke: function (items) { @@ -25828,7 +25830,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, _addElement: function (i, item) { diff --git a/dist/widget.css b/dist/widget.css index 300750cb6..51d075000 100644 --- a/dist/widget.css +++ b/dist/widget.css @@ -632,6 +632,14 @@ /****添加计算宽度的--运算符直接需要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; +} +/****添加计算宽度的--运算符直接需要space****/ +/****** common color(常用颜色,可用于普遍场景) *****/ +/**** custom color(自定义颜色,用于特定场景) ****/ .bi-sequence-table-dynamic-number .sequence-table-title-cell { overflow: hidden; overflow-x: hidden; diff --git a/dist/widget.js b/dist/widget.js index 9e3f05ca4..79b37753d 100644 --- a/dist/widget.js +++ b/dist/widget.js @@ -13863,11 +13863,6 @@ BI.PreviewTable = BI.inherit(BI.Widget, { populate: function (items, header) { this.table.populate(items, header); - }, - - destroy: function () { - this.table.destroy(); - BI.PreviewTable.superclass.destroy.apply(this, arguments); } }); BI.PreviewTable.EVENT_CHANGE = "PreviewTable.EVENT_CHANGE"; @@ -14753,6 +14748,368 @@ BI.RelationViewRegion.EVENT_HOVER_IN = "RelationViewRegion.EVENT_HOVER_IN"; BI.RelationViewRegion.EVENT_HOVER_OUT = "RelationViewRegion.EVENT_HOVER_OUT"; BI.RelationViewRegion.EVENT_PREVIEW = "RelationViewRegion.EVENT_PREVIEW"; BI.shortcut('bi.relation_view_region', BI.RelationViewRegion);/** + * 自适应宽度的表格 + * + * 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);/** * 加号表示的组节点 * Created by GUY on 2015/9/6. * @class BI.SelectTreeFirstPlusGroupNode diff --git a/src/base/table/table.js b/src/base/table/table.js index 1b95ff6de..7f139ff34 100644 --- a/src/base/table/table.js +++ b/src/base/table/table.js @@ -359,11 +359,9 @@ BI.Table = BI.inherit(BI.Widget, { self.fireEvent(BI.Table.EVENT_TABLE_AFTER_INIT); } }); - BI.Resizers.add(this.getName(), function (e) { - if (BI.isWindow(e.target) && self.element.is(":visible")) { - self._resize(); - self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); - } + BI.ResizeDetector.addResizeListener(this, function () { + self._resize(); + self.fireEvent(BI.Table.EVENT_TABLE_RESIZE); }); }, @@ -745,6 +743,7 @@ BI.Table = BI.inherit(BI.Widget, { .addClass(c === rows.length - 1 ? "last-col" : ""); var w = BI.createWidget(map[r][c], { type: "bi.table_cell", + root: true, textAlign: "left", width: BI.isNumeric(width) ? width : "", height: BI.isNumeric(height) ? height : "", @@ -823,6 +822,7 @@ BI.Table = BI.inherit(BI.Widget, { this.footer.element.append(this._createFooterCells(o.footer, null, this.footerTds, this.footerItems)); return this.footer; }, + _createBody: function () { var self = this, o = this.options; diff --git a/src/core/widget.js b/src/core/widget.js index 29bc55f37..f2bbcd8ec 100644 --- a/src/core/widget.js +++ b/src/core/widget.js @@ -8,6 +8,7 @@ BI.Widget = BI.inherit(BI.OB, { _defaultConfig: function () { return BI.extend(BI.Widget.superclass._defaultConfig.apply(this), { + root: false, tagName: "div", attributes: null, data: null, @@ -56,6 +57,7 @@ BI.Widget = BI.inherit(BI.OB, { _initRoot: function () { var o = this.options; this.widgetName = o.widgetName || BI.uniqueId("widget"); + this._isRoot = o.root; if (BI.isWidget(o.element)) { if (o.element instanceof BI.Widget) { this._parent = o.element; diff --git a/src/core/wrapper/layout/adapt/float.center.js b/src/core/wrapper/layout/adapt/float.center.js index 29d7367a8..78f963094 100644 --- a/src/core/wrapper/layout/adapt/float.center.js +++ b/src/core/wrapper/layout/adapt/float.center.js @@ -37,7 +37,7 @@ BI.FloatCenterAdaptLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, stroke: function (items) { diff --git a/src/core/wrapper/layout/adapt/float.horizontal.js b/src/core/wrapper/layout/adapt/float.horizontal.js index 11f905bb4..8fd043e21 100644 --- a/src/core/wrapper/layout/adapt/float.horizontal.js +++ b/src/core/wrapper/layout/adapt/float.horizontal.js @@ -32,7 +32,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { element: this, items: [this.left] }); - this.removeWidget(this.container.getName()); + this.removeWidget(this.container); }, _addElement: function (i, item) { diff --git a/src/css/widget/responsivetable/responsivetable.css b/src/css/widget/responsivetable/responsivetable.css new file mode 100644 index 000000000..e19ce6816 --- /dev/null +++ b/src/css/widget/responsivetable/responsivetable.css @@ -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; +} diff --git a/src/less/widget/responsivetable/responsivetable.less b/src/less/widget/responsivetable/responsivetable.less new file mode 100644 index 000000000..87cbfb289 --- /dev/null +++ b/src/less/widget/responsivetable/responsivetable.less @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/widget/previewtable/previewtable.js b/src/widget/previewtable/previewtable.js index 51cad7aaf..8e8bf5ba0 100644 --- a/src/widget/previewtable/previewtable.js +++ b/src/widget/previewtable/previewtable.js @@ -198,11 +198,6 @@ BI.PreviewTable = BI.inherit(BI.Widget, { populate: function (items, header) { this.table.populate(items, header); - }, - - destroy: function () { - this.table.destroy(); - BI.PreviewTable.superclass.destroy.apply(this, arguments); } }); BI.PreviewTable.EVENT_CHANGE = "PreviewTable.EVENT_CHANGE"; diff --git a/src/widget/responsivetable/responsivetable.js b/src/widget/responsivetable/responsivetable.js new file mode 100644 index 000000000..17b9f1616 --- /dev/null +++ b/src/widget/responsivetable/responsivetable.js @@ -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); \ No newline at end of file