制表器目前是一个自4.0以来的纯JavaScript插件。
Tabulator是一个功能丰富的jQuery/JavaScript插件,用于从任何JSON数据生成简单或复杂的数据表,具有以下附加功能:
1.使用包管理器进行安装。
# Yarn $ yarn add tabulator-tables # NPM $ npm i tabulator-tables
2.导入表格库和可选样式表,如下所示:
<!-- Core --> <link href="dist/css/tabulator.min.css" rel="stylesheet"> <script src="dist/js/tabulator.min.js"></script> <!-- jQuery Wrapper Optional --> <script src="dist/js/jquery_wrapper.min.js"></script>
// OR As An ES Module
mport {TabulatorFull as Tabulator} from 'tabulator-tables';
@import "~/tabulator-tables/dist/css/tabulator.min.css"; // OR Use ESM Import
import {Tabulator} from 'https://unpkg.com/[email protected]/dist/js/tabulator_esm.min.js';3.创建一个容器来放置生成的表。
<div id="myTable"></div>
4.在数组中定义表格数据。
var myData = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
5.根据您提供的数据生成一个基本数据表。
var table = new Tabulator("#myTable", {
data: myData,
columns:[
{title:"Name", field:"name", maxWidth:200},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height", maxWidth:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Likes Cheese", field:"cheese"},
{title:"Example", field:"example", formatter:"image", formatterParams:{urlPrefix:"http://website.com/images/"}}
]
// configuration options here
});
6.将多级上下文菜单附加到表中。
var table = new Tabulator("#myTable", {
rowContextMenu: [{
label: "Hide Column",
action: function (e, column) {
column.hide();
}
},
{
label: "Sub Menu" //sub menu
menu: [{
label: "Do Something"
action: function (e, column) {
//do something
}
},
{
label: "Do Something Else"
action: function (e, column) {
//do something else
}
},
{
label: "Deeper Sub Menu" //sub menu nested in sub menu
menu: [{
label: "Do Another Thing"
action: function (e, column) {
//do another thing
}
}, ]
}
]
}
]
});
7.所有可能的配置选项。
var table = new Tabulator("#myTable", {
// height of tabulator
height: false,
// minimum height of tabulator
minHeight: false,
// maximum height of tabulator
maxHeight: false,
// "fitColumns" | "fitData" | "fitDataTable"
layout: "fitData",
// update column widths on setData
layoutColumnsOnNewData: false,
// minimum global width for a column
columnMinWidth: 40,
// minimum global width for a column
columnMaxWidth: false,
// vertical alignment of column headers
columnHeaderVertAlign: "top",
// resizable columns
resizableColumns: true,
// resizable rows
resizableRows: false,
// auto resize table
autoResize: true,
// column header here
columns: [],
// horizontal alignment
cellHozAlign: "",
// vertical alignment
cellVertAlign: "",
// tabular data here
data: [],
// auto-build columns from data row structure
autoColumns: false,
// enable data reactivity
reactiveData: false,
// seperatpr for nested data
nestedFieldSeparator: ".",
// enable tooltips
tooltips: false,
// enable tooltips on headers
tooltipsHeader: false,
// when to generate tooltips
tooltipGenerationMode: "load",
// initial sorting criteria
initialSort: false,
// initial filtering criteria
initialFilter: false,
// initial header filtering criteria
initialHeaderFilter: false,
// multiple or single column sorting
columnHeaderSortMulti: true,
// reverse internal sort ordering
sortOrderReverse: false,
// set default global header sort
headerSort: true,
// set default tristate header sorting
headerSortTristate: false,
// hold footer element
footerElement: false,
// filed for row index
index: "id",
// array for keybindings
keybindings: [],
// create new row when tab to end of table
tabEndNewRow: false,
// allow toggling of invalid option warnings
invalidOptionWarnings: true,
// enable clipboard
clipboard: false,
// formatted table data
clipboardCopyStyled: true,
// clipboard config
clipboardCopyConfig: {
columnHeaders:false, //do not include column headers in clipboard output
columnGroups:false, //do not include column groups in column headers for printed table
rowGroups:false, //do not include row groups in clipboard output
columnCalcs:false, //do not include column calculation rows in clipboard output
dataTree:false, //do not include data tree in printed table
formatCells:false, //show raw cell values without formatter
},
// restrict clipboard to visible rows only
clipboardCopyRowRange: "active",
// convert pasted clipboard data to rows
clipboardPasteParser: "table",
// how to insert pasted data into the table
clipboardPasteAction: "insert",
// data has been copied to the clipboard
clipboardCopied: function clipboardCopied() {},
// data has been pasted into the table
clipboardPasted: function clipboardPasted() {},
// data has not successfully been pasted into the table
clipboardPasteError: function clipboardPasteError() {},
// function to manipulate table data before it is downloaded
downloadDataFormatter: false,
// function to manipulate download data
downloadReady: function downloadReady(data, blob) {
return blob;
},
// function to manipulate download data
downloadComplete: false,
// download configs
downloadConfig: {
columnHeaders:false, //do not include column headers in downloaded table
columnGroups:false, //do not include column groups in column headers for downloaded table
rowGroups:false, //do not include row groups in downloaded table
columnCalcs:false, //do not include column calcs in downloaded table
dataTree:false, //do not include data tree in downloaded table
},
// restrict download to active rows only
downloadRowRange: "active",
// enable data tree
dataTree: false,
dataTreeElementColumn: false,
// show data tree branch element
dataTreeBranchElement: true,
//data tree child indent in px
dataTreeChildIndent: 9,
//data tree column field to look for child rows
dataTreeChildField: "_children",
// data tree row collapse element
dataTreeCollapseElement: false,
// data tree row expand element
dataTreeExpandElement: false,
// data tree start expand element
dataTreeStartExpanded: false,
// row has been expanded
dataTreeRowExpanded: function dataTreeRowExpanded() {},
// row has been collapsed
dataTreeRowCollapsed: function dataTreeRowCollapsed() {},
// include visible data tree rows in column calculations
dataTreeChildColumnCalcs: false,
// seleccting a parent row selects its children
dataTreeSelectPropagate: false,
// enable print as html
printAsHtml: false,
// print formatter
printFormatter: false,
// page header
printHeader: false,
// page footer
printFooter: false,
// enable styles while priting
printStyled: true, //enable print as html styling
// restrict print to visible rows only
printRowRange: "visible",
// print configs
printConfig: {
columnHeaders:false, //do not include column headers in printed table
columnGroups:false, //do not include column groups in column headers for printed table
rowGroups:false, //do not include row groups in printed table
columnCalcs:false, //do not include column calcs in printed table
dataTree:false, //do not include data tree in printed table
formatCells:false, //show raw cell values without formatter
},
// or 'top'
addRowPos: "bottom",
// highlight rows on hover
selectable: "highlight",
// highlight rows on hover
selectableRangeMode: "drag",
// roll selection once maximum number of selectable rows is reached
selectableRollingSelection: true,
// maintain selection when table view is updated
selectablePersistence: true,
// check wheather row is selectable
selectableCheck: function selectableCheck(data, row) {
return true;
},
// delay before updating column after user types in header filter
headerFilterLiveFilterDelay: 300,
// placeholder text to display in header filters
headerFilterPlaceholder: false,
// hide header
headerVisible: true,
// enable edit history
history: false,
// current system language
locale: false,
langs: {
"en":{
"pagination":{
"all":"All",
}
},
},
// enable virtual DOM
virtualDom: true,
// set virtual DOM buffer size
virtualDomBuffer: 0,
// key for persistent storage
persistenceID: "",
// mode for storing persistence information
persistenceMode: true,
// function for handling persistence data reading
persistenceReaderFunc: false,
// function for handling persistence data writing
persistenceWriterFunc: false,
// enable persistence
persistence: false,
// enable responsive layout
responsiveLayout: false,
// show collapsed data on start
responsiveLayoutCollapseStartOpen: true,
// collapse formatter
responsiveLayoutCollapseUseFormatters: true,
// responsive layout collapse formatter
responsiveLayoutCollapseFormatter: false,
// set pagination type: "remote", or "local"
pagination: false,
// number of rows per page
paginationSize: false,
// initial page on page load
paginationInitialPage: 1,
// set count of page button
paginationButtonCount: 5,
// add pagination size selector element
paginationSizeSelector: false,
// element to hold pagination numbers
paginationElement: false,
// pagination data sent to the server
paginationDataSent: {},
// pagination data received from the server
paginationDataReceived: {},
// add rows on table or page
paginationAddRow: "page",
// url for ajax loading
ajaxURL: false,
// called with the scope of the table so you can now access the parent table on the this variable
ajaxURLGenerator: function(url, config, params){},
// params for ajax loading
ajaxParams: {},
// ajax request type
ajaxConfig: "get",
// ajax request type
ajaxContentType: "form",
// promise function
ajaxRequestFunc: false,
// show loader
ajaxLoader: true,
// loader element
ajaxLoaderLoading: false,
// loader element
ajaxLoaderError: false,
ajaxFiltering: false,
ajaxSorting: false,
// progressive loading
ajaxProgressiveLoad: false,
// delay between requests
ajaxProgressiveLoadDelay: 0,
// margin before scroll begins
ajaxProgressiveLoadScrollMargin: 0,
// enable table grouping and set field to group by
groupBy: false,
// starting state of group
groupStartOpen: true,
groupValues: false,
// header generation function
groupHeader: false,
groupHeaderPrint: null,
groupHeaderClipboard: null,
groupHeaderHtmlOutput: null,
groupHeaderDownload: null,
// html output configs
htmlOutputConfig: false,
// enable movable columns
movableColumns: false,
// enable movable rows
movableRows: false,
// tables for movable rows to be connected to
movableRowsConnectedTables: false,
// other elements for movable rows to be connected to
movableRowsConnectedElements: false,
movableRowsSender: false,
movableRowsReceiver: "insert",
movableRowsSendingStart: function movableRowsSendingStart() {},
movableRowsSent: function movableRowsSent() {},
movableRowsSentFailed: function movableRowsSentFailed() {},
movableRowsSendingStop: function movableRowsSendingStop() {},
movableRowsReceivingStart: function movableRowsReceivingStart() {},
movableRowsReceived: function movableRowsReceived() {},
movableRowsReceivedFailed: function movableRowsReceivedFailed() {},
movableRowsReceivingStop: function movableRowsReceivingStop() {},
movableRowsElementDrop: function movableRowsElementDrop() {},
scrollToRowPosition: "top",
scrollToRowIfVisible: true,
scrollToColumnPosition: "left",
scrollToColumnIfVisible: true,
rowFormatter: false,
rowFormatterPrint: null,
rowFormatterClipboard: null,
rowFormatterHtmlOutput: null,
placeholder: false,
// table building callbacks
tableBuilding: function tableBuilding() {},
tableBuilt: function tableBuilt() {},
// render callbacks
renderStarted: function renderStarted() {},
renderComplete: function renderComplete() {},
// row callbacks
rowClick: false,
rowDblClick: false,
rowContext: false,
rowTap: false,
rowDblTap: false,
rowTapHold: false,
rowMouseEnter: false,
rowMouseLeave: false,
rowMouseOver: false,
rowMouseOut: false,
rowMouseMove: false,
rowContextMenu: false,
rowAdded: function rowAdded() {},
rowDeleted: function rowDeleted() {},
rowMoved: function rowMoved() {},
rowUpdated: function rowUpdated() {},
rowSelectionChanged: function rowSelectionChanged() {},
rowSelected: function rowSelected() {},
rowDeselected: function rowDeselected() {},
rowResized: function rowResized() {},
// cell callbacks
// row callbacks
cellClick: false,
cellDblClick: false,
cellContext: false,
cellTap: false,
cellDblTap: false,
cellTapHold: false,
cellMouseEnter: false,
cellMouseLeave: false,
cellMouseOver: false,
cellMouseOut: false,
cellMouseMove: false,
cellEditing: function cellEditing() {},
cellEdited: function cellEdited() {},
cellEditCancelled: function cellEditCancelled() {},
// column callbacks
columnMoved: false,
columnResized: function columnResized() {},
columnTitleChanged: function columnTitleChanged() {},
columnVisibilityChanged: function columnVisibilityChanged() {},
// HTML import callbacks
htmlImporting: function htmlImporting() {},
htmlImported: function htmlImported() {},
// data callbacks
dataLoading: function dataLoading() {},
dataLoaded: function dataLoaded() {},
dataEdited: function dataEdited() {},
// ajax callbacks
ajaxRequesting: function ajaxRequesting() {},
ajaxResponse: false,
ajaxError: function ajaxError() {},
// filtering callbacks
dataFiltering: false,
dataFiltered: false,
// sorting callbacks
dataSorting: function dataSorting() {},
dataSorted: function dataSorted() {},
// grouping callbacks
groupToggleElement: "arrow",
groupClosedShowCalcs: false,
dataGrouping: function dataGrouping() {},
dataGrouped: false,
groupVisibilityChanged: function groupVisibilityChanged() {},
groupClick: false,
groupDblClick: false,
groupContext: false,
groupContextMenu: false,
groupTap: false,
groupDblTap: false,
groupTapHold: false,
columnCalcs: true,
// pagination callbacks
pageLoaded: function pageLoaded() {},
// localization callbacks
localized: function localized() {},
// validation callbacks
validationMode: "blocking",
validationFailed: function validationFailed() {},
// history callbacks
historyUndo: function historyUndo() {},
historyRedo: function historyRedo() {},
// scroll callbacks
scrollHorizontal: function scrollHorizontal() {},
scrollVertical: function scrollVertical() {}
});7.API方法。
// replace data
table.replaceData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}])
table.replaceData("data.php")
table.replaceData() // reload
table.replaceData(tableData)
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});
// update data
table.updateData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]);
table.updateData([{id:1, name:"bob"}])
.then(function(){
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
// add data
table.addData([{id:6, name:"bob", gender:"male"}, {id:7, name:"Jenny", gender:"female"}], true, 3); //add new data above existing row with index of 3
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true)
.then(function(rows){
//rows - array of the row components for the rows updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
// update or add data
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}]);
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}])
.then(function(rows){
//rows - array of the row components for the rows updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
// clear data
table.clearData();
// get data
table.getData();
table.getData("active");
table.getDataCount();
table.getDataCount("active");
row.getData();
table.getRows();
able.getRows("active");
// add row
table.addRow({name:"Billy Bob", age:"12", gender:"male", height:1}, true)
.then(function(row){
// ...
})
.catch(function(error){
...
});
// update row
table.updateRow(1, {id:1, name:"bob", gender:"male"});
row.update({"name":"steve"})
.then(function(){
// ...
})
.catch(function(error){
// ...
});
// update or add row
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"});
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"})
.then(function(){
// ...
})
.catch(function(error){
// ...
});
// get row element
table.getRow(1);
row.getElement();
// delete row
table.deleteRow(15);
table.deleteRow([15,7, 9]);
row.delete();
table.deleteRow(15)
.then(function(){
// ...
})
.catch(function(error){
// ...
});
row.delete()
.then(function(){
// ...
})
.catch(function(error){
// ...
});
// set order
table.setSort("age", "asc");
table.setSort([
{column:"age", dir:"asc"}, //sort by this first
{column:"height", dir:"desc"}, //then sort by this second
]);
// get sorters
table.getSorters();
// clear all sorters
table.clearSort();
// table validation
table.validate();
row.validate();
column.validate();
cell.validate();
// get invalid cells
table.getInvalidCells();
// check if is valid
cell.isValid();
// clear cell validation
cell.clearValidation();
table.clearCellValidation();
table.clearCellValidation([cell1, cell2]);
// set filter
table.setFilter("age", ">", 10);
table.setFilter("name", "like", "teve");
table.setFilter("age", "in", ["steve", "bob", "jim"]);
table.setFilter("age", "regex", /[a-z]/);
table.setFilter(customFilter, {height:3});
table.setFilter([
{field:"age", type:">", value:52}, //filter by age greater than 52
[
{field:"height", type:"<", value:142}, //with a height of less than 142
{field:"name", type:"=", value:"steve"}, //or a name of steve
]
]);
// add filter
table.addFilter("age", ">", 22);
// remove filter
table.removeFilter("age", ">", 22);
// get filters
table.getFilters();
// refresh current filter
table.refreshFilters();
// clear history
table.clearHistory();
// get header filters
table.getHeaderFilters();
// clear all filters
table.clearFilter();
table.clearFilter(true);
table.clearHeaderFilter();
// set header filter value
table.setHeaderFilterValue("name", "Steve");
// get header filter value
table.getHeaderFilterValue("name");
table.getHeaderFilterValue();
// focus On Header Filter
table.setHeaderFilterFocus("name");
// search data
table.searchRows("age", ">", 12);
table.searchData("age", ">", 12);
// get row position
table.getRowPosition(row, true);
table.getRowFromPosition(5, true)
// retrieve data as HTML Table
table.getHtml();
table.getHtml("visible", true, {columnGroups:false});
// recalculate all column calculations
table.recalc();
// get calculation results
table.getCalcResults();
1.在html页面中加载必要的jQuery和Tabulator库。
<link href="dist/css/tabulator.min.css" rel="stylesheet"> <script src="dist/js/tabulator.min.js"></script>
2.只需在jQuery库之后加载jQuery Tabulator包装器,我们就可以开始了。
<script src="jquery_wrapper.min.js"></script>
3.根据初始化期间指定的JSON数据,在容器“demo”中生成一个简单的数据表。
$("#demo").tabulator({
data:[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
],
columns:[
{title:"Name", field:"name", maxWidth:200},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height", maxWidth:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Likes Cheese", field:"cheese"},
{title:"Example", field:"example", formatter:"image", formatterParams:{urlPrefix:"http://website.com/images/"}}
]
});
版本5.4.4(2023-02-20)
v5.4.3 (2022-12-05)
第4.2版(2022-10-17)
第4.1版(2022-10-09)
第五版.4.0(2022-10-04)
v5.3.4版本(2022-09-08)
v3.3版本(2022-09-05)
v5.3.2 (2022-08-22)
v5.3.1 (2022-07-25)
v5.3 (2022-07-08)
v.2.7版本(2022-06-05)
v.2.6版本(2022-05-31)
v.2.5版本(2022-05-27)
版本5.2.4(2022-05-08)
v5.2.3 (2022-05-02)
v5.2版本(2022-04-23)
版本5.2(2022-04-21)
v.2.0版本(2022-04-21)
版本5.1.8(2022-04-03)
版本5.1.7(2022-03-11)
版本5.1.6(2022-03-10)
版本5.1.5(2022-03-09)
版本1.4(2022-03-07)
版本5.1(2022-02-28)
第1.2版(2022-02-20)
v5.1.1 (2022-02-20)
v.1.0版本(2022-01-31)
v5.0.10 (2021-12-30)
v5.0.9 (2021-12-30)
v5.0.8 (2021-12-20)
v5.0.7 (2021-11-01)
v5.0.6 (2021-10-26)
v5.0.5 (2021-10-25)
v5.0.4 (2021-10-22)
v5.0.3 (2021-10-21)
v5.0.2 (2021-10-20)
v5.0.1 (2021-10-19)
v5.0.0 (2021-10-18)
版本4.9.3(2020-12-23)
版本4.9.2(2020-12-22)
版本4.9.1(2020-12-14)
版本4.9.0(2020-11-23)
第4.8.4版(2020-10-30)
第4.8.3版(2020-10-26年)
第4.8.2版(2020-09-27)
第4.8.1版(2020-09-14)
第4.8.0版(2020-09-06)
第4.7.2版(2020-07-13)