html table组件,jqTable：一款集所有交互于一身的table组件

插件描述：交互参考vue element，功能包括动态数据、表格头部固定、支持多级表头、左右列可选固定、复选框选择，批量处理、二级列表，可展开收起、宽度可固定，可自适应、 排序、合计、宽度自适应可设置最小宽度

更新时间：2018/8/15 下午4:34:02

更新说明：修复合计功能bug

更新时间：2018/7/3 下午3:30:45

更新说明：添加支持固定列上鼠标滚轮滚动列表，兼容ie8可用(ie8固定列等部分功能不支持)

更新时间：2018/4/28 下午3:12:01

更新说明：因awesome尺寸过大，故fonts 由awesome换为iconfont，如果原项目使用awesome，可自行替换为awesome，只需修改jqTablePlugin.js的icon类名。具体请看表格2例子

更新时间：2018/4/28 上午10:51:17

更新说明：针对safria兼容优化

更新时间：2018/4/16 下午6:01:20

更新说明：updateHtml优化

更新时间：2018/4/12 下午5:56:35

更新说明：添加排序前处理数据的功能，可设置字符自动匹配替换为空，也可以自定义函数处理，以解决包含单位时排序不准的问题，比如金额添加￥33,999.000。具体可看示例8调用

更新时间：2018/1/18 下午8:12:22

更新说明：添加了固定多列的功能，调用方法如下：$('[role="c-table"]').jqTable({

fixedLeft: 2,

fixedRight: 2

});

如需要不是顺序列固定，则自己改变table html后调用updateHtml

更新时间：2017/11/27 下午5:04:10

更新说明：压缩后的js错误，展开收起没效果，已修复min.js

jqTable

功能包括：动态表格数据，提供更新数据方法

表格头部固定，支持多级表头

左右列可选固定

复选框选择，批量处理

二级列表，可展开收起

宽度可固定，可自适应

排序

合计显示在底部固定行

宽度自适应可设置最小宽度

类名介绍类名作用

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"添加排序

参数介绍参数名默认值(可选值)作用类型

fixedLeftfalse左边固定boolean

fixedRightfalse右边固定boolean

fixedMinWidth100最小宽度number

totalString'--'计算列总数string

totalTitle'总计'总数的标题string

隐藏参数介绍参数名作用类型

data-total="true"开启这一列计算总数功能boolean

data-sort="true"开启这一列的排序功能boolean

调用举例

html:

日期

姓名

省份

市区

地址

邮编

操作

2016-05-03

王小虎

上海

普陀区

上海市普陀区金沙江路 1518 弄

200333

移除

JS:$('[role="c-table"]').jqTable();

例子中用到的JS说明

jqTable js//分开引入

js/jqTable.js : 主要代码，一定要引入的

js/jqTablePlugins.js : 包含展开收起、复选框的选择的代码(可选择性引入)

//总代码

js/jqTable.all.js 主要代码+展开收起、复选框的选择

// 压缩后的代码

js/zipJs/

其他jsjs/plugins ： 例子中用到的外来插件

js/json.js ： 例子中用到的json