peng92055/smart-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新readme

Browse Source
This commit is contained in:
Julyp
2020-01-28 14:20:55 +08:00
parent 1fc0b3c097
commit 5274f94d14
2 changed files with 22 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@@ -40,18 +40,20 @@ npm run build
```
使用
```
new SmartUI.Table({
selector: '#smartTable1',
tableHeight: 300
})
new SmartUI.Table({
selector: '#smartTable2',
tableHeight: function () {
return 300
}
})
new SmartUI.Table({
selector: '#smartTable3'
window.addEventListener('load', function () {
new SmartUI.Table({
selector: '#smartTable1',
tableHeight: 300
})
new SmartUI.Table({
selector: '#smartTable2',
tableHeight: function () {
return 300
}
})
new SmartUI.Table({
selector: '#smartTable3'
})
})
```
API Demo

242
public/index.html
View File

@@ -11,25 +11,25 @@
body {
padding: 10px 20px;
}
.repo-link {
font-size: 16px;
color: #409eff;
text-decoration: none;
margin-right: 15px;
}
.smart-table a {
color: #409eff;
}
.title {
text-align: center;
padding: 10px 0;
color: #4acccc;
margin: 0;
}
.smart-table {
margin: 20px 0px;
}
@@ -37,8 +37,7 @@
</head>
<body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank"
rel="noopener noreferrer" class="repo-link">
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub</a></h1>
<div class="container">
<div class="api-wrap">
@@ -64,7 +63,7 @@
<th colspan="1" rowspan="2" width="200" fixed>
<div class="cell">日期</div>
</th>
<th colspan="1" rowspan="2" width="60" sort>
<th colspan="1" rowspan="2" width="80" sort>
<div class="cell">姓名</div>
</th>
<th colspan="1" width="200" rowspan="1">
@@ -269,106 +268,6 @@
</tbody>
</table>
</div>
<div class="smart-table" id="smartTable11">
<table stripe>
<thead>
<tr>
<th colspan="1" rowspan="3" fixed sort>
<div class="cell">Id</div>
</th>
<th colspan="1" rowspan="2" width="200" fixed>
<div class="cell">日期</div>
</th>
<th colspan="1" rowspan="2" width="60" sort>
<div class="cell">姓名</div>
</th>
<th colspan="1" width="200" rowspan="1">
<div class="cell">省份</div>
</th>
<th colspan="1" rowspan="1" sort>
<div class="cell">市区</div>
</th>
<th colspan="1" rowspan="1">
<div class="cell">地址</div>
</th>
<th colspan="1" rowspan="1" fixed>
<div class="cell">邮编</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cell">12</div>
</td>
<td>
<div class="cell">2016-01-03</div>
</td>
<td>
<div class="cell">1王小虎</div>
</td>
<td>
<div class="cell">1上海</div>
</td>
<td>
<div class="cell">2普陀区</div>
</td>
<td>
<div class="cell">3上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">13</div>
</td>
<td>
<div class="cell">2016-02-03</div>
</td>
<td>
<div class="cell">2王小虎</div>
</td>
<td>
<div class="cell">3上海</div>
</td>
<td>
<div class="cell">4普陀区</div>
</td>
<td>
<div class="cell">2上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">14</div>
</td>
<td>
<div class="cell">2016-03-03</div>
</td>
<td>
<div class="cell">3王小虎</div>
</td>
<td>
<div class="cell">4上海</div>
</td>
<td>
<div class="cell">1普陀区</div>
</td>
<td>
<div class="cell">6上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- smart table example start -->
<div class="smart-table" id="smartTable2">
<table>
@@ -802,139 +701,17 @@
</tbody>
</table>
</div>
<div class="smart-table" id="smartTable4">
<table>
<thead>
<tr>
<th colspan="1" rowspan="3" fixed sort>
<div class="cell">Id</div>
</th>
<th colspan="2" rowspan="1">
<div class="cell">详细</div>
</th>
<th colspan="4" rowspan="1">
<div class="cell">配送信息</div>
</th>
</tr>
<tr>
<th colspan="1" rowspan="2" sort>
<div class="cell">日期</div>
</th>
<th colspan="1" rowspan="2">
<div class="cell">姓名</div>
</th>
<th colspan="4" rowspan="1">
<div class="cell">地址</div>
</th>
</tr>
<tr>
<th colspan="1" rowspan="1">
<div class="cell">省份</div>
</th>
<th colspan="1" rowspan="1" sort>
<div class="cell">市区</div>
</th>
<th colspan="1" rowspan="1">
<div class="cell">地址</div>
</th>
<th colspan="1" rowspan="1" sort>
<div class="cell">邮编</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
<div class="cell">12</div>
</td>
<td rowspan="2">
<div class="cell">2016-01-03</div>
</td>
<td>
<div class="cell">1王小虎</div>
</td>
<td>
<div class="cell">1上海</div>
</td>
<td>
<div class="cell">2普陀区</div>
</td>
<td>
<div class="cell">3上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">2016-02-03</div>
</td>
<td>
<div class="cell">3上海</div>
</td>
<td>
<div class="cell">4普陀区</div>
</td>
<td>
<div class="cell">2上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">14</div>
</td>
<td>
<div class="cell">2016-03-03</div>
</td>
<td>
<div class="cell">3王小虎</div>
</td>
<td>
<div class="cell">4上海</div>
</td>
<td>
<div class="cell">1普陀区</div>
</td>
<td>
<div class="cell">6上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr unsort>
<td colspan="5">
<div class="cell">合计</div>
</td>
<td>
<div class="cell">888888</div>
</td>
<td>
<div class="cell">999999</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
window.addEventListener('load', function () {
window.addEventListener('load', function() {
new SmartUI.Table({
selector: '#smartTable1',
tableHeight: function () {
tableHeight: function() {
return 300
},
})
new SmartUI.Table({
selector: '#smartTable11'
})
new SmartUI.Table({
selector: '#smartTable2',
tableHeight: 300,
@@ -946,9 +723,6 @@
textAlign: 'right',
size: 'large'
})
new SmartUI.Table({
selector: '#smartTable4'
})
})
</script>