★ FEATURED ARTICLE 前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载Jspreadsheet 是一款轻量级 JavaScript 数据网格组件当前仓库即其开源源码内置的搜索框、分页栏、右键菜单、合并单元格提示等界面文案默认全部为英文。本文围绕官方文档 translations.md 讲解如何通过全局 APIjspreadsheet.setDictionary一次性翻译或自定义这些默认文案并结合仓库源码说明其底层实现委托给 jSuites 字典机制与每个文案键的消费位置。读完本文你将能在原生 HTML、React 与 Vue 三种场景下完成组件的完整国际化i18n配置。核心 APIjspreadsheet.setDictionary国际化的唯一入口是全局方法jspreadsheet.setDictionary()它接收一个英文默认文案 → 目标语言文案的键值映射对象。调用一次即全局生效覆盖之后创建的所有表格实例。从源码看该方法的实现非常轻量只是把字典对象原样转交给底层 UI 库 jSuites 的字典系统src/index.js// Define dictionary libraryBase.jspreadsheet.setDictionary function (o) { jSuites.setDictionary(o); };也就是说Jspreadsheet 自身并不维护文案表而是复用jSuites.setDictionary的全局字典存储组件内部所有需要显示文字的地方统一通过jSuites.translate(英文键)读取当前字典中对应的译文未命中的键则原样返回英文。因此你只需在创建表格前调用一次setDictionary即可让整个组件树共享同一套语言包。字典键的覆盖范围界面文案、右键菜单、对话框与合并单元格提示从源码中jSuites.translate(...)的调用点src/utils/worksheets.js、src/utils/pagination.js、src/utils/events.js、src/utils/merges.js、src/utils/rows.js、src/utils/columns.js、src/utils/toolbar.js、src/utils/orderBy.js可以归纳出字典键覆盖以下五大类界面元素类别字典键源码消费位置搜索栏Searchworksheets.js 搜索标签分页栏Show、entries、No records found、Showing page {0} of {1} entriesworksheets.js、pagination.js右键菜单Insert a new column before、Insert a new column after、Delete selected columns、Rename this column、Column name、Order ascending、Order descending、Insert a new row before、Insert a new row after、Edit comments、Add comments、Comments、Clear comments、Copy、Paste、Save as、Aboutevents.js删除确认Are you sure to delete the selected rows?、Are you sure to delete the selected columns?events.js合并单元格Merge the selected cells、No cells selected、Cell already merged、Invalid merged properties、There is a conflict with another merged cell、This action will destroy any existing merged cells. Are you sure?、The merged cells will retain the value of the top-left cell only. Are you sure?toolbar.js、merges.js、columns.js、rows.js、orderBy.js其他确认This action will clear your search results. Are you sure?rows.js此外源码中还出现了文档示例未包含的键Delete selected rowsevents.js同样可以加入你的字典。翻译时并不需要提供全部键——setDictionary支持部分覆盖未翻译的键保持英文原文这便于渐进式国际化。完整示例一原生 HTML全局脚本引入以下示例来自官方文档 translations.md将全部默认文案翻译为日语。注意setDictionary必须在创建表格jspreadsheet(...)调用之前执行html script srchttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.js/script script srchttps://jsuites.net/v5/jsuites.js/script link relstylesheet hrefhttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.css typetext/css / link relstylesheet hrefhttps://jsuites.net/v5/jsuites.css typetext/css / div idspreadsheet/div script jspreadsheet.setDictionary({ Search: 検索, Show: 表示, entries: エントリ, Insert a new column before: 新しい列を前に挿入, Insert a new column after: 新しい列を後に挿入, Delete selected columns: 選択した列を削除, Rename this column: この列の名前を変更, Column name: 列名, Order ascending: 昇順に並べ替え, Order descending: 降順に並べ替え, Insert a new row before: 新しい行を前に挿入, Insert a new row after: 新しい行を後に挿入, Edit comments: コメントを編集, Add comments: コメントを追加, Comments: コメント, Clear comments: コメントをクリア, Copy: コピー, Paste: 貼り付け, Save as: 名前を付けて保存, About: 情報, Are you sure to delete the selected rows?: 選択した行を削除してもよろしいですか, Are you sure to delete the selected columns?: 選択した列を削除してもよろしいですか, No cells selected: セルが選択されていません, No records found: 記録が見つかりません, Showing page {0} of {1} entries: {1}件中{0}ページを表示, Merge the selected cells: 選択したセルを結合, There is a conflict with another merged cell: 別の結合されたセルとの競合があります, Invalid merged properties: 無効な結合プロパティ, Cell already merged: セルはすでに結合されています, This action will destroy any existing merged cells. Are you sure?: この操作により、既存の結合セルが削除されます。よろしいですか, The merged cells will retain the value of the top-left cell only. Are you sure?: 結合セルは左上のセルの値のみを保持します。よろしいですか, This action will clear your search results. Are you sure?: この操作により検索結果がクリアされます。よろしいですか }); jspreadsheet(document.getElementById(spreadsheet), { worksheets: [ { minDimensions: [6,6] }, ] }); /script /html翻译生效后分页栏会显示表示 X エントリ、搜索框前会显示検索右键菜单与各类确认弹窗confirm/prompt/alert也会全部切换为日语。完整示例二Reactjspreadsheet-ce/react在 React 工程中从jspreadsheet-ce/react包导入组件的同时导出jspreadsheet全局对象在模块加载阶段调用setDictionary随后在 JSX 中渲染Spreadsheetimport React, { useRef } from react; import { Spreadsheet, Worksheet, jspreadsheet } from jspreadsheet-ce/react; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/jspreadsheet.css; jspreadsheet.setDictionary({ Search: 検索, Show: 表示, entries: エントリ, Insert a new column before: 新しい列を前に挿入, Insert a new column after: 新しい列を後に挿入, Delete selected columns: 選択した列を削除, Rename this column: この列の名前を変更, Column name: 列名, Order ascending: 昇順に並べ替え, Order descending: 降順に並べ替え, Insert a new row before: 新しい行を前に挿入, Insert a new row after: 新しい行を後に挿入, Edit comments: コメントを編集, Add comments: コメントを追加, Comments: コメント, Clear comments: コメントをクリア, Copy: コピー, Paste: 貼り付け, Save as: 名前を付けて保存, About: 情報, Are you sure to delete the selected rows?: 選択した行を削除してもよろしいですか, Are you sure to delete the selected columns?: 選択した列を削除してもよろしいですか, No cells selected: セルが選択されていません, No records found: 記録が見つかりません, Showing page {0} of {1} entries: {1}件中{0}ページを表示, Merge the selected cells: 選択したセルを結合, There is a conflict with another merged cell: 別の結合されたセルとの競合があります, Invalid merged properties: 無効な結合プロパティ, Cell already merged: セルはすでに結合されています, This action will destroy any existing merged cells. Are you sure?: この操作により、既存の結合セルが削除されます。よろしいですか, The merged cells will retain the value of the top-left cell only. Are you sure?: 結合セルは左上のセルの値のみを保持します。よろしいですか, This action will clear your search results. Are you sure?: この操作により検索結果がクリアされます。よろしいですか }); export default function App() { const spreadsheet useRef(); return ( Spreadsheet ref{spreadsheet} Worksheet / /Spreadsheet ); };完整示例三Vuejspreadsheet-ce/vueVue 场景用法一致从jspreadsheet-ce/vue导入Spreadsheet与Worksheet组件在script顶层调用jspreadsheet.setDictionary即可组件仓库见 packages/vuetemplate Spreadsheet refspreadsheet Worksheet / /Spreadsheet /template script import { Spreadsheet, Worksheet } from jspreadsheet-ce/vue; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/jspreadsheet.css; jspreadsheet.setDictionary({ Search: 検索, Show: 表示, entries: エントリ, Insert a new column before: 新しい列を前に挿入, Insert a new column after: 新しい列を後に挿入, Delete selected columns: 選択した列を削除, Rename this column: この列の名前を変更, Column name: 列名, Order ascending: 昇順に並べ替え, Order descending: 降順に並べ替え, Insert a new row before: 新しい行を前に挿入, Insert a new row after: 新しい行を後に挿入, Edit comments: コメントを編集, Add comments: コメントを追加, Comments: コメント, Clear comments: コメントをクリア, Copy: コピー, Paste: 貼り付け, Save as: 名前を付けて保存, About: 情報, Are you sure to delete the selected rows?: 選択した行を削除してもよろしいですか, Are you sure to delete the selected columns?: 選択した列を削除してもよろしいですか, No cells selected: セルが選択されていません, No records found: 記録が見つかりません, Showing page {0} of {1} entries: {1}件中{0}ページを表示, Merge the selected cells: 選択したセルを結合, There is a conflict with another merged cell: 別の結合されたセルとの競合があります, Invalid merged properties: 無効な結合プロパティ, Cell already merged: セルはすでに結合されています, This action will destroy any existing merged cells. Are you sure?: この操作により、既存の結合セルが削除されます。よろしいですか, The merged cells will retain the value of the top-left cell only. Are you sure?: 結合セルは左上のセルの値のみを保持します。よろしいですか, This action will clear your search results. Are you sure?: この操作により検索結果がクリアされます。よろしいですか }); export default { components: { Spreadsheet, Worksheet, }, setup() { return {}; } } /script占位符与词序调整{0}、{1}的实际含义分页信息文案Showing page {0} of {1} entries是字典中唯一带参数占位符的键{0}代表当前页码从 1 开始{1}代表总页数。源码中的格式化逻辑位于 src/utils/pagination.js它通过正则/{(\d)}/g将{0}、{1}替换为实际数字const format function (format) { const args Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d)}/g, function (match, number) { return typeof args[number] ! undefined ? args[number] : match; }); }; obj.pagination.children[0].innerHTML format(jSuites.translate(Showing page {0} of {1} entries), obj.pageNumber 1, quantyOfPages);占位符的序号与译文无关可以在译文里自由重排。日语示例{1}件中{0}ページを表示就把总页数放到了当前页码之前渲染结果为10件中3ページを表示符合日语习惯。翻译其他语言时同样可以调整语序例如德语、俄语等主谓宾顺序不同的语言无需改动任何源码。同样No records found在搜索或过滤结果为空、且未启用分页的表格中会显示在分页区域pagination.js只要开启了分页功能pagination配置项该键和分页信息键都会被消费。字典键的消费时机与部分覆盖理解每个键的消费时机有助于排查翻译不生效的问题渲染期消费Search、Show、entries在创建 worksheet 时写入 DOMworksheets.js所以必须在创建表格之前调用setDictionary否则需要重建表格才能看到新译文。交互期消费右键菜单标题、删除确认、合并单元格提示等文案在用户操作时才通过jSuites.translate读取因此晚于表格创建调用setDictionary也能让这些文案即时生效。合并冲突提示No cells selected、Cell already merged、Invalid merged properties、There is a conflict with another merged cell由 merges.js 在setMerge校验阶段作为alert弹出而合并前弹窗The merged cells will retain the value of the top-left cell only. Are you sure?由工具栏合并按钮触发toolbar.js。破坏性操作确认删除行/列会先弹出Are you sure to delete the selected rows?或Are you sure to delete the selected columns?events.js删除或合并涉及已合并单元格、清空搜索结果时会分别弹出对应的This action will destroy...与This action will clear your search results...确认框columns.js、rows.js、orderBy.js。注意事项setDictionary是全局且持久的它修改的是 jSuites 的全局字典同一页面后续创建的所有 Jspreadsheet 实例以及共用该字典的 jSuites 组件都会使用新译文如需切换语言再次调用setDictionary覆盖即可。字典是部分覆盖式的未在字典中提供的键会回退到英文原文所以你可以只翻译需要暴露给终端用户的文案例如只翻译搜索、分页与右键菜单而保留开发者友好的英文提示。若表格启用了分页下拉paginationOptions分页栏会渲染Show [下拉] entries结构worksheets.js此时Show与entries两个键会同时被消费翻译时要成对提供。相关功能配置可进一步参考仓库文档搜索功能、分页功能、右键菜单、合并单元格、工具栏 与 注释功能。通过一个简单的键值映射对象Jspreadsheet 就能完整切换为任意语言——无需修改组件源码也无需为每种语言维护多套表格配置。这正是其国际化设计的核心所有 UI 文案统一收敛到 jSuites 字典层前端开发者只需像维护语言包一样维护setDictionary的入参即可。赞分享前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载相关推荐vid2vid国际化支持多语言界面与文档翻译指南vid2vid国际化支持多语言界面与文档翻译指南 一、项目概述 vid2vid是一个基于Pytorch的高分辨率如2048x1024真实感视频到视频转换的人工智能深度学习计算机视觉媒体生成FontForge 界面翻译实战指南gettext 国际化流程与 po 文件翻译要点FontForge 界面翻译实战指南gettext 国际化流程与 po 文件翻译要点 本篇技术指南以 FontForge 官方文档《User Interfac桌面应用图形学Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南Ant Design Modal 按钮文案自定义与国际化okText / cancelText 全面指南 Modal 是 Ant Design 中最常用的反馈前端UI组件设计系统上一篇Any-Sync 项目常见问题解决方案下一篇如何构建高效的企业级AI工作流实战架构方案与Claude Skills深度应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
