增加表格UI。

src/ui/Table.js

@@ -0,0 +1,38 @@
+import Container from './Container';
+
+/**
+ * 表格
+ * @param {*} options 配置
+ */
+function Table(options) {
+    Container.call(this, options);
+    options = options || {};
+
+    this.cls = options.cls || 'Table';
+    this.style = options.style || {};
+}
+
+Table.prototype = Object.create(Container.prototype);
+Table.prototype.constructor = Table;
+
+Table.prototype.render = function () {
+    this.dom = document.createElement('table');
+
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.parent.appendChild(this.dom);
+
+    this.children.forEach((n) => {
+        var obj = UI.create(n);
+        obj.parent = this.dom;
+        obj.render();
+    });
+};
+
+export default Table;

src/ui/TableBody.js

@@ -0,0 +1,38 @@
+import Container from './Container';
+
+/**
+ * 表格身体
+ * @param {*} options 配置
+ */
+function TableBody(options) {
+    Container.call(this, options);
+    options = options || {};
+
+    this.cls = options.cls || 'TableBody';
+    this.style = options.style || {};
+}
+
+TableBody.prototype = Object.create(Container.prototype);
+TableBody.prototype.constructor = TableBody;
+
+TableBody.prototype.render = function () {
+    this.dom = document.createElement('tbody');
+
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.parent.appendChild(this.dom);
+
+    this.children.forEach((n) => {
+        var obj = UI.create(n);
+        obj.parent = this.dom;
+        obj.render();
+    });
+};
+
+export default TableBody;

src/ui/TableData.js

@@ -0,0 +1,44 @@
+import Container from './Container';
+
+/**
+ * 表格一个单元格
+ * @param {*} options 配置
+ */
+function TableData(options) {
+    Container.call(this, options);
+    options = options || {};
+
+    this.html = options.html || null;
+
+    this.cls = options.cls || 'TableData';
+    this.style = options.style || {};
+}
+
+TableData.prototype = Object.create(Container.prototype);
+TableData.prototype.constructor = TableData;
+
+TableData.prototype.render = function () {
+    this.dom = document.createElement('td');
+
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.parent.appendChild(this.dom);
+
+    if (this.html) {
+        this.dom.innerHTML = this.html;
+    }
+
+    this.children.forEach((n) => {
+        var obj = UI.create(n);
+        obj.parent = this.dom;
+        obj.render();
+    });
+};
+
+export default TableData;

src/ui/TableHead.js

@@ -0,0 +1,38 @@
+import Container from './Container';
+
+/**
+ * 表格头部
+ * @param {*} options 配置
+ */
+function TableHead(options) {
+    Container.call(this, options);
+    options = options || {};
+
+    this.cls = options.cls || 'TableHead';
+    this.style = options.style || {};
+}
+
+TableHead.prototype = Object.create(Container.prototype);
+TableHead.prototype.constructor = TableHead;
+
+TableHead.prototype.render = function () {
+    this.dom = document.createElement('thead');
+
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.parent.appendChild(this.dom);
+
+    this.children.forEach((n) => {
+        var obj = UI.create(n);
+        obj.parent = this.dom;
+        obj.render();
+    });
+};
+
+export default TableHead;

src/ui/TableRow.js

@@ -0,0 +1,38 @@
+import Container from './Container';
+
+/**
+ * 表格一行
+ * @param {*} options 配置
+ */
+function TableRow(options) {
+    Container.call(this, options);
+    options = options || {};
+
+    this.cls = options.cls || 'TableRow';
+    this.style = options.style || {};
+}
+
+TableRow.prototype = Object.create(Container.prototype);
+TableRow.prototype.constructor = TableRow;
+
+TableRow.prototype.render = function () {
+    this.dom = document.createElement('tr');
+
+    if (this.cls) {
+        this.dom.className = this.cls;
+    }
+
+    if (this.style) {
+        Object.assign(this.dom.style, this.style);
+    }
+
+    this.parent.appendChild(this.dom);
+
+    this.children.forEach((n) => {
+        var obj = UI.create(n);
+        obj.parent = this.dom;
+        obj.render();
+    });
+};
+
+export default TableRow;

src/ui/UI.js

@@ -26,6 +26,11 @@ import Window from './Window';
 import Image from './Image';
 import ImageList from './ImageList';
 import MessageBox from './MessageBox';
+import Table from './Table';
+import TableHead from './TableHead';
+import TableBody from './TableBody';
+import TableRow from './TableRow';
+import TableData from './TableData';
 
 /**
  * UI类
@@ -172,7 +177,12 @@ Object.assign(UI, {
     Window: Window,
     Image: Image,
     ImageList: ImageList,
-    MessageBox: MessageBox
+    MessageBox: MessageBox,
+    Table: Table,
+    TableHead: TableHead,
+    TableBody: TableBody,
+    TableRow: TableRow,
+    TableData: TableData
 });
 
 // 添加所有控件的XType
@@ -204,6 +214,11 @@ UI.addXType('window', Window);
 UI.addXType('image', Image);
 UI.addXType('imagelist', ImageList);
 UI.addXType('msg', MessageBox);
+UI.addXType('table', Table);
+UI.addXType('thead', TableHead);
+UI.addXType('tbody', TableBody);
+UI.addXType('tr', TableRow);
+UI.addXType('td', TableData);
 
 // 添加一些实用功能
 Object.assign(UI, {