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