制表器目前是一个自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)