# jqTable **Repository Path**: mirrors_singod/jqTable ## Basic Information - **Project Name**: jqTable - **Description**: jqTable:一款集所有交互于一身的table组件 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-09-25 - **Last Updated**: 2026-03-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # jqTable:一款集所有交互于一身的table组件 [ 在线例子](https://qiuyaofan.github.io/jqTable/) #### 功能包括: - [x] 动态表格数据,提供更新数据方法 - [x] 表格头部固定,支持多级表头 - [x] 左右列可选固定 - [x] 复选框选择,批量处理 - [x] 二级列表,可展开收起 - [x] 宽度可固定,可自适应 - [x] 排序 - [x] 合计显示在底部固定行 - [x] 宽度自适应可设置最小宽度 #### 类名介绍 |类名|作用| |----|-----| |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:
日期
姓名
省份
市区
地址
邮编
操作
2016-05-03
王小虎
上海
普陀区
上海市普陀区金沙江路 1518 弄
200333
JS: $('[role="c-table"]').jqTable(); ``` 新增handleSortData使用举例 ``` data-sortconfig="¥":参数handleSortData没定义,则替换字符¥为'', data-sortconfig="sortSize":排序前执行handleSortData.sortSize 处理数据,具体数据格式可输出sortSize函数的data查看 HTML:
流量大小
金额
500M
¥3.000
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-04-16 优化自适应列的宽度计算方式,默认窗口宽度不够时,列最大宽度为500,窗口缩小,列的最小宽度大于最小宽度,小于最大宽度,正常情况下为原始宽度 2018-04-12 添加排序前对数据的处理(用户可使用自定义函数处理,不影响源数据展示,仅对排序有影响) 2018-01-18 添加多列功能