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
Show Stats 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");
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();

33
index.html
View File

@ -9,16 +9,33 @@
</head>
<body>
<div id='app'>
<table id='table'></table>
<div class='sidebar'>
<label>列数</label> <input id='totalCol' type="text" value=10> <br>
<label>行数</label> <input id='totalRow' type="text" value=10>
<div id='designer'>
<div id='table-creator'>
<label>列数</label> <input id='totalCol' type="text" value='10'> <br>
<label>行数</label> <input id='totalRow' type="text" value='10'> <br>
<button id='submitRowCol'>创建表格</button>
<div id='cellInfo'>
</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>

48
src/script/TemplateClasses.ts
View File

@ -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 = <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;
}

26
src/script/designerClasses.ts
View File

@ -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 };

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");
// const totalRow = Number(rowElement.value);
// const colElement = <HTMLInputElement>document.getElementById("totalCol");
// const totalCol = Number(colElement.value);
createTable.addEventListener(
"click",
() => {
const rowElement = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>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 = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
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 {
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;