jQuery表格插件

所属分类:UI,输入-图表,定制和风格

 105883  469  查看评论 (30)
分享到微信朋友圈
X
jQuery表格插件 ie兼容8

简要教程

表格式网页设计中的一个重要元素,它们能够让用户直观的了解某些数据。在这个demo中使用的表格不是标准的表格html结构,而是使用无序列表来制作表格。这样做的目的是为了使表格具有很好的相应性。


HTML结构

我们使用一个section来作为表格结构。header 中包含的是表格的第一列,没有将header和其它列放在同一个div中的原因是:在手机上header是fixed的。它的父元素将决定它在section中的位置。

<section>
  <header>
    <h2>Features</h2>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>...</li>
    </ul>
  </header>
  
  <div class="cd-table-container">
    <div class="cd-table-wrapper">
  
      <div class="cd-table-column">
        <h2>Plan 1</h2>
        <ul>
          <li>1 GB</li>
          <li>2</li>
          <li>...</li>
        </ul>
      </div> <!-- cd-table-column -->
  
      <div class="cd-table-column">
        <h2>Plan 2</h2>
        <ul>
          <li>2 GB</li>
          <li>5</li>
          <li>...</li>
        </ul>
      </div> <!-- cd-table-column -->
  
    </div> <!-- cd-table-wrapper -->
  </div> <!-- cd-table-container -->
</section>


CSS样式

CSS文件中有一点要指出的是:我们使用2个div来包裹表格列(.cd-table-container 和 .cd-table-wrapper )。为什么需要两个div呢?因为第一个div这里设置它的宽度为90%和一个overflow-x:auto。第二个div的宽度是整个表格的宽度。通过这种方法,我们能让屏幕右边有一些margin,从而在表格宽度大于90%时让表格内容滚动起来。


JAVASCRIPT

在demo中仅使用jQuery来在小屏幕设备上去掉表格右边的小箭头。

jQuery(document).ready(function($){
  var $columns_number = $('#cd-table .cd-table-container').find('.cd-table-column').length;
   
  $('.cd-table-container').on('scroll', function(){ 
    $this = $(this);
    //hide the arrow on scrolling
    if( $this.scrollLeft() > 0 ) {
      $('.cd-scroll-right').hide();
    }
    //remove color gradient when table has scrolled to the end
    var total_table_width = parseInt($('.cd-table-wrapper').css('width').replace('px', '')),
      table_viewport = parseInt($('#cd-table').css('width').replace('px', ''));
       
    if( $this.scrollLeft() >= total_table_width - table_viewport - $columns_number) {
      $('#cd-table').addClass('table-end');
    } else {
      $('#cd-table').removeClass('table-end');
    }
  });
 
  //scroll the table (scroll value equal to column width) when clicking on the .cd-scroll-right arrow
  $('.cd-scroll-right').on('click', function(){
    $this= $(this);
    var column_width = $(this).siblings('.cd-table-container').find('.cd-table-column').eq(0).css('width').replace('px', ''),
      new_left_scroll = parseInt($('.cd-table-container').scrollLeft()) + parseInt(column_width);
     
    $('.cd-table-container').animate( {scrollLeft: new_left_scroll}, 200 );
    $this.hide();
  });
});

相关插件-图表,定制和风格

jQuery表头固定

基于superTables做的改造,可以完美锁定表头和列,已经用于实际项目,还有很多改造的空间
  图表
 41228  456

抖音业绩销量动态排行,加载数据实现动态排名

git上的部分项目改造,根据自己的需求可以自行进行修改。一般用于大屏演示和数据展示
  图表
 14104  137

支持ie8的圆形统计比例图

动态统计,支持ie8以及以上版本的ie浏览器,其他的浏览器
  图表
 53377  421
  图表
 68897  603

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

    wangh723 0
    2023/5/29 9:56:54
    挺好看的,试用一下 回复
    wsh0408 0
    2023/1/30 22:36:42
    英语单词都背了嘛? 0
    2021/6/20 21:10:53
    遥望无星的星空 0
    2021/4/15 20:43:35
    感觉不错,想下载看看 回复
    无尽 夜 0
    2021/2/26 14:57:19
    老的mulline表格组件需要升级,所以想试试。 回复
    Hundred 0
    2018/2/7 23:49:23
    挺好看的,试用一下
    回复
    OldThree 0
    2017/10/16 18:09:46

    没有提供配置信息,header 可以配置成需要展示和不需要展示啊。

    回复
    魏雄 0
    2017/10/14 9:13:57

    功能挺实用,要好好学习一下。

        玄子0
        2021/6/3 10:03:59
        功能挺实用,要好好学习一下。啊啊啊啊啊
    回复
    筱叶儿 0
    2017/8/11 17:33:57

    看着效果不错,不知道能用不

        Object → Not defined0
        2017/10/13 15:22:18

        还不知道  正在准备用

    回复
    Teroun 0
    2017/8/2 14:53:24

    JQ 币去那里混!!!

        外向的孤独患者0
        2020/7/17 14:05:33
        回复评论就能混到
        logan0
        2020/8/19 17:44:17
        牛批
        英语单词都背了嘛?0
        2021/6/20 21:34:19
        牛批
        Sterne0
        2023/4/17 16:42:52
        牛批
        南柯一梦0
        2023/11/27 15:50:53
        牛皮
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复