JQUERY源码 作者： - 2016年8月19日
1个投票
没有评论

表格-基于jQuery UI的实用表格插件Tabulator

Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。它的特点还有：

  • 可以加载JSON，数组或AJAX数据。
  • 支持表格列排序。
  • 表格单元格可编辑。
  • 可以添加和删除表格行。
  • 可以自定义数据格式。
  • 可以对表格数据进行过滤。
  • 表格列可以用鼠标拖拽拉伸或缩小。
  • 自动缩放来匹配数据/元素。
  • 支持多种可选的表格主题。
  • 自定义点击和上下文事件。
  • 丰富的回调函数。

使用方法

使用该Jquery UI表格插件需要引入jQuery、jQuery UI相关文件和tabulator.js文件。

<link rel="stylesheet" href="js/jquery-ui-11.4/jquery-ui.theme.min.css">
<script type="text/javascript" src="js//jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/tabulator.js"></script>               
HTML结构

可以使用一个空的<div>作为Tabulator表格的容器。

<div id="example-table"><div>         
初始化插件

在页面DOM元素初加载完毕之后可以通过tabulator()方法来初始化表格。

$("#example-table").tabulator();             
定义表格头

可以通过在初始化的时候在columns参数中传入一个数组或JSON对象来定义表格的表格头。

$("#example-table").tabulator({
    columns:[
        {title:"Name", field:"name", sortable:true, sorter:"string", width:200, editable:true},
        {title:"Age", field:"age", sortable:true, sorter:"number", align:"right", formatter:"progress"},
        {title:"Gender", field:"gender", sortable:true, sorter:"string", onClick:function(e, val, cell, row){console.log("cell click")},},
        {title:"Height", field:"height", sortable:true, formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
        {title:"Date Of Birth", field:"dob", sortable:true, sorter:"date", align:"center"},
        {title:"Cheese Preference", field:"cheese", sortable:true, sorter:"boolean", align:"center", formatter:"tickCross"},
    ],
});               

可以传入表格列中的参数有：

  • title：必选参数。显示在表格列的标题。
  • field：必选参数（在图标/按钮列非必选项）。该列数据数组的key值。
  • align：设置表格列的对齐方式。（left|center|right）
  • width：设置表格列的宽度。（如果不设置系统会自动设置）
  • sortable：用户是否可以对表格列进行排序。
  • sorter：用于决定列排序的方式。（参看下面的表格排序介绍）
  • formatter：设置数据的格式。（参看下面的表格数据格式介绍）
  • onClick：当用户点击了列中的某个单元格时的回调函数。
  • editable：决定表格数据是否可编辑，布尔值，默认为false。

设置表格数据

Tabulator的行数据使用一组对象来定义，也可以使用AJAX从URL中传入一个数组或JSON格式的字符串来定义。

可以使用columns参数来定义多个表格列，它会对数据进行排序，但不会立刻渲染到屏幕中。

每一行的数据必须有一个唯一的ID标识符，如果没有，Tabluator会自动为你添加一个。

下面是一个使用JSON数据的例子：

[
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]               
使用数组设置数据

你可以使用setData直接传入一个数组来作为表格的数据。

$("#example-table").tabulator("setData",[
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]);               
使用AJAX设置数据

如果你的数据来自于远程服务器，可以在setData中传入URL地址，插件会使用AJAX的方式来处理请求。URL可以是相对地址也可以是绝对地址。

$("#example-table").tabulator("setData","http://www.getmydata.com/now");               

JSON格式数据必须是格式化数组对象。

如果你的数据都是通过URL获取的，你可以在初始化的时候通过ajaxURL参数来设置URL地址。

$("#example-table").tabulator({
    ajaxURL:"http://www.getmydata.com/now",
});               

然后可以通过setData在任何时候刷新表格数据。

$("#example-table").tabulator("setData");               

数据排序

默认情况下所有的表格列都可以对列进行排序。你可以通过sortable参数来设置列是否可以排序。

$("#example-table").tabulator({
    sortable:false, // boolean值 (默认为true)
});
// 你可以对单一的行使用sortable参数
{title:"Name", field:"name", sortable:true, sorter:"string"}               
排序类型

默认情况下数据按字符串进行排序。如果你希望使用不同的排序方式，可以在列数据中使用sorter参数来进行设置。

Tabulator预定义了一些数据排序方式，它们是：

  • string：按字符串的字母对列进行排序。
  • number：按数值的大小对列进行排序。（可以是整数或浮点数，也可以处理使用,分割的数字）。
  • alphanum：按alpha numeric code对列进行排序。
  • boolean：按布尔值对列进行排序。
  • date：按日期对列进行排序（使用这种排序方式你必须在创建表格时使用dateFormat来设置日期格式，默认的日期格式为：dd/mm/yyyy）。
{title:"Name", field:"name", sortable:true, sorter:function(a, b){
    // a 和 b是两个要进行比较的值
    // 返回值大于0时a大于b，返回值等于0时它们相等，返回值小于0时a小于b
    return a - b;
  },
}               
表格加载后的排序

在数据加载到表格中的时候可以设置按某个指定列来进行排序。可以通过参数sortBy或sortDir来完成这个操作。

格式化数据

Tabulator允许你对表格数据进行自由的格式化。

你可以在每一列上使用formatter参数来设置该列的数据格式。

{title:"Name", field:"name", formatter:"tick"}               

Tabulator包括下面一些预定义的数据格式。

  • money：将数值格式为货币格式，例如：1234567.8901 -> 1,234,567.89。
  • email：将数据作为锚链接使用mailto链接到一个邮件地址上。
  • link：将数据作为锚链接链接到指定的地址上。
  • tick：如果值为：true|’true’|’True’|1，则显示一个绿色的小勾，否则什么都不显示。
  • tickCross：如果值为：true|’true’|’True’|1，则显示一个绿色的小勾，否则显示一个红色的小叉。
  • star：显示0-5颗星级评分。
  • progress：在单元格值从左到右显示一个进度条，值为宽度的0-100%。
{title:"Name", field:"name", formatter:function(value, data, cell, row, options){
    //value - 单元格的值
    //data - 单元格所在的列的数据
    //cell - 单元格的DOM元素
    //row - 行的DOM元素
    //options - 参数
    //must return the html or jquery element of the html for the contents of the cell;
    return "<div></div>";
  },
}               
icon/按钮列

你可以在列数据值传入field来设置icon/按钮列，并为列内容自定义格式。下面的例子在每一列的开头行显示一个打印机图标。

//custom formatter definition
var printIcon = function(value, data, cell, row, options){ //plain text value
            return "<i class='fa fa-print'></i>"
};
//column definition in the columns array
{formatter:printIcon, width:40, align:"center", onClick:function(e, cell, val, row){alert("打印行数据: " + row.name)}},               

数据过滤

Tabulator允许你对任何字段进行过滤。

你可以通过setFilter方法来调用设置过滤器。在方法中传入你需要过滤的字段，比较类型和值。

$("#example-table").tabulator("setFilter", "age", ">", 10);               

Tabulator内置了一些可用的过滤类型。

  • =：只有当行的内容和过滤内个相等时才显示。
  • <：只有当值小于过滤值时才显示。
  • >=：只有当值大于或等于过滤值时才显示。
  • >：只有当值大于过滤值时才显示。
  • <=：只有当值小于等于过滤值时才显示。
  • ！=：只有当值不等于过滤值时才显示。
  • like：当在指定的字段中包含指定的值时句显示这些行。

默认情况下，tabulator会假设你使用=来作为过滤器。你也可以使用下面的简写方式：

$("#example-table").tabulator("setFilter", "name", "bob");               

你每次只能调用一个过滤器，第二次调用会覆盖前面的过滤器。

获取当前的过滤器

可以使用getFilter方法来获取当前表格中使用的过滤器。

$("#example-table").tabulator("getFilter");               

如果没有设置过滤器，则会返回false。否则会返回一个包含过滤器信息的对象。

{
    "field":"age",
    "type":">",
    "value":10,
}               
清除过滤器

你可以通过clearFilter方法来清除过滤器。

$("#example-table").tabulator("clearFilter");               

你也可以通过设置不带值的setFilter方法来清除过滤器。

$("#example-table").tabulator("setFilter");               

管理数据

可以通过editable参数来设置表格是否可以进行编辑。当用户点击了一个可以编辑的表格列，他将可以修改单元格中的内容（只有文本内容可以被编辑）。

添加表格行

你可以在任何时候使用addRow方法来添加表格行。

$("#example-table").tabulator("addRow", {name:"Billy Bob", age:"12", gender:"male", height:1});               

如果你没有为一个列传入数据，将产生一个空列。要制作一个空行，可以在方法中插入一个空的对象。

默认情况下，新行会被添加到表格的最后面，可以通过addRowPos参数设置为top来在表格第一行前插入新行。

删除表格行

你可以使用deleteRow来删除一个表格行。

$("#example-table").tabulator("deleteRow", 15);               

你也可以在参数中插入要删除的行的ID或代表行的数据对象来删除行。

检索数据

你可以使用getData方法来检索存储在表格中的数据。

var data = $("#example-table").tabulator("getData");              

该方法返回包含表格中每一行的数据对象的数组。

数据布局

Tabulator有两种不同的布局样式。

  • 数据适配（默认）。
  • 容器适配。
数据适配(Fit Columns to data)

这是表格的默认布局方式，它会将列扩展到内完全放置内容的宽度，这将使得表格的实际宽度大于容器的宽度，此时会有一个滚动条出现。

容器适配(Fit columns to container)

这种布局会调整列的宽度使整个表格包含在容器中。

如果任何列中指定了宽度，那么这个列会根据这个宽度来设置，其它列则根据这个列来进行自动调整。如果没有足够的空间来容纳所有的列，则会忽略所有已经设置的表格列宽度。

要使用这种布局可以将fitColumns参数设置为true。

$("#example-table").tabulator({
    fitColumns:true, // this option takes a boolean value (default = false)
});               
可调整宽度的列

默认情况下可以通过拖动表格头的边框来改变列的宽度。要禁用这个选项可以在创建表格的时候设置colResizable为false。

$("#example-table").tabulator({
    colResizable:false, // this option takes a boolean value (default = true)
});               
最小宽度列度

可以通过设置最小列宽来防止拖动列的宽度小于这个宽度。可以通过在创建表格的时候通过colMinWidth参数来设置最小宽度值。

$("#example-table").tabulator({
    colMinWidth:80, //Minimum column width in px (default = 40)
});               
重绘表格

如果包含在Tabulator表格中的元素的尺寸改变了，有必要重绘表格以确保每一列都匹配新的坐标。可以通过redraw方法来重绘表格。

$(window).resize(function(){
    $("#example-table").tabulator("redraw");
});               

配置参数

排序初始化数据参数
参数 数据类型 默认值 描述
sortBy string “id” 要排序的字段的名称
sortDir string “DESC” 升序或降序排列（ASC 或 DESC）
添加行配置参数
参数 数据类型 默认值 描述
addRowPos string “bottom” 在什么位置添加一个新行，”top”或”bottom”
表格主题配置参数
参数 数据类型 默认值 描述
backgroundColor string #888 背景颜色，任何有效的css颜色值
borderColor string #999 边框的颜色，任何有效的css颜色值
textSize int/string 14 表格中的字体大小
headerBackgroundColor string #e6e6e6 表格头单元格的背景色，任何有效的css颜色值
headerTextColor string #555 表格头的字体颜色，任何有效的css颜色值
headerBorderColor string #aaa 表格头的边框颜色，任何有效的css颜色值
headerSeperatorColor string #999 表格头的底部边框颜色，任何有效的css颜色值
headerMargin int/string 4 表格头单元格的margin值，单位像素
sortArrows object 包含2种主题的排序小箭头的对象
rowBackgroundColor string #fff 表格行的背景色，任何有效的css颜色值
rowBorderColor string #fff 表格行边框的颜色，任何有效的css颜色值
rowTextColor string #333 表格行文本的颜色，任何有效的css颜色值
rowHoverBackground string #bbb 鼠标滑过时表格单元行的颜色，任何有效的css颜色值

排序箭头的主题

参数 数据类型 默认值 描述
active string #666 当前排序列的排序箭头
inactive string #bbb 未排序列的排序箭头
表格尺寸配置参数
参数 数据类型 默认值 描述
height string/int false 设置容器元素的高度，如果设置为false，则自动匹配表格元素的高度。
Data Loaders

在表格数据加载的时候，会显示一个lopading遮罩层，它包含一个模态背景和一个加载指示器。加载指示器可以通过参数进行设置，它必须是一个display:inline-block样式的div元素。

参数 数据类型 默认值 描述
showLoader boolean true 数据加载时是否显示指示器
loader string html（参考下面） 指示器的HTML元素
loaderError string html（参考下面） 加载出错时的HTML元素

默认的loader元素：

<div style='display:inline-block; border:4px solid #333;
     border-radius:10px; background:#fff; font-weight:bold;
     font-size:16px; color:#000; padding:10px 20px;'>Loading Data</div>               

默认的loader error元素：

<div style='display:inline-block; border:4px solid #D00;
     border-radius:10px; background:#fff; font-weight:bold;
     font-size:16px; color:#590000; padding:10px 20px;'>Loading Error</div>               

回调函数

点击单元格的回调函数

在用户鼠标左键点击单元格时的回调函数，可以在列数据中通过onClick为每一列设置回调函数。

{title:"Name", field:"name", onClick:function(e, cell, value, data){
        //e - the click event object
        //cell - the DOM element of the cell
        //value - the value of the cell
        //data - the data for the row the cell is in
    },
}               
添加表格行的回调函数
$("#example-table").tabulator({
    rowAdded:function(data){
        //data - the data for the row
    },
});               
编辑表格行的回调函数
$("#example-table").tabulator({
    rowEdit:function(id, data, row){
        //id - the id of the row
        //data - the data for the row
        //row - the DOM element of the row
    },
});               
删除表格行的回调函数
$("#example-table").tabulator({
    rowDelete:function(id){
        //id - the id of the row
    },
});               
表格行右键菜单的回调函数
$("#example-table").tabulator({
    rowContext:function(e, id, data, row){
        //e - the click event object
        //id - the id of the row
        //data - the data for the row
        //row - the DOM element of the row
    },
});               
数据加载完毕的回调函数
$("#example-table").tabulator({
    dataLoaded:function(data){
        //data - the data for the row
    },
});               

事件

事件 描述
dataLoading 数据被完全加载
dataLoadError 数据加载出错
renderStarted 表格开始渲染
renderComplete 表格渲染结束
sortStarted 开始排序
sortComplete 排序结束

Tabulator表格插件的github地址：https://github.com/olifolkerd/tabulator

在线预览 网盘下载

郑重声明：

				
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

				
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

				
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

				
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
作者： 蓝文
查看更多
标签:, ,
关注公众号“蓝文资源库”获取更多好资源
表格-基于jQuery UI的实用表格插件Tabulator 5 out of 5 based on 1 ratings. 1 user reviews.

相关文章

PHP案例 2020年2月26日

Pixie Image Editor在线图片编辑器-无水印破解版JS源码下载

Pixie是完全可定制的，高性…

阅读更多
JQUERY源码 2019年6月20日

JQUERY插件-RollDate炫酷手机移动端日期选择器JQUERY插件下载

RollDate是一个多格式、…

阅读更多
JQUERY源码 2019年6月20日

JQUERY插件-Filerobot图片编辑器JS插件JQUERY插件下载

FileRobot是一个JS图…

阅读更多

发表评论