From 5199d4e44ee9eed1a38217dafffb7af65d24b670 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Thu, 18 Oct 2018 17:35:01 +0800 Subject: [PATCH] start writing page --- copyoftemplateclass.ts | 10 +++---- index.html | 33 ++++++++++++++++----- src/script/TemplateClasses.ts | 48 ++++++++++++++++++++++++++++-- src/script/designerClasses.ts | 26 +++++++++++++--- src/script/main.ts | 56 +++++++++++++++++++++-------------- src/style/style.css | 24 ++++++++++----- 6 files changed, 149 insertions(+), 48 deletions(-) diff --git a/copyoftemplateclass.ts b/copyoftemplateclass.ts index 9e74404..e685dde 100644 --- a/copyoftemplateclass.ts +++ b/copyoftemplateclass.ts @@ -74,11 +74,11 @@ class Table { const inputElements = document.getElementsByClassName("cell-detail"); for (const key in instanceOfCell) { // type script error--------------------------- - for (const input of inputElements) { - if (key === input.name) { - instanceOfCell[key] = input.value; - } - } + // for (const input of inputElements) { + // if (key === input.name) { + // instanceOfCell[key] = input.value; + // } + // } } this.render(); diff --git a/index.html b/index.html index b51a41f..8f86667 100644 --- a/index.html +++ b/index.html @@ -9,16 +9,33 @@ -
-
-
-
- +
+
+
+
-
- -
+
+ + + + + + + + + + + + + +
+ +
+
+ +
+
diff --git a/src/script/TemplateClasses.ts b/src/script/TemplateClasses.ts index e38a2ed..e3b2329 100644 --- a/src/script/TemplateClasses.ts +++ b/src/script/TemplateClasses.ts @@ -1,3 +1,5 @@ +import { ControlPanel } from "./designerClasses"; + // 表格类 class Table { rowLength: number; @@ -8,11 +10,50 @@ class Table { constructor(rowLength: number, columnLength: number, instanceOfCells: any) { this.rowLength = rowLength; this.columnLength = columnLength; - this.instanceOfCells = instanceOfCells; + this.selectedRow; this.selectedCell; } - render() {} + render(instanceOfCells) { + var myNode = document.getElementById("table"); + while (myNode.firstChild) { + myNode.removeChild(myNode.firstChild); + } + var cellIndex = -1; + for (var i = 0; i < this.rowLength; i++) { + var table: HTMLTableElement = ( + document.getElementById("table") + ); + var row = table.insertRow(-1); + + for (var j = 0; j < this.columnLength; j++) { + var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); + + const instanceOfCell = instanceOfCells[(cellIndex += 1)]; + const cellElement = instanceOfCell.CreateCellElement(); + row.appendChild(cellElement); + + cellElement.addEventListener("dblclick", () => { + cellElement.className = "highlight"; + this.showDesignerInfo(instanceOfCell); + }); + + cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter; + } + } + } + showDesignerInfo(instanceOfCell) { + const cellInfoElements = document + .getElementById("cell-info") + .getElementsByTagName("input"); + for (let i = 0; i < cellInfoElements.length; i++) { + for (const key of Object.keys(instanceOfCell)) { + if (key === cellInfoElements[i].name) { + cellInfoElements[i].value = instanceOfCell[key]; + } + } + } + } deleteCurrentRow() {} deleteCurrenCol() {} insertColToLeft() {} @@ -42,6 +83,7 @@ class Cell { border: string; backgroundColor: string; textAlign: string; + className: string; constructor(id) { this.cellId = id; this.font = "Serif"; @@ -53,6 +95,7 @@ class Cell { this.border = ""; this.backgroundColor = ""; this.textAlign = "left"; + this.className = "normal"; } CreateCellElement() { @@ -69,6 +112,7 @@ class Cell { tdElement.style.textDecoration = this.textDecoration; tdElement.style.textAlign = this.textAlign; tdElement.innerHTML = "cell"; + tdElement.className = this.className; return tdElement; } diff --git a/src/script/designerClasses.ts b/src/script/designerClasses.ts index 31c349b..ffdab0e 100644 --- a/src/script/designerClasses.ts +++ b/src/script/designerClasses.ts @@ -1,11 +1,29 @@ // 控制面板类 class ControlPanel { - instanceOfCell: HTMLElement; + cellId: string; - constructor(cell) { - this.instanceOfCell = cell; + constructor(cellId) { + this.cellId = cellId; } render() {} + update(instanceOfCells) { + const cellInfoObject = {}; + const cellInfoElements = document + .getElementById("cell-info") + .getElementsByTagName("input"); + for (let x = 0; x < cellInfoElements.length; x++) { + cellInfoObject[cellInfoElements[x].name] = cellInfoElements[x].value; + } + for (const instance of instanceOfCells) { + if (instance.cellId === "A1") { + for (const key in cellInfoObject) { + instance[key] = cellInfoObject[key]; + } + console.log(instance); + } + } + } + setFont() {} setFontSize() {} setFontColor() {} @@ -35,7 +53,6 @@ class DataResource { class DataResourceItem { displayName: string; dataField: string; - constructor(name, field) { this.displayName = name; this.dataField = field; @@ -121,3 +138,4 @@ interface OrderDetailsFormat { }>; }>; } +export { ControlPanel }; diff --git a/src/script/main.ts b/src/script/main.ts index fb365b2..5c3d869 100644 --- a/src/script/main.ts +++ b/src/script/main.ts @@ -1,28 +1,40 @@ -// import { Table, Cell } from "./TemplateClasses"; +import { Table, Cell } from "./TemplateClasses"; +import { ControlPanel } from "./designerClasses"; -// const submit = document.getElementById("submitRowCol"); +const createTable = document.getElementById("submitRowCol"); +const updateCellInfo = document.getElementById("update"); +const instanceOfCells = []; -// const rowElement = document.getElementById("totalRow"); -// const totalRow = Number(rowElement.value); -// const colElement = document.getElementById("totalCol"); -// const totalCol = Number(colElement.value); +createTable.addEventListener( + "click", + () => { + const rowElement = document.getElementById("totalRow"); + const totalRow = Number(rowElement.value); + const colElement = document.getElementById("totalCol"); + const totalCol = Number(colElement.value); -// submit.addEventListener( -// "click", -// () => { -// const instanceOfCells = []; + for (var i = 0; i < totalRow; i++) { + for (var j = 0; j < totalCol; j++) { + var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); -// for (var i = 0; i < totalRow; i++) { -// for (var j = 0; j < totalCol; j++) { -// var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); + const newCell = new Cell(letter + i); + instanceOfCells.push(newCell); + } + } -// const newCell = new Cell(letter + i); -// instanceOfCells.push(newCell); -// } -// } + const table = new Table(totalRow, totalCol, instanceOfCells); + table.render(instanceOfCells); + }, + false +); -// const table = new Table(totalRow, totalCol, instanceOfCells); -// table.render(); -// }, -// false -// ); +updateCellInfo.addEventListener("click", () => { + const rowElement = document.getElementById("totalRow"); + const totalRow = Number(rowElement.value); + const colElement = document.getElementById("totalCol"); + const totalCol = Number(colElement.value); + const instanceOfControlPanel = new ControlPanel("A1"); + instanceOfControlPanel.update(instanceOfCells); + const table = new Table(totalRow, totalCol, instanceOfCells); + table.render(instanceOfCells); +}); diff --git a/src/style/style.css b/src/style/style.css index 1fedaed..b444f42 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -1,14 +1,15 @@ #app { display: flex; } -#table { - width: 80%; -} -.sidebar { - width: 20%; - height: 100vh; +#designer { + display: flex; + border: 1px black solid; + height: 120px; background-color: lightgray; } +#table { + width: 100%; +} li { list-style: none; @@ -24,13 +25,22 @@ input { padding: 2px; } -td:hover { +tr:hover { background-color: #eee; } td:focus { background-color: #ccf; } +.highlight { + background-color: #ccf; +} +.normal { + background-color: white; +} +input { + width: 30px; +} input:not(:focus) { text-align: right;