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

add eventlistener to cells

Browse Source
This commit is contained in:
郑茂强 2018-10-19 17:34:51 +08:00
parent 5199d4e44e
commit 6a7d803dae
7 changed files with 298 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
copyoftemplateclass.ts
View File

@ -27,6 +27,7 @@ class Table {
document.getElementById("table") document.getElementById("table")
); );
var row = table.insertRow(-1); var row = table.insertRow(-1);
console.log(table);
for (var j = 0; j < this.columnLength; j++) { for (var j = 0; j < this.columnLength; j++) {
var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);

29
index.html
View File

@ -10,26 +10,6 @@
<body> <body>
<div id='designer'> <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>
<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>
<div id='app'> <div id='app'>
@ -38,6 +18,15 @@
</div> </div>
<div id='cntnr'>
<ul id='items'>
<li id='delete-table'>删除表格</li>
<li id='delete-current-row'>删除当前行</li>
<li id='insert-top-row'>上插入行</li>
</ul>
</div>

48
src/rescource/typescriptDefinition.ts Normal file
View File

@ -0,0 +1,48 @@
interface OrderDetailsFormat {
[index: string]: string | object;
orderNo: string;
clientName: string;
soldDate: string;
contactName: string;
contactNo: string;
deliveryAddress: string;
addOn: string;
boards: Array<{
[index: string]: number | string | object;
id: number;
material: string;
color: string;
boardInfos: Array<{
houseName: string;
closetName: string;
boardNo: string;
boardName: string;
length: number;
width: number;
thickness: number;
quantity: number;
area: number;
mutation: string;
shape: string;
direction: string;
stripe: string;
boardAddOn: string;
[index: string]: number | string;
}>;
}>;
}
interface cellInfoControlPanel {
backgroundColor: string;
border: string;
cellId: string;
color: string;
font: string;
fontColor: string;
fontSize: string;
fontStyle: string;
fontWeight: string;
textAlign: string;
textDecoration: string;
}
export { OrderDetailsFormat, cellInfoControlPanel };

148
src/script/TemplateClasses.ts
View File

@ -2,45 +2,8 @@ import { ControlPanel } from "./designerClasses";
// 表格类 // 表格类
class Table { class Table {
rowLength: number; render(tableInfo) {
columnLength: number; this.proccessTableData(tableInfo);
selectedRow: string;
selectedCell: string;
instanceOfCells: any;
constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
this.rowLength = rowLength;
this.columnLength = columnLength;
this.selectedRow;
this.selectedCell;
}
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) { showDesignerInfo(instanceOfCell) {
const cellInfoElements = document const cellInfoElements = document
@ -54,7 +17,103 @@ class Table {
} }
} }
} }
deleteCurrentRow() {} proccessTableData(tableInfo) {
const tableElement: HTMLTableElement = <HTMLTableElement>(
document.getElementById("table")
);
while (tableElement.firstChild) {
tableElement.removeChild(tableElement.firstChild);
}
for (const eachrow of tableInfo) {
const row = tableElement.insertRow(-1);
for (const cell of eachrow.cells) {
const letter = String.fromCharCode(
"A".charCodeAt(0) + eachrow.cells.indexOf(cell) - 1
);
const cellElement = cell.CreateCellElement();
row.appendChild(cellElement);
cellElement.addEventListener("dblclick", () => {
this.showDesignerInfo(cell);
});
cellElement.addEventListener(
"contextmenu",
ev => {
ev.preventDefault();
const dropDownElement = document.getElementById("cntnr");
dropDownElement.style.left = ev.pageX + "px";
dropDownElement.style.top = ev.pageY + "px";
dropDownElement.style.display = "block";
this.cellRightClickHandler(ev, tableInfo);
},
false
);
// cellElement.innerHTML = i && j ? cellElement.innerHTML : i || letter;
if (!(tableInfo.indexOf(eachrow) && eachrow.cells.indexOf(cell))) {
cellElement.innerHTML = tableInfo.indexOf(eachrow) || letter;
}
}
}
}
deleteCurrentRow(tableInfo, id) {
for (const row of tableInfo) {
for (const cell of row.cells) {
if (cell.cellId === id) {
tableInfo.splice(tableInfo.indexOf(row), 1);
this.render(tableInfo);
break;
}
}
}
}
deleteTable(tableInfo) {
tableInfo.splice(0, tableInfo.length);
this.render(tableInfo);
}
addRowBefore(tableInfo, id) {
// console.log("hello", id);
// for (const row of tableInfo) {
// for (const cell of row.cells) {
// if (cell.cellId === id) {
// const newRow = row;
// // tableInfo.splice(tableInfo.indexOf(row), 0, newRow);
// // this.render(tableInfo);
// break;
// }
// }
// }
//
// eventlistener occur more than once
//
cellRightClickHandler(ev, tableInfo) {
const deleteTableElement = document.getElementById("delete-table");
const deleteCurrenRowElement = document.getElementById(
"delete-current-row"
);
const insertTopRowElement = document.getElementById("insert-top-row");
deleteTableElement.addEventListener("click", () => {
this.deleteTable(tableInfo);
});
deleteCurrenRowElement.addEventListener("click", () => {
this.deleteCurrentRow(tableInfo, ev.target.id);
});
insertTopRowElement.addEventListener("click", () => {
console.log(123);
// this.addRowBefore(tableInfo, ev.target.id);
});
}
deleteCurrenCol() {} deleteCurrenCol() {}
insertColToLeft() {} insertColToLeft() {}
insertColToRight() {} insertColToRight() {}
@ -74,6 +133,7 @@ class Table {
// 单元类 // 单元类
class Cell { class Cell {
cellId: string; cellId: string;
content: string;
font: string; font: string;
fontSize: string; fontSize: string;
fontColor: string; fontColor: string;
@ -86,13 +146,14 @@ class Cell {
className: string; className: string;
constructor(id) { constructor(id) {
this.cellId = id; this.cellId = id;
this.content = this.cellId;
this.font = "Serif"; this.font = "Serif";
this.fontSize = "12"; this.fontSize = "12";
this.fontColor = "black"; this.fontColor = "black";
this.fontWeight = "normal"; this.fontWeight = "normal";
this.fontStyle = "normal"; this.fontStyle = "normal";
this.textDecoration = ""; this.textDecoration = "none";
this.border = ""; this.border = "1";
this.backgroundColor = ""; this.backgroundColor = "";
this.textAlign = "left"; this.textAlign = "left";
this.className = "normal"; this.className = "normal";
@ -111,8 +172,9 @@ class Cell {
tdElement.style.fontStyle = this.fontStyle; tdElement.style.fontStyle = this.fontStyle;
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 = this.content;
tdElement.className = this.className; tdElement.className = this.className;
tdElement.id = this.cellId;
return tdElement; return tdElement;
} }

114
src/script/designerClasses.ts
View File

@ -1,27 +1,77 @@
import {
OrderDetailsFormat,
cellInfoControlPanel
} from "../rescource/typescriptDefinition";
// 控制面板类 // 控制面板类
class ControlPanel { class ControlPanel {
cellId: string; table: any;
cell: any;
constructor(cellId) { instanceOfCells: any;
this.cellId = cellId; constructor(Table, Cell, instanceOfCells) {
this.table = Table;
this.cell = Cell;
this.instanceOfCells = instanceOfCells;
} }
render() {} render() {
update(instanceOfCells) { const initialControlPanelHtmlText =
const cellInfoObject = {}; '<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 = "create-table"> 创建表格 </button></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"><label>内容 </label> <input type="text" name="content"><button id = "update" > 更新 </button></div>';
document.getElementById("designer").innerHTML = initialControlPanelHtmlText;
// this.createTable(this.table, this.cell, this.instanceOfCells);
// this.update(this.instanceOfCells, this.table);
}
createTable(tableInfo, Table, Cell) {
tableInfo.splice(0, tableInfo.length);
const rowElement = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>document.getElementById("totalCol");
const totalCol = Number(colElement.value);
for (var i = 0; i < totalRow; i++) {
const cells = [];
for (var j = 0; j < totalCol; j++) {
var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
const newCell = new Cell(letter + i);
cells.push(newCell);
}
tableInfo.push({ rowId: i, cells: cells });
}
new Table().render(tableInfo);
console.log(tableInfo);
}
update(tableInfo, Table) {
const cellInfoObject: cellInfoControlPanel = {
backgroundColor: "",
border: "",
cellId: "",
color: "",
font: "",
fontColor: "",
fontSize: "",
fontStyle: "",
fontWeight: "",
textAlign: "",
textDecoration: ""
};
const cellInfoElements = document const cellInfoElements = document
.getElementById("cell-info") .getElementById("cell-info")
.getElementsByTagName("input"); .getElementsByTagName("input");
for (let x = 0; x < cellInfoElements.length; x++) { for (let index = 0; index < cellInfoElements.length; index++) {
cellInfoObject[cellInfoElements[x].name] = cellInfoElements[x].value; cellInfoObject[cellInfoElements[index].name] =
cellInfoElements[index].value;
} }
for (const instance of instanceOfCells) { for (const row of tableInfo) {
if (instance.cellId === "A1") { for (const cell of row.cells) {
for (const key in cellInfoObject) { if (cell.cellId === cellInfoObject.cellId) {
instance[key] = cellInfoObject[key]; for (const key in cellInfoObject) {
cell[key] = cellInfoObject[key];
}
} }
console.log(instance);
} }
} }
console.log("hi");
new Table().render(tableInfo);
} }
setFont() {} setFont() {}
@ -102,40 +152,4 @@ banCaiInfoMatches.items = [
new DataResourceItem("${板材备注}", "boardAddOn") new DataResourceItem("${板材备注}", "boardAddOn")
]; ];
// typescript 类型定义
interface OrderDetailsFormat {
[index: string]: string | object;
orderNo: string;
clientName: string;
soldDate: string;
contactName: string;
contactNo: string;
deliveryAddress: string;
addOn: string;
boards: Array<{
[index: string]: number | string | object;
id: number;
material: string;
color: string;
boardInfos: Array<{
houseName: string;
closetName: string;
boardNo: string;
boardName: string;
length: number;
width: number;
thickness: number;
quantity: number;
area: number;
mutation: string;
shape: string;
direction: string;
stripe: string;
boardAddOn: string;
[index: string]: number | string;
}>;
}>;
}
export { ControlPanel }; export { ControlPanel };

66
src/script/main.ts
View File

@ -1,40 +1,38 @@
import {
OrderDetailsFormat,
cellInfoControlPanel
} from "../rescource/typescriptDefinition";
import { Table, Cell } from "./TemplateClasses"; import { Table, Cell } from "./TemplateClasses";
import { ControlPanel } from "./designerClasses"; import { ControlPanel } from "./designerClasses";
const createTable = document.getElementById("submitRowCol"); const tableInfo = [];
const updateCellInfo = document.getElementById("update"); let selectedCelll = "";
const instanceOfCells = [];
createTable.addEventListener( const controlPanel = new ControlPanel(Table, Cell, tableInfo);
"click", const table = new Table();
() => { controlPanel.render();
const rowElement = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>document.getElementById("totalCol");
const totalCol = Number(colElement.value);
for (var i = 0; i < totalRow; i++) { // addEventListener on table tag
for (var j = 0; j < totalCol; j++) { document.getElementById("table").addEventListener("click", () => {
var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); const dropDownElement = document.getElementById("cntnr");
dropDownElement.style.display = "none";
const newCell = new Cell(letter + i); console.log("click");
instanceOfCells.push(newCell); });
} //addEventListener on side menu
} const dropDownElement = document.getElementById("cntnr");
document.getElementById("items").addEventListener("click", () => {
const table = new Table(totalRow, totalCol, instanceOfCells); dropDownElement.style.display = "none";
table.render(instanceOfCells); });
},
false //新建table
); const createTableElement = document.getElementById("create-table");
createTableElement.addEventListener("click", () => {
updateCellInfo.addEventListener("click", () => { controlPanel.createTable(tableInfo, Table, Cell);
const rowElement = <HTMLInputElement>document.getElementById("totalRow"); });
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>document.getElementById("totalCol"); // 更新table
const totalCol = Number(colElement.value);
const instanceOfControlPanel = new ControlPanel("A1"); const updateCellInfo = document.getElementById("update");
instanceOfControlPanel.update(instanceOfCells); updateCellInfo.addEventListener("click", () => {
const table = new Table(totalRow, totalCol, instanceOfCells); controlPanel.update(tableInfo, Table);
table.render(instanceOfCells);
}); });

43
src/style/style.css
View File

@ -25,7 +25,7 @@ input {
padding: 2px; padding: 2px;
} }
tr:hover { td:hover {
background-color: #eee; background-color: #eee;
} }
@ -35,9 +35,7 @@ td:focus {
.highlight { .highlight {
background-color: #ccf; background-color: #ccf;
} }
.normal {
background-color: white;
}
input { input {
width: 30px; width: 30px;
} }
@ -66,3 +64,40 @@ td:first-child {
footer { footer {
font-size: 80%; font-size: 80%;
} }
#items {
list-style: none;
margin: 0px;
margin-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 3px;
font-size: 17px;
color: #333333;
}
hr {
width: 85%;
background-color: #e4e4e4;
border-color: #e4e4e4;
color: #e4e4e4;
}
#cntnr {
display: none;
position: fixed;
border: 1px solid #b2b2b2;
width: 150px;
background: #f9f9f9;
box-shadow: 3px 3px 2px #e9e9e9;
border-radius: 4px;
}
li {
padding: 3px;
padding-left: 10px;
}
#items :hover {
color: white;
background: #284570;
border-radius: 2px;
}