Tabulator 数据编辑下载CSV、JSON、XLSX、PDF和HTML示例

最新推荐文章于 2024-05-11 09:39:49 发布
allway2
最新推荐文章于 2024-05-11 09:39:49 发布
阅读量395
点赞数
文章标签： python php 开发语言
本文链接：https://blog.csdn.net/allway2/article/details/121473893
版权
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tabulator Example</title>
        <link href="https://unpkg.com/tabulator-tables@5.0.7/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.0.7/dist/js/tabulator.min.js"></script>
        <script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>
        <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
    </head>

    <body>

        <div>
            <button id="download-csv">Download CSV</button>
            <button id="download-json">Download JSON</button>
            <button id="download-xlsx">Download XLSX</button>
            <button id="download-pdf">Download PDF</button>
            <button id="download-html">Download HTML</button>
        </div>

        <div id="example-table"></div>
        <script type="text/javascript">
            //Create Date Editor
            var dateEditor = function (cell, onRendered, success, cancel) {
                //cell - the cell component for the editable cell
                //onRendered - function to call when the editor has been rendered
                //success - function to call to pass the successfuly updated value to Tabulator
                //cancel - function to call to abort the edit and return to a normal cell

                //create and style input
                var cellValue = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd"),
                        input = document.createElement("input");

                input.setAttribute("type", "date");

                input.style.padding = "4px";
                input.style.width = "100%";
                input.style.boxSizing = "border-box";

                input.value = cellValue;

                onRendered(function () {
                    input.focus();
                    input.style.height = "100%";
                });

                function onChange() {
                    if (input.value != cellValue) {
                        success(luxon.DateTime.fromFormat(input.value, "yyyy-MM-dd").toFormat("dd/MM/yyyy"));
                    } else {
                        cancel();
                    }
                }

                //submit new value on blur or change
                input.addEventListener("blur", onChange);

                //submit new value on enter
                input.addEventListener("keydown", function (e) {
                    if (e.keyCode == 13) {
                        onChange();
                    }

                    if (e.keyCode == 27) {
                        cancel();
                    }
                });

                return input;
            };
            var tabledata = [{
                    playerid: 1,
                    playername: "Virat Kohli",
                    price: "17",
                    team: "RCB",
                    joiningdate: "01/01/2020"
                }, {
                    playerid: 2,
                    playername: "Rohit Sharma",
                    price: "15",
                    team: "MI",
                    joiningdate: "02/01/2020"
                }, {
                    playerid: 3,
                    playername: "MS Dhoni",
                    price: "15",
                    team: "CSK",
                    joiningdate: "03/01/2020"
                }, {
                    playerid: 4,
                    playername: "Shreyas Iyer",
                    price: "7",
                    team: "RCB",
                    joiningdate: "04/01/2020"
                }, {
                    playerid: 5,
                    playername: "KL Rahul",
                    price: "11",
                    team: "KXIP",
                    joiningdate: "05/01/2020"
                }, {
                    playerid: 6,
                    playername: "Dinesh Karthik",
                    price: "7",
                    team: "KKR",
                    joiningdate: "06/01/2020"
                }, {
                    playerid: 7,
                    playername: "Steve Smith",
                    price: "12",
                    team: "RR",
                    joiningdate: "07/01/2020"
                }, {
                    playerid: 8,
                    playername: "David Warner",
                    price: "12",
                    team: "SRH",
                    joiningdate: "08/01/2020"
                }, {
                    playerid: 9,
                    playername: "Kane Williamson",
                    price: "3",
                    team: "SRH",
                    joiningdate: "09/01/2020"
                }, {
                    playerid: 10,
                    playername: "Jofra Archer",
                    price: "7",
                    team: "RR",
                    joiningdate: "10/01/2020"
                }, {
                    playerid: 11,
                    playername: "Andre Russell",
                    price: "9",
                    team: "KKR",
                    joiningdate: "11/01/2020"
                }, {
                    playerid: 12,
                    playername: "Chris Gayle",
                    price: "2",
                    team: "KXIP",
                    joiningdate: "12/01/2020"
                },
            ];

            var table = new Tabulator("#example-table", {
                height: 220,
                data: tabledata,
                layout: "fitColumns",
                pagination: "local",
                paginationSize: 5,
                tooltips: true,
                columns: [{
                        title: "Player Name",
                        field: "playername",
                        sorter: "string",
                        width: 150,
                        headerFilter: "input",
                        editor: "input"
                    }, {
                        title: "Player Price",
                        field: "price",
                        sorter: "number",
                        hozAlign: "left",
                        formatter: "progress",
                        editor: "input"
                    },

                    {
                        title: "Team",
                        field: "team",
                        sorter: "string",
                        hozAlign: "center",
                        editor: "select",
                        editorParams: {
                            values: {
                                "RCB": "RCB",
                                "MI": "MI",
                                "KKR": "KKR",
                            }},
                        headerFilter: true,
                        headerFilterParams: {
                            "RCB": "RCB",
                            "MI": "MI",
                            "KKR": "KKR",
                        }
                    }, {
                        title: "Joining Date",
                        field: "joiningdate",
                        sorter: "date",
                        hozAlign: "center",
                        editor: dateEditor
                    },
                ],

            });
            //trigger download of data.csv file
            document.getElementById("download-csv").addEventListener("click", function () {
                table.download("csv", "data.csv");
            });

//trigger download of data.json file
            document.getElementById("download-json").addEventListener("click", function () {
                table.download("json", "data.json");
            });

//trigger download of data.xlsx file
            document.getElementById("download-xlsx").addEventListener("click", function () {
                table.download("xlsx", "data.xlsx", {sheetName: "My Data"});
            });

//trigger download of data.pdf file
            document.getElementById("download-pdf").addEventListener("click", function () {
                table.download("pdf", "data.pdf", {
                    orientation: "portrait", //set page orientation to portrait
                    title: "Example Report", //add title to report
                });
            });

//trigger download of data.html file
            document.getElementById("download-html").addEventListener("click", function () {
                table.download("html", "data.html", {style: true});
            });
        </script>
    </body>

</html>