handsontable汉化包 2.0.x（vue项目）

强大的handsontable表格可以实现类似excel一样的编辑，最近vue项目中有用到，正在熟悉它的配置。我所说的汉化，主要是对于右键菜单的，汉化完的结果如下：

第一步：我开始只是想设置右键菜单为中文，配置contextMenu项类似这样：

contextMenu: {
            items: {
              "row_above": {
                name: '向上插入一行',
              },
              "row_below": {
                name: '向下插入一行',
              },
              "col_left": {
                name: '向左插入一列',
              },
              "col_right": {
                name: '向右插入一列',
              },
              "remove_row": {
                name: '删除行',
              },
              "remove_col": {
                name: '删除列',
              },
              "merge_cell": {
                name: '合并单元格',
              },
              "alignment": {
                name: '对齐',
              },
              "copy": {
                name: '复制',
              },
              "cut": {
                name: '剪切',
              }
            },
          },

一级菜单没问题了，可是二级菜单没有汉化：

第二步：尝试继续完善contextMenu配置，添加子菜单：

contextMenu: {
            items: {
              "row_above": {
                name: '向上插入一行',
              },
              "row_below": {
                name: '向下插入一行',
              },
              "col_left": {
                name: '向左插入一列',
              },
              "col_right": {
                name: '向右插入一列',
              },
              "remove_row": {
                name: '删除行',
              },
              "remove_col": {
                name: '删除列',
              },
              "merge_cell": {
                name: '合并单元格',
              },
              "alignment": {
                name: '对齐',
                submenu: {  ////////////这里就是我新增的子菜单配置/////////////
                  items: [
                    {
                      key: "alignment:left",
                      name: '左对齐',
                    },
                    {
                      key: "alignment:center",
                      name: '水平居中'
                    },
                    {
                      key: "alignment:right",
                      name: '右对齐'
                    },
                    {
                      key: "alignment:justify",
                      name: '两端对齐'
                    },
                    {name: "---------"},
                    {
                      key: "alignment:top",
                      name: '顶端对齐'
                    },
                    {
                      key: "alignment:middle",
                      name: '垂直居中'
                    },
                    {
                      key: "alignment:bottom",
                      name: '底端对齐'
                    }
                  ]
                }
              },
              "copy": {
                name: '复制',
              },
              "cut": {
                name: '剪切',
              }
            },
          }

看结果：

哇塞，二级菜单真的被我汉化了，貌似没问题了呀！

—— too young too simple！二级菜单的默认事件不起作用了，不信你试试：设置某个单元格右对齐、垂直居中等等试试，一点反应都没有。所有，我这样对subMenu的配置是有问题的，name是汉化了，事件也被覆盖了，具体原因，我一时找不出来，有会的亲，欢迎留言告诉我，先谢谢啦~

步骤三：于是乎，我翻看文档想到了汉化，官方文档请见：

https://docs.handsontable.com/pro/3.0.0/tutorial-internationalization.html

我的是vue项目，在node_modules下面找到handsontable/languages文件夹，里面就是它自带的语言包，有如下这些，没中文包。

没用就自己手动汉化一个，因为里面涉及的关键词不多，所以自己拷贝英文的那份js到自己目录下，命名en-CH.js，如下

然后按照文档所说的在示例之前引用、注册：

import "handsontable/dist/handsontable.full.css"
import Handsontable from 'handsontable';
import {deepCopy} from "../../utils/deepCopy";
import enCH from './languages/en-CH';

Handsontable.languages.registerLanguageDictionary(enCH);   //注册中文字典

汉化完的右键菜单图见本文的第一张图，而且点击事件等都正常。注意此时的contextMenu配置需要改为这样：

contextMenu: [
            "row_above",
            "row_below",
            "col_left",
            "col_right",
            "---------",
            "remove_row",
            "remove_col",
            "---------",
            "alignment",
            "copy",
            "cut",
            "mergeCells"
          ],

附汉化的en-CH.js

/**
 * @preserve
 * Authors: fairyIer
 * Last updated: May 18, 2018
 *
 * handsontable 汉化包
 */
import Handsontable from 'handsontable';

const C = Handsontable.languages.dictionaryKeys;

const dictionary = {
  languageCode: 'en-US',
  [C.CONTEXTMENU_ITEMS_ROW_ABOVE]: '上方插入一行',
  [C.CONTEXTMENU_ITEMS_ROW_BELOW]: '下方插入一行',
  [C.CONTEXTMENU_ITEMS_INSERT_LEFT]: '左方插入一列',
  [C.CONTEXTMENU_ITEMS_INSERT_RIGHT]: '右方插入一列',
  [C.CONTEXTMENU_ITEMS_REMOVE_ROW]: ['删除行', '删除行'],
  [C.CONTEXTMENU_ITEMS_REMOVE_COLUMN]: ['删除列', '删除列'],
  [C.CONTEXTMENU_ITEMS_UNDO]: '撤销',
  [C.CONTEXTMENU_ITEMS_REDO]: '恢复',
  [C.CONTEXTMENU_ITEMS_READ_ONLY]: '只读',
  [C.CONTEXTMENU_ITEMS_CLEAR_COLUMN]: '清空列',

  [C.CONTEXTMENU_ITEMS_ALIGNMENT]: '对齐方式',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT]: '左对齐',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER]: '水平居中',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT]: '右对齐',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY]: '两端对齐',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP]: '顶端对齐',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE]: '垂直居中',
  [C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM]: '底端对齐',

  [C.CONTEXTMENU_ITEMS_FREEZE_COLUMN]: '冻结列',
  [C.CONTEXTMENU_ITEMS_UNFREEZE_COLUMN]: '解冻列',

  [C.CONTEXTMENU_ITEMS_BORDERS]: '边框',
  [C.CONTEXTMENU_ITEMS_BORDERS_TOP]: '上',
  [C.CONTEXTMENU_ITEMS_BORDERS_RIGHT]: '右',
  [C.CONTEXTMENU_ITEMS_BORDERS_BOTTOM]: '下',
  [C.CONTEXTMENU_ITEMS_BORDERS_LEFT]: '左',
  [C.CONTEXTMENU_ITEMS_REMOVE_BORDERS]: '去掉边框',

  [C.CONTEXTMENU_ITEMS_ADD_COMMENT]: '添加批注',
  [C.CONTEXTMENU_ITEMS_EDIT_COMMENT]: '编辑批注',
  [C.CONTEXTMENU_ITEMS_REMOVE_COMMENT]: '删除批注',
  [C.CONTEXTMENU_ITEMS_READ_ONLY_COMMENT]: '批注只读',

  [C.CONTEXTMENU_ITEMS_MERGE_CELLS]: '合并单元格',
  [C.CONTEXTMENU_ITEMS_UNMERGE_CELLS]: '拆分单元格',

  [C.CONTEXTMENU_ITEMS_COPY]: '复制',
  [C.CONTEXTMENU_ITEMS_CUT]: '粘贴',

  [C.CONTEXTMENU_ITEMS_NESTED_ROWS_INSERT_CHILD]: '插入子行',
  [C.CONTEXTMENU_ITEMS_NESTED_ROWS_DETACH_CHILD]: '从父行分离',

  [C.CONTEXTMENU_ITEMS_HIDE_COLUMN]: ['隐藏列', '隐藏列'],
  [C.CONTEXTMENU_ITEMS_SHOW_COLUMN]: ['取消隐藏', '取消隐藏'],

  [C.CONTEXTMENU_ITEMS_HIDE_ROW]: ['隐藏行', '隐藏行'],
  [C.CONTEXTMENU_ITEMS_SHOW_ROW]: ['取消隐藏', '取消隐藏'],

  [C.FILTERS_CONDITIONS_NONE]: '无',
  [C.FILTERS_CONDITIONS_EMPTY]: '为空',
  [C.FILTERS_CONDITIONS_NOT_EMPTY]: '非空',
  [C.FILTERS_CONDITIONS_EQUAL]: '等于',
  [C.FILTERS_CONDITIONS_NOT_EQUAL]: '不等于',
  [C.FILTERS_CONDITIONS_BEGINS_WITH]: '开始于',
  [C.FILTERS_CONDITIONS_ENDS_WITH]: '结束于',
  [C.FILTERS_CONDITIONS_CONTAINS]: '包含',
  [C.FILTERS_CONDITIONS_NOT_CONTAIN]: '不包含',
  [C.FILTERS_CONDITIONS_GREATER_THAN]: 'Greater than',
  [C.FILTERS_CONDITIONS_GREATER_THAN_OR_EQUAL]: 'Greater than or equal to',
  [C.FILTERS_CONDITIONS_LESS_THAN]: 'Less than',
  [C.FILTERS_CONDITIONS_LESS_THAN_OR_EQUAL]: 'Less than or equal to',
  [C.FILTERS_CONDITIONS_BETWEEN]: 'Is between',
  [C.FILTERS_CONDITIONS_NOT_BETWEEN]: 'Is not between',
  [C.FILTERS_CONDITIONS_AFTER]: '前',
  [C.FILTERS_CONDITIONS_BEFORE]: '后',
  [C.FILTERS_CONDITIONS_TODAY]: '今天',
  [C.FILTERS_CONDITIONS_TOMORROW]: '明天',
  [C.FILTERS_CONDITIONS_YESTERDAY]: '昨天',

  [C.FILTERS_VALUES_BLANK_CELLS]: '空单元格',

  [C.FILTERS_DIVS_FILTER_BY_CONDITION]: '条件筛选',
  [C.FILTERS_DIVS_FILTER_BY_VALUE]: '值筛选',

  [C.FILTERS_LABELS_CONJUNCTION]: '和',
  [C.FILTERS_LABELS_DISJUNCTION]: '或',

  [C.FILTERS_BUTTONS_SELECT_ALL]: '全选',
  [C.FILTERS_BUTTONS_CLEAR]: '清空',
  [C.FILTERS_BUTTONS_OK]: '确认',
  [C.FILTERS_BUTTONS_CANCEL]: '取消',

  [C.FILTERS_BUTTONS_PLACEHOLDER_SEARCH]: '搜索',
  [C.FILTERS_BUTTONS_PLACEHOLDER_VALUE]: '值',
  [C.FILTERS_BUTTONS_PLACEHOLDER_SECOND_VALUE]: '第二个值'
};

export default dictionary;

番外：我今天发现，[email protected]出来了，多了两个汉化包：

无需自己汉化了，按照文档说的引入

import 'handsontable/languages/zh-CN'; //引入中文语言包

...

language: 'zh-CN',  //声明用中文的语言包
          contextMenu: [
            "row_above",
            "row_below",
            "col_left",
            "col_right",
            "---------",
            "remove_row",
            "remove_col",
            "---------",
            "alignment",
            "copy",
            "cut",
            "mergeCells"
          ],

结果如下：

总结：我觉得官网的汉化比我自己翻译得好，如果你们觉得自己翻译的更准确，仍然可以自定义语言包。

handsontable汉化包 2.0.x（vue项目）

猜你喜欢