Tabulator设置中文语言翻译

最新推荐文章于 2024-05-11 09:39:49 发布
最新推荐文章于 2024-05-11 09:39:49 发布
阅读量633 收藏 1
点赞数
文章标签： java php 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/121497365
版权

 

<!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>
        <style>
            /*Horizontally center header and footer*/
            .tabulator-print-header, tabulator-print-footer{
                text-align:center;
            }
        </style>
    </head>

    <body>

        <div>
            <button id="print-table">Print Table</button>
        </div>
        <div>
            <button id="history-undo">Undo Edit</button>
            <button id="history-redo">Redo Edit</button>
        </div>
        <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>
            <button id="add-row">Add Blank Row to bottom</button>
            <button id="del-row">Remove Row "Oli Bob"</button>
            <button id="clear">Empty the table</button>
            <button id="reset">Reset</button>
        </div>
        <div id="example-table"></div>
        <div id="example-footer"></div>
        <button id="save">Save</button>
        <script type="text/javascript">
            //define row context menu contents
            var rowMenu = [
                {
                    label: "<i class='fas fa-user'></i> Change Name",
                    action: function (e, row) {
                        row.update({name: "Steve Bobberson"});
                    }
                },
                {
                    label: "<i class='fas fa-check-square'></i> Select Row",
                    action: function (e, row) {
                        row.select();
                    }
                },
                {
                    separator: true,
                },
                {
                    label: "Admin Functions",
                    menu: [
                        {
                            label: "<i class='fas fa-trash'></i> Delete Row",
                            action: function (e, row) {
                                row.delete();
                            }
                        },
                        {
                            label: "<i class='fas fa-ban'></i> Disabled Option",
                            disabled: true,
                        },
                    ]
                }
            ]

//define column header menu as column visibility toggle
            var headerMenu = function () {
                var menu = [];
                var columns = this.getColumns();

                for (let column of columns) {

                    //create checkbox element using font awesome icons
                    let icon = document.createElement("i");
                    icon.classList.add("fas");
                    icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");

                    //build label
                    let label = document.createElement("span");
                    let title = document.createElement("span");

                    title.textContent = " " + column.getDefinition().title;

                    label.appendChild(icon);
                    label.appendChild(title);

                    //create menu item
                    menu.push({
                        label: label,
                        action: function (e) {
                            //prevent menu closing
                            e.stopPropagation();

                            //toggle current column visibility
                            column.toggle();

                            //change menu item icon
                            if (column.isVisible()) {
                                icon.classList.remove("fa-square");
                                icon.classList.add("fa-check-square");
                            } else {
                                icon.classList.remove("fa-check-square");
                                icon.classList.add("fa-square");
                            }
                        }
                    });
                }

                return menu;
            };
            //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 footer = document.getElementById('example-footer');
            var table = new Tabulator("#example-table", {
                locale: "zh-cn",
                height: 230,
                data: tabledata,
                layout: "fitColumns",
                rowContextMenu: rowMenu, //add context menu to rows
                pagination: "local",
                paginationSize: 3,
                paginationInitialPage: 1,
                paginationSizeSelector: true,
                //paginationSizeSelector: [5, 10, 15],
                //paginationButtonCount: 2,
                tooltips: true,
                history: true,
                printAsHtml: true,
                printHeader: "<h1>Example Table Header<h1>",
                printFooter: "<h2>Example Table Footer<h2>",
                langs: {
                    "zh-cn": {
                        "pagination": {
                            "first": "|<最前页",
                            "first_title": "|<最前页",
                            "last": "最后页>|",
                            "last_title": "最后页>|",
                            "prev": "<前一页",
                            "prev_title": "<前一页",
                            "next": "后一页>",
                            "next_title": "后一页>",
                            "all": "所有",
                            "page_size": "每页行数",
                        },
                    },
                },
                columns: [
                    {
                        title: "ID",
                        field: "playerid",
                        sorter: "number",
                        width: 10,
                        headerFilter: "input",
                        //editor: "input",
                        //visible: false
                    },
                    {
                        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});
            });
            document.getElementById("save").addEventListener("click", function () {
                console.log(table.getData());
            });
//Add row on "Add Row" button click
            document.getElementById("add-row").addEventListener("click", function () {
                table.addRow({});
            });

//Delete row on "Delete Row" button click
            document.getElementById("del-row").addEventListener("click", function () {
                table.deleteRow(1);
            });

//Clear table on "Empty the table" button click
            document.getElementById("clear").addEventListener("click", function () {
                table.clearData()
            });

//Reset table contents on "Reset the table" button click
            document.getElementById("reset").addEventListener("click", function () {
                table.setData(tabledata);
            });
            //undo button
            document.getElementById("history-undo").addEventListener("click", function () {
                table.undo();
            });

//redo button
            document.getElementById("history-redo").addEventListener("click", function () {
                table.redo();
            });
            //print button
            document.getElementById("print-table").addEventListener("click", function () {
                table.print(false, true);
            });
            document.getElementById("example-table").addEventListener("page-changed	", function () {
                console.log(table.getPage());
                console.log(table.getPageMax());
            });
            //set locale to French
            document.getElementById("lang-french").addEventListener("click", function () {
                table.setLocale("fr-fr");
            });

//set locale to German
            document.getElementById("lang-german").addEventListener("click", function () {
                table.setLocale("de-de");
            });

//set default locale
            document.getElementById("lang-default").addEventListener("click", function () {
                table.setLocale("");
            });
            //set locale to Chinese
            document.getElementById("lang-chinese").addEventListener("click", function () {
                table.setLocale("zh-cn");
            });
        </script>
    </body>

</html>

allway2
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid学习总结_1 获取或设置行及单元格的值
luguling200802544的专栏
06-10 1万+
JqGrid官网：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options 1、获取选中行ID         selIDs=$("#grid").getGridParam("selarrrow");//selIDs是一个选中行ID的数组      selectID=$("#grid").getGridPar
Tabulator支持分页、中文排序和过滤
allway2的博客
05-11 457
中文排序时中文在前，英文在后和localeCompare一致 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal.
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库
最新发布
gitblog_00068的博客
05-11 505
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库 项目地址:https://gitcode.com/olifolkerd/tabulator 项目介绍 Tabulator是一款强大的JavaScript库，它使得创建互动式的HTML表格变得异常简单。只需几步操作，你就能从HTML表单、JavaScript数组或JSON数据中生成功能齐全的表格。该项目的设计目标是让...
Tabulator javascript data grid数据表格控件v5.1.0 发布说明
allway2的博客
02-08 756
发行说明 编辑器配置 文件导入 阿贾克斯 键绑定 菜单 分页 列 可移动行 排序 格式化 数据树 下载 Bug修复 编辑器配置 一个新的.editorconfig文件已添加到 Tabulator 项目中，以使开发人员更容易以正确的意图和其他浏览器设置为项目做出贡献 文件导入 此版本中添加了一个新的导入模块来处理将非 JavaScript 数据类型加载到表中 从本地文件导入尝试交互式演示 您可以使用导入功能让用户从本地磁盘中选择文件。它将向用户显示一个标准的文件打开
tabulator.js表格分页查询
weixin_43082983的博客
05-14 552
之前使用bootstrap table比较多，第一次使用tabulator，查了官方文档，一点一点debugger才整出来分页，记录一下。 使用的tabulator.js是 v3.5.1 html文件: js文件： ("#demoTable").tabulator({ pagination:“remote”, //enable remote pagination ajaxConfig: “POST”, //ajax request type ajaxURL:_ctx + ‘/view/getList’
dash-tabulator:Dash Plotly的制表器组件
05-02
dash_tabulator 短跑制表符 Dash制表符是提供符功能的Dash / Plotly组件。 这不是Tabulator的全面实现，仅仅是使应用程序正常运行所必需的基础。 在它使用 它建立在Dash Plotly团队，Tabulator团队和React ...
react-tabulator:React Tabulator基于Tabulator-一个具有许多高级功能的JS表库
05-08
React制表器React Tabulator基于Tabulator-一个具有许多高级功能的JS表库。 现场演示： 示例代码： 更多示例，用例，常见问题解答： :glowing_star: 特征制表器的功能： Filters Sorting Formatting Grouping Ajax ...
Python库 | tabulator-1.52.0.tar.gz
03-10
**Python库 Tabulator 1.52.0详解** 在Python的世界中，库扮演着至关重要的角色，它们提供了丰富的功能，让开发者能够高效地完成各种任务。本文将深入探讨一个名为Tabulator的Python库，其版本为1.52.0，通过这个库...
Tabulator-开源
04-27
一组Unix命令行工具，用于使用标题行快速方便地批处理表格文本文件（aka，制表符分隔，csv或平面文件格式）。 提供定界符和压缩检测，按名称引用列。 * tblmap：每行（“地图”）计算：通过表达式派生列，删除，重新...
Tabulator-crx插件
04-03
语言:English 整理标签并保存内存 将充满选项卡的窗口转换为扩展中包含的小组。 它将指向窗口中打开的每个网站的所有链接保存为文本URL，当您单击该组时，URL将重新打开。 此扩展程序将大大减少Chrome使用的RAM数量...
Tabulator是一款非常实用的基于jQueryUI的表格插件
08-10
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
js-tabulator-example:制表符库使用的简单示例
05-23
js-tabulator-example 制表符库使用的简单示例。 具有相同服务器本地数据负载的简化样板。 地位 原型制作。 注意：默认分支是default 。
Tabulator-基于jQuery UI的实用表格插件
12-11
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
Tabulator 交互式数据表格 javascript 库示例
allway2的博客
11-21 1868
​在本JavaScript 教程中，我们将看到如何使用tabulator js。在这个tabulator js 示例或tabulator js 教程中，我们将看到如何使用 tabulator js 立即创建交互式表格。​ 什么是制表器js？ tabulator js是一个 javascript 库，我们可以使用它在几秒钟内创建交互式表格，而无需太多编码。它非常易于使用且功能齐全，是一个交互式表格 javascript 库。 我们可以从任何 HTML 表格、JavaScript 数组、AJAX 数据
Tabulator 交互式数据表格编辑示例
allway2的博客
11-22 503
<!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 .
谈tabulator动态增删改、填充数据以及清空数据
IT黑板的博客
11-28 2846
谈tabulator动态增删改、填充数据以及清空数据 闲话不多话，直接上干货！ 1、关于操作列表设置： //创建并设置table属性 var _curRow = null; //设置格式 var optIconFunction = function(cell, formatterParams){ //plain text value var yhbh = cell.getRow().ge...
Tabulator PDF下载中文字体设置
allway2的博客
11-28 443
TabulatorPDF 下载要求您的站点中包含jsPDF 库和jsPDF-AutoTable 插件，这可以包含在以下脚本标签中。 标准 jsPDF 1.5.3 实现仅支持 14 种标准 PDF 字体。如果您想包含自定义字体以匹配您的品牌或样式指南，那么您将需要采取一些额外的步骤。 如果要使用上述字体之一，则可以使用 setFont() 方法对其进行设置，而无需采取任何其他操作。否则，请按照本教程中的步骤操作。 让我们开始吧！ 向 jsPDF 添加自定义字体 要在 PDF 文件中使用自定义字体..
Tabulator 易于使用、功能齐全、交互式表格 JavaScript 库
allway2的博客
11-26 1672
Tabulator 跨浏览器支持 Tabulator 支持所有主流浏览器 Tabulator 旨在支持所有现代桌面和移动 Web 浏览器 框架支持 Tabulator 适用于所有 JS 框架，包括： Tabulator 是一个普通的 JavaScript 库，可用于所有前端 JavaScript 框架 文档部分包含一个框架设置指南以帮助您入门 广泛的功能集 配置您的表以满足用户的需求 Tabulator 具有...
tabulator框架
06-02
Tabulator 是一个强大的开源 JavaScript 表格库，它可以让你快速创建可排序、可搜索、可过滤和可编辑的数据表格。Tabulator 可以在各种各样的环境中使用，包括 Web 应用程序、桌面应用程序和移动应用程序。 Tabulator 支持各种数据源，包括 JSON、CSV、HTML 表格等等。它还提供了许多功能，例如： - 排序：可以按照指定的列对数据进行排序。 - 过滤：可以根据条件过滤数据。 - 分页：可以将数据分页显示。 - 编辑：可以在表格中直接编辑数据。 - 导出：可以将表格数据导出为 CSV、JSON 等格式。 Tabulator 还有许多其他功能，例如自定义单元格、自定义格式化、虚拟滚动等等。它的 API 很容易学习和使用，文档也非常详细。如果你需要一个功能强大、易于使用和高度可定制的表格库，那么 Tabulator 是一个非常不错的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值