表格1:左右固定,高度限制,宽度全部固定
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
固定多列
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎测试测试测试测试宽度
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎dvgdfsdfdsfdfdfdfdsf
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格2:动态表格,有二级,可展开收起(icon替换为iconfont,可自行选择修改为圆形加减号或方形,或保持箭头,可打开fonts/iconfont/demo_fontclass.html查看)
表格3:强制不换行,当位置不够显示时,超出500(最大宽度,设置参数为fixedMaxWidth:500)的列宽度设为500,超出隐藏
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格4:只有右边固定
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格5:条纹
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格6:宽度部分(例子是地址,邮箱)自适应,自适应宽度最小默认为100
日期
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格7:两级表头,表头不限级数
日期
|
姓名
|
地址
|
邮编
|
操作
|
||
---|---|---|---|---|---|---|
省份
|
市区
|
地址
|
||||
2016-05-03
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-02
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-04
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-01
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-08
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-06
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
2016-05-07
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
表格8:排序
日期
|
流量大小
|
金额
|
单价
|
库存
|
售出
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
500M
|
¥3.000
|
11
|
200
|
300
|
|
2016-05-02
|
20M
|
¥10.000
|
500
|
1004
|
200333
|
|
2016-05-04
|
50M
|
¥66.000
|
2233
|
9900
|
200333
|
|
2016-05-01
|
20M
|
¥30.000
|
455
|
4545
|
200333
|
|
2016-05-08
|
10G
|
¥888.000
|
345
|
7655
|
200333
|
|
2016-05-06
|
2G
|
¥12.000
|
656
|
3676
|
200333
|
|
2016-05-07
|
10M
|
¥8.000
|
346
|
9332
|
200333
|
|
表格9:合计
日期
|
数量
|
金额
|
单价
|
库存
|
售出
|
操作
|
---|---|---|---|---|---|---|
2016-05-03
|
wwee
|
24566
|
0.1
|
200
|
300
|
|
2016-05-02
|
rrrr
|
345345435
|
0.1
|
1004
|
200333
|
|
2016-05-04
|
trete
|
3234325
|
2233
|
9900
|
200333
|
|
2016-05-01
|
erwer
|
167688
|
455
|
4545
|
200333
|
|
2016-05-08
|
erewr
|
456584
|
345
|
7655
|
200333
|
|
2016-05-06
|
qqwwe
|
9678657
|
656
|
3676
|
200333
|
|
2016-05-07
|
iuuuu
|
785
|
346
|
9332
|
200333
|
|
表格10:左侧复选框
|
姓名
|
省份
|
市区
|
地址
|
邮编
|
操作
|
---|---|---|---|---|---|---|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
|
王小虎
|
上海
|
普陀区
|
上海市普陀区金沙江路 1518 弄
|
200333
|
|
类名 | 作用 |
---|---|
c-table-border | 添加边框 |
c-table--noWrap | 不换行 |
c-table--striped | 斑马线表格 |
g-selectAll--main | 复选框选择父元素 |
input type="checkbox" class="g-selectAll" | 复选框选择全部 |
input type="checkbox" class="g-selectAll--input" | 复选框选择单个 |
class="g-selectAll--btn" data-tag="select" | 复选框按钮,点击在回调中获取选中值的具体信息json |
g-toggleTable--main | 展开收起父元素 |
tr.g-toggleTable--title>th i.g-toggleTable--buttonAll | 操作头-全部切换部分 |
tr.g-toggleTable--title>th i.g-toggleTable--button | 操作头-单个切换部分 |
col data-total="true" | 计算总数 |
col data-sort="true" | 添加排序 |
参数名 | 默认值(可选值) | 作用 | 类型 |
---|---|---|---|
fixedLeft | false | 左边固定 | boolean |
fixedRight | false | 右边固定 | boolean |
fixedMinWidth | 100 | 最小宽度 | number |
totalString | '--' | 计算列总数 | string |
totalTitle | '总计' | 总数的标题 | string |
js调用
$('[role="c-table"]').jqTable(); // 一侧固定 $('[role="c-table2"]').jqTable({ fixedRight: true }); // 固定多列 $('[role="c-table1"]').jqTable({ fixedLeft: 2, fixedRight: 2 }); // 两侧固定 $('[role="c-table"]').jqTable({ fixedLeft: true, fixedRight: true }); // 统计 $('[role="c-table3"]').jqTable({ totalString: '--', totalTitle: '总计' });
<div class="c-table c-table--noWrap"> <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table"> <colgroup> <col name="" width="150"> <col name="" width="120"> <col name="" width="120"> <col name="" width="120"> <col name="" width=""> <col name="" width=""> <col name="" width="140"> </colgroup> <thead> <tr> <th class=""> <div class="cell">日期</div> </th> <th class=""> <div class="cell">姓名</div> </th> <th class=""> <div class="cell">省份</div> </th> <th class=""> <div class="cell">市区</div> </th> <th class=""> <div class="cell">地址</div> </th> <th class=""> <div class="cell">邮编</div> </th> <th class=""> <div class="cell">操作</div> </th> </tr> </thead> <tbody> <tr> <td class=""> <div class="cell">2016-05-03</div> </td> <td class=""> <div class="cell">王小虎</div> </td> <td class=""> <div class="cell">上海</div> </td> <td class=""> <div class="cell">普陀区</div> </td> <td class=""> <div class="cell">上海市普陀区金沙江路 1518 弄</div> </td> <td class=""> <div class="cell">200333</div> </td> <td class=""> <div class="cell"> <button type="button" class="c-button">移除</button> </div> </td> </tr> </tbody> </table> </div>