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

更新引入

Browse Source
This commit is contained in:
Julyp
2020-01-31 17:12:19 +08:00
parent ec05e477bb
commit 7bc2f8818c
6 changed files with 104 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@@ -23,33 +23,32 @@
可直接访问https://peng92055.github.io/smart-table
## Usage
- 加载UI库
- 加载UI库<br>
Download the minified library [smartTable.min.js](https://github.com/peng92055/smart-table/tree/master/dist/smartTable.min.js), and include it in your webpage.
```html
<script type="text/javascript" src="./dist/smartTable.[chunkhash].js"></script>
或者使用七牛云空间的存储
<script type="text/javascript" src="http://q4uv9bkgj.bkt.clouddn.com/smartTable.26faa588.js"></script>
/* smartTable library */
<script type="text/javascript" src="js/smartTable.min.js"></script>
```
- 输出静态HTML 表格基础属性需在服务端返回前指定<br>
**规则：1、必须指定class为smart-table；2、th或td中必须有一层class为cell的div包裹（后期迭代自动处理掉）**
```html
<div class="smart-table" id="smartTable">
<div id="smartTable">
<table stripe>
<thead>
<tr>
<th fixed sort>
<div class="cell">Id</div>
</th>
<th fixed sort>Id</th>
<th colspan="1" rowspan="2" width="200">日期</th>
...
<th fixed>价格</th> <!-- 右边固定列 -->
<tbody>
<tr>
<td>
<div class="cell">DD001</div>
</th>
<td>DD001</td>
<td>2020-01-31</td>
...
<td>889.00</td>
<tr unsort>
<td>
<div class="cell">合计</div>
</th>
<td colspan="2">合计</td>
...
<td>18988.00</td>
```
- 初始化表格
```javascript
@@ -80,13 +79,13 @@
| textAlign | string | no | 表格文本的水平排列方式(left、center、right) | center |
| size | string | no | 每一行的垂直高度风格(large、middle、small) | small |
## 启动项目
## 本地开发
### 启动项目
```
npm run serve
```
## build 流程
### build 流程
```
npm run build
```

2
config/webpack.common.js
View File

@@ -25,7 +25,7 @@ module.exports = {
}, ]
},
output: {
filename: 'smartTable.[chunkhash:8].js',
filename: 'smartTable.min.js',
path: path.resolve(__dirname, '../dist')
},
}

89
dist/index.html vendored
View File

@@ -39,7 +39,7 @@
height: 50px;
}
</style>
<script type="text/javascript" src="smartTable.4c1d3136.js"></script></head>
<script type="text/javascript" src="smartTable.min.js"></script></head>
<body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" rel="noopener noreferrer" class="repo-link">
@@ -61,74 +61,74 @@
<tbody>
<tr>
<td>12</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>1王小虎</td>
<td>1上海</td>
<td>2普陀区</td>
<td>3上海市普陀区金沙江路 1518 弄<img src="//hbimg.huabanimg.com/e3ebdd150746bf9e5ce4c6b057c1e5541c11721b84efd-PN5wmF_fw658" /></td>
<td>2长宁区</td>
<td>3上海市长宁区淞虹路888号<img src="//hbimg.huabanimg.com/e3ebdd150746bf9e5ce4c6b057c1e5541c11721b84efd-PN5wmF_fw658" /></td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr unsort>
<td>15</td>
<td>2016-04-03</td>
<td>2020-04-03</td>
<td>5王小虎</td>
<td>6上海</td>
<td>7普陀区</td>
<td>8上海市普陀区金沙江路 1518 弄</td>
<td>7长宁区</td>
<td>8上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
</tbody>
@@ -157,61 +157,61 @@
<tbody>
<tr>
<td>11</td>
<td>2016-05-02</td>
<td>2020-05-02</td>
<td>王小虎2</td>
<td>上海2</td>
<td>普陀区2</td>
<td>上海市普陀区金沙江路 1518 弄2</td>
<td>长宁区2</td>
<td>上海市长宁区淞虹路888号2</td>
<td>200332</td>
<td><a href="#">查看2</a></td>
</tr>
<tr>
<td>2</td>
<td>2016-05-03</td>
<td>2020-05-03</td>
<td>上小虎3</td>
<td>上海3</td>
<td>普陀区3</td>
<td>上海市普陀区金沙江路 1518 弄3</td>
<td>长宁区3</td>
<td>上海市长宁区淞虹路888号3</td>
<td>200333</td>
<td><a href="#">查看3</a></td>
</tr>
<tr>
<td>13</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>小小虎1</td>
<td>上海1</td>
<td>普陀区1</td>
<td>上海市普陀区金沙江路 1518 弄1</td>
<td>长宁区1</td>
<td>上海市长宁区淞虹路888号1</td>
<td>200331</td>
<td><a href="#">查看1</a></td>
</tr>
<tr>
<td>5</td>
<td>2016-05-04</td>
<td>2020-05-04</td>
<td>王小虎4</td>
<td>上海4</td>
<td>普陀区4</td>
<td>上海市普陀区金沙江路 1518 弄4</td>
<td>长宁区4</td>
<td>上海市长宁区淞虹路888号4</td>
<td>200334</td>
<td><a href="#">查看4</a></td>
</tr>
<tr>
<td>13</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>小小虎1</td>
<td>上海1</td>
<td>普陀区1</td>
<td>上海市普陀区金沙江路 1518 弄1</td>
<td>长宁区1</td>
<td>上海市长宁区淞虹路888号1</td>
<td>200331</td>
<td><a href="#">查看1</a></td>
</tr>
<tr>
<td>5</td>
<td>2016-05-04</td>
<td>2020-05-04</td>
<td>王小虎4</td>
<td>上海4</td>
<td>普陀区4</td>
<td>上海市普陀区金沙江路 1518 弄4</td>
<td>长宁区4</td>
<td>上海市长宁区淞虹路888号4</td>
<td>200334</td>
<td><a href="#">查看4</a></td>
</tr>
@@ -221,9 +221,6 @@
</div>
<script>
new SmartTable({
selector: '#smartTable99'
})
new SmartTable({
selector: '#smartTable1'
})

158
dist/smartTable.4c1d3136.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/smartTable.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

87
public/index.html
View File

@@ -61,74 +61,74 @@
<tbody>
<tr>
<td>12</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>1王小虎</td>
<td>1上海</td>
<td>2普陀区</td>
<td>3上海市普陀区金沙江路 1518 弄<img src="//hbimg.huabanimg.com/e3ebdd150746bf9e5ce4c6b057c1e5541c11721b84efd-PN5wmF_fw658" /></td>
<td>2长宁区</td>
<td>3上海市长宁区淞虹路888号<img src="//hbimg.huabanimg.com/e3ebdd150746bf9e5ce4c6b057c1e5541c11721b84efd-PN5wmF_fw658" /></td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>13</td>
<td>2016-02-03</td>
<td>2020-02-03</td>
<td>2王小虎</td>
<td>3上海</td>
<td>4普陀区</td>
<td>2上海市普陀区金沙江路 1518 弄</td>
<td>4长宁区</td>
<td>2上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr>
<td>14</td>
<td>2016-03-03</td>
<td>2020-03-03</td>
<td>3王小虎</td>
<td>4上海</td>
<td>1普陀区</td>
<td>6上海市普陀区金沙江路 1518 弄</td>
<td>1长宁区</td>
<td>6上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
<tr unsort>
<td>15</td>
<td>2016-04-03</td>
<td>2020-04-03</td>
<td>5王小虎</td>
<td>6上海</td>
<td>7普陀区</td>
<td>8上海市普陀区金沙江路 1518 弄</td>
<td>7长宁区</td>
<td>8上海市长宁区淞虹路888号</td>
<td>200331</td>
</tr>
</tbody>
@@ -157,61 +157,61 @@
<tbody>
<tr>
<td>11</td>
<td>2016-05-02</td>
<td>2020-05-02</td>
<td>王小虎2</td>
<td>上海2</td>
<td>普陀区2</td>
<td>上海市普陀区金沙江路 1518 弄2</td>
<td>长宁区2</td>
<td>上海市长宁区淞虹路888号2</td>
<td>200332</td>
<td><a href="#">查看2</a></td>
</tr>
<tr>
<td>2</td>
<td>2016-05-03</td>
<td>2020-05-03</td>
<td>上小虎3</td>
<td>上海3</td>
<td>普陀区3</td>
<td>上海市普陀区金沙江路 1518 弄3</td>
<td>长宁区3</td>
<td>上海市长宁区淞虹路888号3</td>
<td>200333</td>
<td><a href="#">查看3</a></td>
</tr>
<tr>
<td>13</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>小小虎1</td>
<td>上海1</td>
<td>普陀区1</td>
<td>上海市普陀区金沙江路 1518 弄1</td>
<td>长宁区1</td>
<td>上海市长宁区淞虹路888号1</td>
<td>200331</td>
<td><a href="#">查看1</a></td>
</tr>
<tr>
<td>5</td>
<td>2016-05-04</td>
<td>2020-05-04</td>
<td>王小虎4</td>
<td>上海4</td>
<td>普陀区4</td>
<td>上海市普陀区金沙江路 1518 弄4</td>
<td>长宁区4</td>
<td>上海市长宁区淞虹路888号4</td>
<td>200334</td>
<td><a href="#">查看4</a></td>
</tr>
<tr>
<td>13</td>
<td>2016-01-03</td>
<td>2020-01-03</td>
<td>小小虎1</td>
<td>上海1</td>
<td>普陀区1</td>
<td>上海市普陀区金沙江路 1518 弄1</td>
<td>长宁区1</td>
<td>上海市长宁区淞虹路888号1</td>
<td>200331</td>
<td><a href="#">查看1</a></td>
</tr>
<tr>
<td>5</td>
<td>2016-05-04</td>
<td>2020-05-04</td>
<td>王小虎4</td>
<td>上海4</td>
<td>普陀区4</td>
<td>上海市普陀区金沙江路 1518 弄4</td>
<td>长宁区4</td>
<td>上海市长宁区淞虹路888号4</td>
<td>200334</td>
<td><a href="#">查看4</a></td>
</tr>
@@ -221,9 +221,6 @@
</div>
<script>
new SmartTable({
selector: '#smartTable99'
})
new SmartTable({
selector: '#smartTable1'
})