bi.table支持grid布局

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"});

src/core/wrapper/layout/layout.table.js

@@ -10,7 +10,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
             baseCls: "bi-t",
             scrolly: true,
             columnSize: [],
-            rowSize: 30,  // or [30,30,30]
+            // rowSize: 30,  // or [30,30,30]
             hgap: 0,
             vgap: 0,
             items: []
@@ -18,18 +18,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) {
                 item.addClass("first-row");
@@ -40,6 +66,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 +80,38 @@ 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);
-            }
-        }
-
-        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;
+                return firstObject(item, row, col);
             }
         }
-        for (j = arr.length - 1; j > i; j--) {
+        return BI.reduce(items, function (row, result, i) {
-            if (BI.isNumber(o.columnSize[j])) {
+            return result.concat(BI.map(row, function (j, item) {
-                first(arr[j], this.rows, j);
+                if (BI.isEmpty(item)) {
-                abs.push(BI.extend({
+                    return {
-                    top: 0,
+                        type: "bi.layout"
-                    bottom: 0,
+                    }
-                    right: this._optimiseGap(right),
+                }
-                    width: this._optimiseGap(o.columnSize[j])
+                return first(item, i, 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)
-            });
-        }
-        w.element.css({
-            position: "relative"
-        });
-        this.addWidget(this._getChildName(this.rows++), w);
-        return w;
     },
 
     resize: function () {
         // console.log("table布局不需要resize");
     },
 
-    update: function (opt) {
-        return this.forceUpdate(opt);
-    },
-
     populate: function (items) {
-        BI.TableLayout.superclass.populate.apply(this, arguments);
+        this.layout.populate(this._formatItems(items));
-        this._mount();
     }
 });
 BI.shortcut("bi.table", BI.TableLayout);

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",

src/less/core/wrapper/table.less

@@ -0,0 +1,3 @@
+.bi-t {
+  display: grid;
+}