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

first commit

Browse Source
This commit is contained in:
郑茂强 2018-10-15 15:21:18 +08:00
commit a60faa1cbd
9 changed files with 5506 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

31
index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="../src/style/style.css" />
<head>
<meta charset="utf-8">
<title>webpack demo</title>
</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>
<button id='submitRowCol'>创建表格</button>
<div id='cellInfo'>
</div>
</div>
</div>
</body>
</html>

5217
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "excel-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"ts-loader": "^5.2.1",
"typescript": "^3.1.3"
}
}

103
src/script/classes.ts Normal file
View File

@ -0,0 +1,103 @@
class Table {
rowLength: number;
columnLength: number;
selectedRow: string;
selectedCell: string;
constructor(rowLength: number, columnLength: number) {
this.rowLength = rowLength;
this.columnLength = columnLength;
this.selectedRow;
this.selectedCell;
}
render(cell) {
// clear children elements
var myNode = document.getElementById("table");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
// loop through rowlength and collentgh
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 = new cell(letter + i);
const newCell = row.insertCell(-1);
newCell.addEventListener("click", () => {
console.log(instanceOfCell);
this.showCellDetails(instanceOfCell);
});
i && j
? ((newCell.colSpan = cell.colspan), (newCell.innerHTML = letter + i))
: (newCell.innerHTML = i.toString() || letter);
}
}
}
showCellDetails(instanceOfCell) {
var cellInfoElement = document.getElementById("cellInfo");
while (cellInfoElement.firstChild) {
cellInfoElement.removeChild(cellInfoElement.firstChild);
}
const cellUlElement = document.createElement("ul");
for (const key in instanceOfCell) {
if (instanceOfCell.hasOwnProperty(key)) {
const cellLiElement = document.createElement("li");
const cellLableElement = document.createElement("label");
const cellInputElement = document.createElement("input");
cellInputElement.setAttribute("id", instanceOfCell.cellId);
const cellButtonElement = document.createElement("button");
cellButtonElement.innerHTML = "确定";
// cellButtonElement.onclick = function() {
// const test: HTMLTableElement = <HTMLTableElement>(
// document.getElementById(instanceOfCell.cellId)
// );
// instanceOfCell[key] = test.value;
// console.log(instanceOfCell);
// };
cellLableElement.innerHTML = key;
cellInputElement.setAttribute("value", instanceOfCell[key]);
cellLiElement.appendChild(cellLableElement);
cellLiElement.appendChild(cellInputElement);
cellLiElement.appendChild(cellButtonElement);
cellUlElement.appendChild(cellLiElement);
}
}
cellInfoElement.appendChild(cellUlElement);
}
changeCellDetails(instanceOfCell) {}
}
class Cell {
cellId: string;
border: number;
color: string;
width: number;
colspan: number;
constructor(id) {
this.cellId = id;
this.border = 1;
this.color = "grey";
this.width = 80;
this.colspan = 1;
}
setColor(newColor: string) {
this.color = newColor;
}
setBorder(newBorder: number) {
this.border = newBorder;
}
setWidth(newWidth: number) {
this.width = newWidth;
}
}
export { Table, Cell };

16
src/script/main.ts Normal file
View File

@ -0,0 +1,16 @@
import { Table, Cell } from "./classes";
const submit = document.getElementById("submitRowCol");
submit.addEventListener(
"click",
function initialTable() {
const rowElement = <HTMLInputElement>document.getElementById("totalRow");
const totalRow = Number(rowElement.value);
const colElement = <HTMLInputElement>document.getElementById("totalCol");
const totalCol = Number(colElement.value);
const table = new Table(totalRow, totalCol);
table.render(Cell);
},
false
);

58
src/style/style.css Normal file
View File

@ -0,0 +1,58 @@
#app {
display: flex;
}
#table {
width: 80%;
}
.sidebar {
width: 20%;
height: 100vh;
background-color: lightgray;
}
li {
list-style: none;
}
li:before {
content: "✓ ";
}
input {
border: none;
width: 80px;
font-size: 14px;
padding: 2px;
}
td:hover {
background-color: #eee;
}
td:focus {
background-color: #ccf;
}
input:not(:focus) {
text-align: right;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
padding: 0;
}
tr:first-child td,
td:first-child {
background-color: #ccc;
padding: 1px 3px;
font-weight: bold;
text-align: center;
}
footer {
font-size: 80%;
}

5
tsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"compilerOptions": {
"sourceMap": true
}
}

31
webpack.config.js Normal file
View File

@ -0,0 +1,31 @@
var path = require("path")
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
entry:{
main:'./src/script/main.ts',
},
output:{
filename:'js/[name].js',
path: path.resolve(__dirname, './dist'),
// publicPath:'http://www.qq.com'
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" }
]
},
plugins:[
new htmlWebpackPlugin(
{ filename:'index.html',
template:'index.html',
}
)
]
}