mqzheng/report-design-javascript
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

start writing page

Browse Source
This commit is contained in:
郑茂强
2018-10-18 17:35:01 +08:00
parent 9f71819b06
commit 5199d4e44e
6 changed files with 149 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
copyoftemplateclass.ts
View File

@@ -74,11 +74,11 @@ class Table {
const inputElements = document.getElementsByClassName("cell-detail"); const inputElements = document.getElementsByClassName("cell-detail");
for (const key in instanceOfCell) { for (const key in instanceOfCell) {
// type script error--------------------------- // type script error---------------------------
for (const input of inputElements) { // for (const input of inputElements) {
if (key === input.name) { // if (key === input.name) {
instanceOfCell[key] = input.value; // instanceOfCell[key] = input.value;
} // }
} // }
} }
this.render(); this.render();

33
index.html
View File

@@ -9,16 +9,33 @@
</head> </head>
<body> <body>
<div id='app'> <div id='designer'>
<table id='table'></table> <div id='table-creator'>
<div class='sidebar'> <label>列数</label> <input id='totalCol' type="text" value='10'> <br>
<label>列数</label> <input id='totalCol' type="text" value=10> <br> <label>行数</label> <input id='totalRow' type="text" value='10'> <br>
<label>行数</label> <input id='totalRow' type="text" value=10>
<button id='submitRowCol'>创建表格</button> <button id='submitRowCol'>创建表格</button>
<div id='cellInfo'>
</div>
</div> </div>
<div id='cell-info'>
<label>颜色</label> <input type="text" name='color'>
<label>单元Id</label> <input type="text" name='cellId'>
<label>字体</label> <input type="text" name='font'>
<label>字体大小</label> <input type="text" name='fontSize'>
<label>颜色</label> <input type="text" name='fontColor'>
<label>加粗</label> <input type="text" name='fontWeight'>
<label>斜体</label> <input type="text" name='fontStyle'>
<label>下划线</label> <input type="text" name='textDecoration'>
<label>边框</label> <input type="text" name='border'>
<label>背景颜色</label> <input type="text" name='backgroundColor'>
<label>位置</label> <input type="text" name='textAlign'>
<button id='update'>更新</button>
</div>
</div>
<div id='app'>
<table id='table'></table>
</div> </div>

48
src/script/TemplateClasses.ts
View File

@@ -1,3 +1,5 @@
import { ControlPanel } from "./designerClasses";
// 表格类 // 表格类
class Table { class Table {
rowLength: number; rowLength: number;
@@ -8,11 +10,50 @@ class Table {
constructor(rowLength: number, columnLength: number, instanceOfCells: any) { constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
this.rowLength = rowLength; this.rowLength = rowLength;
this.columnLength = columnLength; this.columnLength = columnLength;
this.instanceOfCells = instanceOfCells;
this.selectedRow; this.selectedRow;
this.selectedCell; 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 = <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() {} deleteCurrentRow() {}
deleteCurrenCol() {} deleteCurrenCol() {}
insertColToLeft() {} insertColToLeft() {}
@@ -42,6 +83,7 @@ class Cell {
border: string; border: string;
backgroundColor: string; backgroundColor: string;
textAlign: string; textAlign: string;
className: string;
constructor(id) { constructor(id) {
this.cellId = id; this.cellId = id;
this.font = "Serif"; this.font = "Serif";
@@ -53,6 +95,7 @@ class Cell {
this.border = ""; this.border = "";
this.backgroundColor = ""; this.backgroundColor = "";
this.textAlign = "left"; this.textAlign = "left";
this.className = "normal";
} }
CreateCellElement() { CreateCellElement() {
@@ -69,6 +112,7 @@ class Cell {
tdElement.style.textDecoration = this.textDecoration; tdElement.style.textDecoration = this.textDecoration;
tdElement.style.textAlign = this.textAlign; tdElement.style.textAlign = this.textAlign;
tdElement.innerHTML = "cell"; tdElement.innerHTML = "cell";
tdElement.className = this.className;
return tdElement; return tdElement;
} }

26
src/script/designerClasses.ts
View File

@@ -1,11 +1,29 @@
// 控制面板类 // 控制面板类
class ControlPanel { class ControlPanel {
instanceOfCell: HTMLElement; cellId: string;
constructor(cell) { constructor(cellId) {
this.instanceOfCell = cell; this.cellId = cellId;
} }
render() {} 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() {} setFont() {}
setFontSize() {} setFontSize() {}
setFontColor() {} setFontColor() {}
@@ -35,7 +53,6 @@ class DataResource {
class DataResourceItem { class DataResourceItem {
displayName: string; displayName: string;
dataField: string; dataField: string;
constructor(name, field) { constructor(name, field) {
this.displayName = name; this.displayName = name;
this.dataField = field; this.dataField = field;
@@ -121,3 +138,4 @@ interface OrderDetailsFormat {
}>; }>;
}>; }>;
} }
export { ControlPanel };

56
src/script/main.ts
View File

@@ -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 = <HTMLInputElement>document.getElementById("totalRow"); createTable.addEventListener(
// const totalRow = Number(rowElement.value); "click",
// const colElement = <HTMLInputElement>document.getElementById("totalCol"); () => {
// const totalCol = Number(colElement.value); const rowElement = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>document.getElementById("totalCol");
const totalCol = Number(colElement.value);
// submit.addEventListener( for (var i = 0; i < totalRow; i++) {
// "click", for (var j = 0; j < totalCol; j++) {
// () => { var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
// const instanceOfCells = [];
// for (var i = 0; i < totalRow; i++) { const newCell = new Cell(letter + i);
// for (var j = 0; j < totalCol; j++) { instanceOfCells.push(newCell);
// var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); }
}
// const newCell = new Cell(letter + i); const table = new Table(totalRow, totalCol, instanceOfCells);
// instanceOfCells.push(newCell); table.render(instanceOfCells);
// } },
// } false
);
// const table = new Table(totalRow, totalCol, instanceOfCells); updateCellInfo.addEventListener("click", () => {
// table.render(); const rowElement = <HTMLInputElement>document.getElementById("totalRow");
// }, const totalRow = Number(rowElement.value);
// false const colElement = <HTMLInputElement>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);
});

24
src/style/style.css
View File

@@ -1,14 +1,15 @@
#app { #app {
display: flex; display: flex;
} }
#table { #designer {
width: 80%; display: flex;
} border: 1px black solid;
.sidebar { height: 120px;
width: 20%;
height: 100vh;
background-color: lightgray; background-color: lightgray;
} }
#table {
width: 100%;
}
li { li {
list-style: none; list-style: none;
@@ -24,13 +25,22 @@ input {
padding: 2px; padding: 2px;
} }
td:hover { tr:hover {
background-color: #eee; background-color: #eee;
} }
td:focus { td:focus {
background-color: #ccf; background-color: #ccf;
} }
.highlight {
background-color: #ccf;
}
.normal {
background-color: white;
}
input {
width: 30px;
}
input:not(:focus) { input:not(:focus) {
text-align: right; text-align: right;