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

功能包括：

动态表格数据，提供更新数据方法
表格头部固定，支持多级表头
左右列可选固定
复选框选择，批量处理
二级列表，可展开收起
宽度可固定，可自适应
排序
合计显示在底部固定行
宽度自适应可设置最小宽度

类名介绍

类名	作用
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"	添加排序
col data-sortconfig="string/function"	添加参数，可为字符串或函数

参数介绍

参数名	默认值（可选值）	作用	类型
fixedLeft	false	左边固定	boolean
fixedRight	false	右边固定	boolean
fixedMinWidth	100	最小宽度	number
fixedMaxWidth	500	最大宽度	number
totalString	'--'	计算列总数	string
totalTitle	'总计'	总数的标题	string
handleSortData	{}	可对相应列执行自定义处理函数，在排序前	json
noWidthColAdaptClient	false	设置自适应宽度列是否根据窗口变小改变而减小（建议设为false）	json

隐藏参数介绍

参数名	作用	类型	可选参数
data-total="true"	开启这一列计算总数功能	boolean
data-sort="true"	开启这一列的排序功能	boolean	up（开启且默认为up排序）,down
data-sortconfig="string或function"	添加参数	string或function

方法

中文名	方法名	举例
更新数据	updateHtml	$('.c-table').eq(0).data('table').updateHtml(html)

注：$('.c-table').eq(0).data('table')为所要更新的表格的实例对象

调用举例

html:
<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>

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

新增handleSortData使用举例

data-sortconfig="¥":参数handleSortData没定义，则替换字符¥为'',
data-sortconfig="sortSize":排序前执行handleSortData.sortSize 处理数据，具体数据格式可输出sortSize函数的data查看

HTML:
<table cellspacing="0" cellpadding="0" border="0" role="c-table-sort">
  <colgroup>
    <col name="" width="130" data-sort="up" data-sortconfig="sortSize">
    <col name="" width="130" data-sort="true" data-sortconfig="¥">
  </colgroup>
  <thead>
    <tr>
      <th class="">
        <div class="cell">
          流量大小
        </div>
      </th>
      <th class="">
        <div class="cell">金额</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">
        <div class="cell">500M</div>
      </td>
      <td class="">
        <div class="cell">¥3.000</div>
      </td>
    </tr>
  </tbody>
</table>

JS:
// 排序表格
$('[role="c-table-sort"]').jqTable({
	handleSortData:{
	  sortSize: sortSize
	}
});
// 排序前对数据进行处理，此处场景是判断流量大小的单位M/G做相应转换
function sortSize(data){
    var result = [];
    var _data, _value;
    for (var i = 0; i < data.length; i++) {
      _data = data[i];
      _value = _data.value;
      _data.value = _value.indexOf('M') !== -1 ? removeUtil(_value, 'M') : _value.indexOf('G') !== -1 ? removeUtil(_value, 'G') * 1024 : _value;
      result.push(_data);
    }
    return result;
  }
  function removeUtil(data,str){
    return data.replace(new RegExp(str,'gi'), '');
  }

例子中用到的JS说明

jqTable js

//分开引入
js/jqTable.js : 主要代码，一定要引入的
js/jqTablePlugins.js : 包含展开收起、复选框的选择的代码（可选择性引入）

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

// 压缩后的代码
js/zipJs/

其他js

js/plugins ： 例子中用到的外来插件
js/json.js ： 例子中用到的json

更新日志

2018-07-03 新增固定列滚动列表，ie8降级兼容（可用，不支持固定列等部分功能）

2018-04-16 优化自适应列的宽度计算方式，默认窗口宽度不够时，列最大宽度为500，窗口缩小，列的最小宽度大于最小宽度，小于最大宽度，正常情况下为原始宽度

2018-04-12 添加排序前对数据的处理（用户可使用自定义函数处理，不影响源数据展示，仅对排序有影响）

2018-01-18 添加多列功能

qiuyaofan / jqTable