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

所属分类:UI-图表

 17095  91  查看评论 (47)
jqTable:一款集所有交互于一身的table组件 ie兼容8

更新时间: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:

<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();

例子中用到的JS说明

jqTable js

//分开引入
js/jqTable.js : 主要代码,一定要引入的
js/jqTablePlugins.js : 包含展开收起、复选框的选择的代码(可选择性引入)
//总代码
js/jqTable.all.js 主要代码+展开收起、复选框的选择
// 压缩后的代码
js/zipJs/

其他js

js/plugins : 例子中用到的外来插件
js/json.js : 例子中用到的json
相关插件-图表
  图表
 34857  248

百度ets动态添加数据

通过点击不同按钮,进行ajax请求对ets进行数据填充.
  图表
 9821  65

layui使用datatableajax请求json渲染数据

基于layui,datatable.js。将datatable扩展成可以使用layui的调用方式调用的插件。当然如果想单独使用的话,将layui扩展去掉即可,可自行百度layui。
  图表
 32175  91

jquery甘特图实例

JQUERY甘特图实例
  图表
 24505  38

讨论这个项目(47)回答他人问题或分享插件使用方法奖励jQ币

    123 0
    2018/10/18 15:20:32
    请问下动态获取数据怎么弄,后台给我的数据为什么渲染不了
    回复
    123 0
    2018/10/18 14:12:40
    请问下报错, appendChild of null 怎么解决 回复
    xuelang_wl 0
    2018/8/31 10:42:59
    就是这么强大,啦啦啦 回复
    jin"凝望 0
    2018/8/7 10:54:26
    合计有个bug,第一行的数据合计不到
        六晓0
        2018/8/14 9:53:50
        项目中还没用到合计,刚验证了,谢谢 我有空更新下
    回复
    jin"凝望 0
    2018/8/6 18:34:09
    1合计那里数据多的时候,不知道为啥会出现很多位小数,2宽度自适应的时候能不能加一个不能超出屏幕的设置呀 3 就是两个table放在tab页里面那个隐藏的tab页的列表不知道怎么才能初始化
        六晓0
        2018/8/14 10:01:09
        1感觉是js计算的浮点数的问题,我想想
        2.没看懂这个,组件可以设置参数fixedMaxWidth,默认是500
        3.隐藏的tab页就判断切过来再初始化,或者初始化前加上tab的show,初始后隐藏回去,这个时间很短看不出来的
    回复
    AngryLittleH5 0
    2018/8/3 14:21:59
    这个可以三级吗
        六晓0
        2018/8/14 9:52:02
        不支持三级
    回复
    希望在转角! 0
    2018/7/23 17:20:20
    在Tab切换中嵌入了两个 表格 ,点击两次以上时表格就失效了,多次点击时页面就卡死了。
        六晓0
        2018/7/24 11:35:34
        觉得是代码问题去github贴上完整代码提issue,只看文字看不出来。我这里回复代码有一部分提交后被去掉了,显示不全
        希望在转角!0
        2018/7/24 15:27:03
        求大神 qq 指导
    回复
    希望在转角! 0
    2018/7/23 17:11:38
    动态创建的时候,样式会错乱,创建多个,请问大神怎么解决
        六晓0
        2018/7/23 17:20:08
        要贴你的调用代码才知道
        希望在转角!0
        2018/7/23 17:21:33
        求大神 qq 望指导一下,拜谢。
        希望在转角!0
        2018/7/23 17:25:50
        <div id="id">
            <span>001<span>
            <span>002<span>
        </div>
        <div> 
            <div class="tableone">
                表格001
            </div>
            <div class="tableone">
                表格002
            </div>
        </div>        	
        $('.tableone').jqTable({
            fixedLeft: 0,
            fixedRight: 0
        });
        希望在转角!0
        2018/7/23 17:27:09
        比如以上切换,第二个内容的表格获取不到,返回第一个的时候第一个表格会被重复实例化。
        六晓1
        2018/7/24 11:27:47

        ```
        你用的不对,组件调用是table上的类或属性,实例绑定在c-table的data上

        <div> 
            <div class="c-table tableOne">
                <table></table>
            </div>
            <div class="c-table tableTwo">
                <table></table>
            </div>
        </div>
        $('[role="c-table"]').jqTable();

        第1个表格实例:$('.tableOne').data('table')
        第2个表格实例:$('.tableTwo').data('table')
        ```

        希望在转角!0
        2018/7/24 14:18:49
        1.当外层div初始化为隐藏时,无法实例化,当div显示时,无横线滚动条和左右侧固定层,只有上下滚动。
        六晓0
        2018/7/25 17:42:24
        jqtable重在计算表格每列宽度,做的一系列计算自适应,估计隐藏时就去初始化没拿到宽度吧,你可以右键看一下是没有div还是没有宽度而已
        希望在转角!0
        2018/7/26 9:57:44
        看来是不行啊,应该增加个销毁的方法
        六晓0
        2018/7/31 11:58:38
        和销毁没关系的,是要求第一次初始化的时候,需要能够计算得到表格的初始宽度,不管你是不是销毁,你再次初始化还是没有宽度,也是一样是不对的
        jin"凝望0
        2018/8/6 14:40:08
        那这种两个table放在tab页里面应该怎么初始化,应为隐藏的那个页面肯定是没有高度的
    回复
    一只喵喵?的奋斗史 0
    2018/7/20 10:43:00
    能不能添加分页插件呢 我用jquery-asPaginator.min.js进行分页的时候会出现_$table未定义。一直没弄好
        六晓1
        2018/7/20 21:44:45
        分页和这个没什么关系吧。我项目的逻辑是:点分页生成table,第一次就初始化jqtable,之后重新动态渲染表格就调用updateTable方法。$table未定义估计是你换了table内容,没更新。原本的table标签被替换删除了,他找不到
    回复
    一只喵喵?的奋斗史 0
    2018/7/13 17:46:16
    非常感谢 正好需要这种表格 start了 回复
取消回复
  短信接口