jQuery响应式表格插件ReStable

所属分类:UI-图表

 33039  316  查看评论 (1)
分享到微信朋友圈
X
jQuery响应式表格插件ReStable ie兼容11

使用方法

在页面中引入jquery/jquery.restable.min.jsjquery.restable.min.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery.restable.min.css" />
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.restable.min.js"></script>

 HTML结构

该表格采用基本的HTML表格结构:

<table class="mytable">
    <thead>
        <tr>
            <td>Period</td>
            <td>Full Board</td>
            <td>Half Board</td>
            <td>Bed and Breakfast</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01/10/12 - 02/10/12</td>
            <td>20 ?lt;/td>
            <td>30 ?lt;/td>
            <td>40 ?lt;/td>
        </tr>
        <tr>
            <td>03/10/12 - 04/10/12</td>
           <td>40 ?lt;/td>
            <td>50 ?lt;/td>
            <td>60 ?lt;/td>
        </tr>
        <tr>
            <td>05/10/12 - 06/10/12</td>
            <td>70 ?lt;/td>
            <td>80 ?lt;/td>
            <td>90 ?lt;/td>
        </tr>
    </tbody>
</table>

 初始化插件

在页面DOM元素加载完毕之后,可以通过ReStable()方法来初始化该响应式表格插件。

$(document).ready(function () {
    $('.mytable').ReStable();
});

上面的方法将页面中所有的表格都进行初始化。你也可以单独对某个表格进行初始化。

$(document).ready(function () {
    $('.mytable').ReStable();
});

 配置参数

该响应式表格插件的可用参数如下:

$('.mytable').ReStable({
    rowHeaders: true, 
    maxWidth: 480, 
    keepHtml: false
});
  • rowHeaders:是否显示表格头。

  • maxWidth:响应式断点。

  • keepHtml:是否保持每个单元格的HTML内容。

相关插件-图表

JS饼状图效果

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

动态实时折线图

根据时间和数据而动态的折线图
  图表
 75188  513

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 17171  207

动态数据表格插件ZBTable(原创)

能够根据后台传来的JSON数据动态创建的基本功能的JQuery表格插件
  图表
 29110  299

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

    橘里7 0
    2018/6/26 14:03:56
    请问为什么这个插件在手机端显示不了呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复