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

所属分类:UI-图表

jqTable:一款集所有交互于一身的table组件 ie兼容9

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

jQuery数据分析、数据图形、图表插件echarts

数据分析,数据图形,图表,页面中有详细的插件使用方法
  图表
 18417  160

基于JQUERY的WEB在线流程图设计器GOOflow

跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。
  图表
 49905  117

KCharts-基于Kissy的图表组件集

KCharts,kissy,raphael,基于Kissy的图表,数据可视化,js图表组件,KCharts是基于kissy的数据可视化组件,包含折线图、柱状图、饼图、散点图等图表,定制方便,快速上手
  图表
 15928  33

jqgrid

jqgrid:jquery 实用的表格插件
  图表
 27588  62

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

    …… 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

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

    回复
    不想在解释~ 0
    2017/12/20 15:24:32
    可以做到表格内部可输入可下拉可选择时间么,貌似还没有排序吧。
        六晓0
        2017/12/20 23:23:49

        表格的html都是自己加的,你要加什么结构都可以,当然可以加下拉,假设表格里面有要调用插件的,又是动态表格,就需要动态加载完后再调用插件的代码。

        有排序,http://www.jq22.com/yanshi17083请看例子的表格8

    回复
    BabyYang_2048 0
    2017/12/20 14:21:41

    我很喜欢~~对我的实验帮助太大啦

    回复
    喂喂黑加仑 0
    2017/11/29 15:59:17
    可以说是很符合我们项目的需求了~赞! 回复
    Dream 0
    2017/11/29 14:39:25

    相见恨晚,刚做完一个项目,需要类似的插件,继续关注,有GitHub吗?

        六晓0
        2017/11/29 16:34:09

        有 https://github.com/qiuyaofan/jqTable 喜欢的话记得star哦~ 

    回复
取消回复