diff --git a/src/ui/Table.js b/src/ui/Table.js new file mode 100644 index 00000000..e8a7ca66 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/TableBody.js b/src/ui/TableBody.js new file mode 100644 index 00000000..7b37407e --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/TableData.js b/src/ui/TableData.js new file mode 100644 index 00000000..31100ba6 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/TableHead.js b/src/ui/TableHead.js new file mode 100644 index 00000000..16bf93b1 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/TableRow.js b/src/ui/TableRow.js new file mode 100644 index 00000000..615d6668 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/UI.js b/src/ui/UI.js index 378b9404..be1ecb51 100644 --- a/src/ui/UI.js +++ b/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, {