当前位置: 首页 > 工具软件 > FooTable > 使用案例 >

强大的JQuery表格控件FooTable

佟英武
2023-12-01

FooTable 是一个 jQuery 插件,让table在移动设备上表现更好,主要的目的是将 HTML 的表格变成支持各种尺寸的设备,特别是在小屏幕设备上显示也是很棒的效果。而不需担心该表格拥有太多的列。FooTable是一个很强大的表格组件。Github:https://github.com/bradvin/FooTable#readme
开源中国:http://www.oschina.net/p/footable
查看所有演示请下载压缩包,或者到插件官网查看

 

一个footable的主要目标是使得它完全可通过数据属性。我们希望你能看看HTML标记和确切知道footable要功能。这个标记例如一看

<table class="footable" data-filter="#filter" data-page-size="5"> <thead> <tr> <th data-toggle="true"> First Name </th> <th data-sort-ignore="true"> Last Name </th> <th data-hide="phone,tablet"> Job Title </th> <th data-hide="phone,tablet" data-name="Date Of Birth"> DOB </th> <th data-hide="phone"> Status </th> </tr> </thead>

footable作品“断点”的概念,这是不同的表格宽度,我们关心的。默认的断点:

breakpoints: {
  phone: 480,
  tablet: 1024
}


创建一个简单的表:

<table class="footable">
  <thead>
    <tr>
      <th>Name</th> <th data-hide="phone,tablet">Phone</th> <th data-hide="phone,tablet">Email</th> </tr> </thead> <tbody> <tr> <td>Bob Builder</td> <td>555-12345</td> <td>bob@home.com</td> </tr> <tr> <td>Bridget Jones</td> <td>544-776655</td> <td>bjones@mysite.com</td> </tr> <tr> <td>Tom Cruise</td> <td>555-99911</td> <td>cruise1@crazy.com</td> </tr> </tbody> </table>

引用footable核心的CSS:
<link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />


[可选] include footable主题CSS:

您可以使用我们的一个默认的主题,如果你想的话:
<link href="path_to_your_css/footable.metro.css" rel="stylesheet" type="text/css" />

引用 jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


引用 FooTable jQuery Plugin:

<script src="path_to_your_js/footable.js" type="text/javascript"></script>

创建一个FooTable:

<script type="text/javascript">
$(function () {   $('.footable').footable();  }); </script>


可扩展的

footable的另一个目标是使它很容易扩展。如果你的代码你会看到里面的插件,插件框架所以额外的插件可以连接包括一个JavaScript文件

我们也不想footable膨胀所以你只能用你需要的东西,离开了一切

工作的附加组件

排序

过滤

分页

条带

其他附加的想法到目前为止

条件格式

JSON装载

选择器

素材吧推荐下载

 类似资料: