diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index b85d1dac8..0076811fd 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -5,13 +5,19 @@ BI.prepares.push(function () { // 1、支持flex的浏览器下使用flex布局 // 2、不支持flex的浏览器下使用inline布局 // 3、当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了。当横向出滚动条时使用table布局，不出滚动条时使用float布局 - var _isSupportFlex; + var _isSupportFlex, _isSupportGrid; var isSupportFlex = function () { if (_isSupportFlex == null) { _isSupportFlex = !!(BI.isSupportCss3 && BI.isSupportCss3("flex")); } return _isSupportFlex; }; + var isSupportGrid = function () { + if (_isSupportGrid == null) { + _isSupportGrid = !!(BI.isSupportCss3 && BI.isSupportCss3("grid")); + } + return _isSupportGrid; + }; // 判断浏览器是否支持sticky 属性 var isSupportSticky = (function () { var vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"], @@ -224,6 +230,13 @@ BI.prepares.push(function () { } }); + BI.Plugin.configWidget("bi.table", function (ob) { + if (!isSupportGrid()) { + return BI.extend({}, ob, {type: "bi.td"}); + } + return ob; + }); + BI.Plugin.configWidget("bi.radio", function (ob) { if (BI.isIE() && BI.getIEVersion() <= 9) { return BI.extend({}, ob, {type: "bi.image_radio"}); diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js index 50f9a39f5..6352672c2 100644 --- a/src/core/wrapper/layout/layout.table.js +++ b/src/core/wrapper/layout/layout.table.js @@ -8,9 +8,12 @@ BI.TableLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), { baseCls: "bi-t", - scrolly: true, + // scrolly: true, columnSize: [], - rowSize: 30, // or [30,30,30] + rowSize: [], + horizontalAlign: BI.HorizontalAlign.Stretch, + verticalAlign: BI.VerticalAlign.Stretch, + // rowSize: 30, // or [30,30,30] hgap: 0, vgap: 0, items: [] @@ -18,17 +21,44 @@ BI.TableLayout = BI.inherit(BI.Layout, { }, render: function () { BI.TableLayout.superclass.render.apply(this, arguments); - this.rows = 0; var self = this, o = this.options; var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { self.populate(newValue); }) : o.items; - this.populate(items); + + var columnSize = o.columnSize.length > 0 ? o.columnSize : BI.range(items[0].length).fill(""); + + if (columnSize.length > 0) { + var template = []; + for (var i = 0; i < columnSize.length; i++) { + if (columnSize[i] === "") { + template.push("auto"); + } else if (columnSize[i] === "fill") { + template.push("1fr"); + } else { + template.push(this._optimiseGap(columnSize[i])); + } + } + this.element.css({ + "grid-template-columns": template.join(" "), + "grid-template-rows": BI.isArray(o.rowSize) ? BI.map(o.rowSize, function (i, size) { + return self._optimiseGap(size); + }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "), + "grid-row-gap": this._optimiseGap(o.vgap), + "grid-column-gap": this._optimiseGap(o.hgap) + }); + } + return { + type: "bi.default", + ref: function (_ref) { + self.layout = _ref; + }, + items: this._formatItems(items) + }; }, - _addElement: function (idx, arr) { + _formatItems: function (items) { var o = this.options; - var abs = [], left = 0, right = 0, i, j; function firstElement (item, row, col) { if (row === 0) { @@ -40,6 +70,7 @@ BI.TableLayout = BI.inherit(BI.Layout, { item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); item.addClass("center-element"); + return item; } function firstObject (item, row, col) { @@ -53,85 +84,49 @@ BI.TableLayout = BI.inherit(BI.Layout, { BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); item.cls = (item.cls || "") + cls + " center-element"; + return item; } function first (item, row, col) { if (item instanceof BI.Widget) { - firstElement(item.element, row, col); + return firstElement(item.element, row, col); } else if (item.el instanceof BI.Widget) { - firstElement(item.el.element, row, col); + return firstElement(item.el.element, row, col); } else if (item.el) { - firstObject(item.el, row, col); + return firstObject(item.el, row, col); } else { - firstObject(item, row, col); + return firstObject(item, row, col); } } - for (i = 0; i < arr.length; i++) { - if (BI.isNumber(o.columnSize[i])) { - first(arr[i], this.rows, i); - abs.push(BI.extend({ - top: 0, - bottom: 0, - left: this._optimiseGap(left), - width: this._optimiseGap(o.columnSize[i]) - }, arr[i])); - left += o.columnSize[i] + (o.columnSize[i] < 1 ? 0 : o.hgap); - } else { - break; - } - } - for (j = arr.length - 1; j > i; j--) { - if (BI.isNumber(o.columnSize[j])) { - first(arr[j], this.rows, j); - abs.push(BI.extend({ - top: 0, - bottom: 0, - right: this._optimiseGap(right), - width: this._optimiseGap(o.columnSize[j]) - }, arr[j])); - right += o.columnSize[j] + (o.columnSize[j] < 1 ? 0 : o.hgap); - } else { - throw new Error("构造错误", arr); - } - } - if (i >= 0 && i < arr.length) { - first(arr[i], this.rows, i); - abs.push(BI.extend({ - top: 0, - bottom: 0, - left: this._optimiseGap(left), - right: this._optimiseGap(right) - }, arr[i])); - } - var w = BI._lazyCreateWidget({ - type: "bi.absolute", - height: BI.isArray(o.rowSize) ? o.rowSize[this.rows] : o.rowSize, - items: abs - }); - if (this.rows > 0) { - this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({ - "margin-bottom": this._optimiseGap(o.vgap) - }); + function wrapLayout (item) { + return { + type: "bi.horizontal_fill", + columnSize: ["fill"], + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + items: [BI.formatEL(item)] + }; } - w.element.css({ - position: "relative" - }); - this.addWidget(this._getChildName(this.rows++), w); - return w; + + return BI.reduce(items, function (row, result, i) { + return result.concat(BI.map(row, function (j, item) { + if (BI.isEmpty(item)) { + return first(wrapLayout({ + type: "bi.layout" + }), i, j); + } + return first(wrapLayout(item), i, j); + })); + }, []); }, resize: function () { // console.log("table布局不需要resize"); }, - update: function (opt) { - return this.forceUpdate(opt); - }, - populate: function (items) { - BI.TableLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.layout.populate(this._formatItems(items)); } }); BI.shortcut("bi.table", BI.TableLayout); diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index 311da9177..17a469754 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -78,7 +78,7 @@ BI.TdLayout = BI.inherit(BI.Layout, { } } - var height = o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]); + var height = BI.isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx])); var tr = BI._lazyCreateWidget({ type: "bi.default", tagName: "tr", diff --git a/src/less/core/wrapper/table.less b/src/less/core/wrapper/table.less new file mode 100644 index 000000000..f1a408c09 --- /dev/null +++ b/src/less/core/wrapper/table.less @@ -0,0 +1,3 @@ +.bi-t { + display: grid; +} \ No newline at end of file