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({ window.addEventListener('load', function () {
selector: '#smartTable1', new SmartUI.Table({
tableHeight: 300 selector: '#smartTable1',
}) tableHeight: 300
new SmartUI.Table({ })
selector: '#smartTable2', new SmartUI.Table({
tableHeight: function () { selector: '#smartTable2',
return 300 tableHeight: function () {
} return 300
}) }
new SmartUI.Table({ })
selector: '#smartTable3' new SmartUI.Table({
selector: '#smartTable3'
})
}) })
``` ```
API Demo API Demo

242
public/index.html
View File

@@ -11,25 +11,25 @@
body { body {
padding: 10px 20px; padding: 10px 20px;
} }
.repo-link { .repo-link {
font-size: 16px; font-size: 16px;
color: #409eff; color: #409eff;
text-decoration: none; text-decoration: none;
margin-right: 15px; margin-right: 15px;
} }
.smart-table a { .smart-table a {
color: #409eff; color: #409eff;
} }
.title { .title {
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
color: #4acccc; color: #4acccc;
margin: 0; margin: 0;
} }
.smart-table { .smart-table {
margin: 20px 0px; margin: 20px 0px;
} }
@@ -37,8 +37,7 @@
</head> </head>
<body> <body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" <h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" rel="noopener noreferrer" class="repo-link">
rel="noopener noreferrer" class="repo-link">
GitHub</a></h1> GitHub</a></h1>
<div class="container"> <div class="container">
<div class="api-wrap"> <div class="api-wrap">
@@ -64,7 +63,7 @@
<th colspan="1" rowspan="2" width="200" fixed> <th colspan="1" rowspan="2" width="200" fixed>
<div class="cell">日期</div> <div class="cell">日期</div>
</th> </th>
<th colspan="1" rowspan="2" width="60" sort> <th colspan="1" rowspan="2" width="80" sort>
<div class="cell">姓名</div> <div class="cell">姓名</div>
</th> </th>
<th colspan="1" width="200" rowspan="1"> <th colspan="1" width="200" rowspan="1">
@@ -269,106 +268,6 @@
</tbody> </tbody>
</table> </table>
</div> </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 --> <!-- smart table example start -->
<div class="smart-table" id="smartTable2"> <div class="smart-table" id="smartTable2">
<table> <table>
@@ -802,139 +701,17 @@
</tbody> </tbody>
</table> </table>
</div> </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>
</div> </div>
<script> <script>
window.addEventListener('load', function () { window.addEventListener('load', function() {
new SmartUI.Table({ new SmartUI.Table({
selector: '#smartTable1', selector: '#smartTable1',
tableHeight: function () { tableHeight: function() {
return 300 return 300
}, },
}) })
new SmartUI.Table({
selector: '#smartTable11'
})
new SmartUI.Table({ new SmartUI.Table({
selector: '#smartTable2', selector: '#smartTable2',
tableHeight: 300, tableHeight: 300,
@@ -946,9 +723,6 @@
textAlign: 'right', textAlign: 'right',
size: 'large' size: 'large'
}) })
new SmartUI.Table({
selector: '#smartTable4'
})
}) })
</script> </script>