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

所属分类:UI-图表

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

更新时间: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
相关插件-图表

基于echarts双y轴折线图实时更新

双y轴折线图阴影图渐变效果混合实时更新
  图表
 7257  20

JS饼状图效果

基于highcharts.js实现的饼状图效果,报表
  图表
 20681  85

Table表单数据处理插件DataTables

table表单数据处理,可以对数据进行排序,筛选,查找
  图表
 30971  108

canvas绘制心电图

Canvas绘制心电图
  图表
 12622  38

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

    一只喵喵?的奋斗史 0
    2018/7/20 10:43:00
    能不能添加分页插件呢 我用jquery-asPaginator.min.js进行分页的时候会出现_$table未定义。一直没弄好 回复
    一只喵喵?的奋斗史 0
    2018/7/13 17:46:16
    非常感谢 正好需要这种表格 start了 回复
    锁、清秋 0
    2018/5/17 15:04:40
    有没有例子中引用的js文件下载地址
        六晓0
        2018/5/21 10:33:24
        不知道你具体要哪个,https://github.com/qiuyaofan/jqTable/tree/master/js,整个包下载去找就可以,都放在js里
    回复
    Software 0
    2018/4/9 17:00:41
    我们想实现“无刷新”效果刷新数据,updateHtml会导致滚动条位置归0,如何能实现“无刷新”效果刷新数据?

    谢谢!
        六晓0
        2018/4/9 20:58:32
        没有办法的 任何一种修改html的都会滚动,因为要先清除原本的html,但是如果是全部更新,回到头部没什么问题,因为数据是最新的,如果不想就需要存储滚动位置,更新后js滚动。如果只是append 新的html,目前没兼容这种。
    回复
    Software 0
    2018/4/9 11:59:03

    六晓:
          您好!
          我在您的“固定多列”demo中给给两个单元格增加了id,增加了button设置这两个单元格值。
         为什么固定列的单元格显示的值不变(但alert显示修改成功了),非固定列的单元格的值可以改变?
          谢谢!
    固定多列

    <!--此处增加button-->
    <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table1" data-height="200">
        <thead>
            <tr>
                <th colspan="1" rowspan="1" class="">
                    日期
                </th>
                <th colspan="1" rowspan="1" class="">
                    姓名
                </th>
                <th colspan="1" rowspan="1" class="">
                    省份
                </th>
                <th colspan="1" rowspan="1" class="">
                    市区
                </th>
                <th colspan="1" rowspan="1" class="">
                    地址
                </th>
                <th colspan="1" rowspan="1" class="">
                    邮编
                </th>
                <th colspan="1" rowspan="1" class="">
                    操作
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="c-table__row">
                <td class="">
                    2016-05-03
                    <!--此处增加id:ud-->
                </td>
                <td class="">
                    王小虎
                </td>
                <td class="">
                    上海
                    <!--此处增加id:up-->
        六晓0
        2018/4/9 20:59:39
        没看懂
    回复
    辉仔 0
    2018/3/26 14:01:09
    有数组数据生成表格就完美了
        六晓1
        2018/3/28 22:03:21
        数组数据?你自己遍历生成html就好了 这样灵活性才高
    回复
    ??小男人 0
    2018/2/1 16:02:20

    还是有问题,动态编写的table 在col 里属性中设置width的值是无效的 , 强制不换行隐藏 还需要加一个 鼠标移动到那一单元时候显示完整数据,    另外需要增加列可拖动,不然 有一单元字符很长,会造成行错位, 对不上号,   如果再增加分页功能就跟好了

        六晓1
        2018/2/5 20:39:15

        动态编写的width无效我有空看看。

        鼠标移动到那一单元时候显示完整数据从结构来说很麻烦,建议自己配合使用tooltip或title显示

        以前做过虚拟表格有列可拖动,实际上你的宽度设置的好,不太需要可拖动,因为你一刷新数据就没有了,也就是你要保存还要存localstge逻辑自己想想,我是不建议加。

        分页组件的话,其实是两个组件。虽然可以放一起展示,会考虑

    回复
    …… 0
    2018/1/11 11:33:19

    好像也不支持新增

        六晓0
        2018/1/14 16:59:11

        新增数据?要增加后处理完table updateHtml

    回复
    …… 0
    2018/1/11 10:09:03

    功能可以,如果能控制固定列的数量就完美了,现在需要固定多列

    回复
    停下浮躁的心 0
    2018/1/9 14:35:37

    能不能固定列时控制数量?

        六晓0
        2018/1/9 18:29:52

        你是说固定多列吧?还没加这个功能,一直没时间

    回复
取消回复