UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

所属分类：UI-图表

 64225  464  查看评论 (72)
分享到微信朋友圈
X
jqTable：一款集所有交互于一身的table组件 ie兼容8
 查看演示  website  立即下载

更新时间：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
相关插件-图表
查看更多

轻量级图形报表插件JSCharts

 JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。
  图表
 46430  364

原生js饼图、环形图、环形渐变（原创）

 自己开发中使用ets无法实现饼图环形图颜色环形渐变，且目前并未发现有其他插件可以实现，故手写一个，供大家使用，请根据自己实际情况自行修改，欢迎交流。
  图表
 19227  226

JS饼状图效果

 基于highcharts.js实现的饼状图效果，报表
  图表
 49002  373

jquery 表行列固定

 支持表格行列固定和排序兼容所有浏览器
  图表
 64380  497

讨论这个项目（72）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    strongerpian 0
    2023/12/6 9:00:45
    如何给表格动态增加一列呢？给colgroup和每个tr后append一个节点，页面没有生效😥 回复
    吃着辣条唱情歌 0
    2020/2/18 17:19:00

    在td中添加一个select，使用bootstrap自带得开启搜索效果，不显示搜索功能啊？？？ 大佬怎么回事呢这是

    <select name="examine" id="examine" class="form-control selectpicker" data-live-search="true">
    <option value="0">全部审核</option>
    <option value="1">审核中</option>
    <option value="2">审核未通过</option>
    <option value="3">审核通过</option>
</select>
        六晓0
        2020/3/25 23:15:02
        应该是动态加载，bootstrap在加载前调用，找不到这个元素吧，或者加载后的不是原本的元素
    回复
    ┵ 障 呦 " 0
    2019/11/13 9:44:15
    当浏览器放大到110%，最右边的固定行位置错位了，怎么解决那？
        J0
        2023/1/5 11:05:55
        要这么玩，没有几个网页能没有问题的
    回复
    我的青春有点250 0
    2019/10/10 11:49:55
    高度不可以自适应 回复
    唐春燕 0
    2019/8/14 16:07:06
    当有多级表头的时候 你这个排序就会出现问题
        六晓0
        2019/12/1 18:04:02
        多级不支持排序
    回复
    丶Smile ❤ 0
    2019/5/8 11:21:09
    请问这个可以多级吗？
        六晓1
        2019/5/22 22:40:27
        目前只有两级，不支持多级
    回复
    skyshiny 0
    2019/5/5 16:03:16
    请问一个td里可以显示两行文本吗？
        六晓1
        2019/5/22 22:42:53

        可以，你直接在td里加div就行,类似这样

        <td class="">
    <div class="cell">
        <div>普陀区</div>
        <div>普陀区22</div>
    </div>
</td>
    回复
    szGodfery 0
    2019/1/8 13:58:57
    表格8 排序例子中,,当屏幕缩小时,会出现错位.
        szGodfery0
        2019/1/8 16:14:13
        另外,在ie浏览器中,测试会出现堆栈溢出
        六晓0
        2019/3/2 18:13:54
        用ie11试了在线例子 暂没发现问题
    回复
    勇敢无畏的人类啊 0
    2018/12/29 11:34:02
    你好，请问有表格加载完毕后的回调函数吗，我项目数据比较多加载很慢，所以想要做一个loadding，加载完毕后再隐藏掉。 回复
    szGodfery 0
    2018/12/24 9:28:59
    六晓：
    我想咨询一下,表格分页功能是否可以添加上去.
        szGodfery0
        2018/12/24 9:46:39
        已经弄好了,看到demo中有更新数据的方法
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复