Tabulator 交互式数据表格编辑示例

最新推荐文章于 2024-03-21 15:14:35 发布
allway2
最新推荐文章于 2024-03-21 15:14:35 发布
阅读量517
点赞数
文章标签： java php 开发语言
本文链接：https://blog.csdn.net/allway2/article/details/121472728
版权
<!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@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>
        <script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>

    </head>

    <body>

        <div id="players"></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("#players", {
                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
                    },
                ],

            });
        </script>
    </body>

</html>
allway2
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tabulator 交互式数据表格编辑示例

<!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 .
复制链接

扫一扫