DevExtreme DataGrid Angular 国际化 - 带源码

栏目: JavaScript · 发布时间: 5年前

内容简介:打开新的安装完毕后在目录

DevExtreme 实现国际化的步骤

创建项目

  • 根据官方的 Getting Started 的网址 https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ 创建项目
  • cmd 中使用命令 npx -p devextreme-cli devextreme new angular-app i18n 创建项目,该项目名称是 i18n
  • 创建成功后使用命令 cd i18n ,切换路径到项目内,然后使用 ng serve --o ,运行项目并且打开浏览器
    此时打开浏览器后应该能看到 DevExtreme 的标准项目页面,如下:
    DevExtreme DataGrid Angular 国际化 - 带源码

下载安装国际化包

打开新的 CMD 路径切换到项目的根目录下,使用命令 npm install --save-dev devextreme-cldr-data globalize 安装国际化包

安装完毕后在目录 D:\Java\Document\Angular\Demo\AAA.DevExtreme\i18n\node_modules 下会多出 globalize 等几个对应的用于国际化的文件夹

制作测试页面显示默认的英文

  • 通过 DevExtreme CLI 创建项目时生成的模板文件 src/pages/display-data/display-data.component.html ,中为表格追加属性

    <dxo-editing 
            mode="row"
            [allowUpdating]="true"
            [allowDeleting]="true"
            [allowAdding]="true">
        </dxo-editing>

    最终形成本模板文件的所有代码如下:

    <h2 class="content-block">Display Data</h2>
    
    <dx-data-grid class="dx-card wide-card"
        [dataSource]="dataSource"
        [showBorders]="false"
        [focusedRowEnabled]="true"
        [focusedRowIndex]="0"
        [columnAutoWidth]="true"
        [columnHidingEnabled]="true">
    
        <dxo-editing 
            mode="row"
            [allowUpdating]="true"
            [allowDeleting]="true"
            [allowAdding]="true">
        </dxo-editing>
    
        <dxo-paging [pageSize]="10"></dxo-paging>
        <dxo-pager [showPageSizeSelector]="true" [showInfo]="true"></dxo-pager>
        <dxo-filter-row [visible]="true"></dxo-filter-row>
    
        <dxi-column
            dataField="Task_ID"
            [width]="90"
            [hidingPriority]="2">
        </dxi-column>
        <dxi-column
            dataField="Task_Subject"
            [width]="190"
            caption="Subject"
            [hidingPriority]="8">
        </dxi-column>
        <dxi-column
            dataField="Task_Status"
            caption="Status"
            [hidingPriority]="6">
        </dxi-column>
        <dxi-column
            dataField="Task_Priority"
            caption="Priority"
            [hidingPriority]="5">
            <dxo-lookup
                [dataSource]="priority"
                valueExpr="value"
                displayExpr="name">
            </dxo-lookup>
        </dxi-column>
        <dxi-column
            dataField="ResponsibleEmployee.Employee_Full_Name"
            caption="Assigned To"
            [allowSorting]="false"
            [hidingPriority]="7">
        </dxi-column>
        <dxi-column
            dataField="Task_Start_Date"
            caption="Start Date"
            dataType="date"
            [hidingPriority]="3">
        </dxi-column>
        <dxi-column
            dataField="Task_Due_Date"
            caption="Due Date"
            dataType="date"
            [hidingPriority]="4">
        </dxi-column>
        <dxi-column
            dataField="Task_Priority"
            caption="Priority"
            [hidingPriority]="1">
        </dxi-column>
        <dxi-column
            dataField="Task_Completion"
            caption="Completion"
            [hidingPriority]="0">
        </dxi-column>
    </dx-data-grid>

    编译重新运行项目能看到表格右边有删除按钮了,点击后弹出的提示是英文的,如下:

    DevExtreme DataGrid Angular 国际化 - 带源码

注册并且调用国际化方法,显示效果

  • 在文件 tsconfig.json 中注册 CLDR ,在项目 compilerOptions 下的代码如下:

    "paths": {
          // DevExtreme 国际化
          "globalize": [
            "node_modules/globalize/dist/globalize"
          ],
          "globalize/*": [
            "node_modules/globalize/dist/globalize/*"
          ],
          "cldr": [
            "node_modules/cldrjs/dist/cldr"
          ],
          "cldr/*": [
            "node_modules/cldrjs/dist/cldr/*"
          ],
          // DevExtreme 国际化 结束
    
          "jszip": [
            "node_modules/jszip/dist/jszip.min.js"
          ]
        }

    最后一个项目 jszip 在创建项目时自动建立的,所以实际是黏贴上面的 DevExtreme 国际化 之间的代码

  • 在目录 src 创建文件 typings.d.ts ,代码如下:

    declare module 'globalize' {
        const value: any;
        export default value;
    }
     
    declare module 'devextreme/localization/messages/*' {
        const value: any;
        export default value;
    }
     
    declare module 'devextreme-cldr-data/*' {
        const value: any;
        export default value;
    }
  • angular.json 的两个 scripts 项目下黏贴下面的代码:

    "./node_modules/cldrjs/dist/cldr.js",
                  "./node_modules/globalize/dist/globalize.js"
  • 将下面代码贴到 app.module.ts 中的所有 import@NgModule

    // 下面开始是国际化代码
    import "devextreme/localization/globalize/number";
    import "devextreme/localization/globalize/date";
    import "devextreme/localization/globalize/currency";
    import "devextreme/localization/globalize/message";
     
    // Dictionaries for German and Russian languages
    // import deMessages from "devextreme/localization/messages/de.json!json";
    // import ruMessages from "devextreme/localization/messages/ru.json!json";
     
    // Common and language-specific CLDR JSONs
    // 在 2019年6月22日 09:38:24 测试这里代码要注释掉,使用下面的方式导入对应语言的json
    // import supplemental from "devextreme-cldr-data/supplemental.json!json";
    // import deCldrData from "devextreme-cldr-data/de.json!json";
    // import ruCldrData from "devextreme-cldr-data/ru.json!json";
    
     
    // In projects created with Angular CLI 6+
    import deMessages from "devextreme/localization/messages/de.json";
    import ruMessages from "devextreme/localization/messages/ru.json";
    import zhMessages from "devextreme/localization/messages/zh.json";
    import supplemental from "devextreme-cldr-data/supplemental.json";
    import deCldrData from "devextreme-cldr-data/de.json";
    import ruCldrData from "devextreme-cldr-data/ru.json";
    import zhCldrData from "devextreme-cldr-data/zh.json";
     
    import Globalize from "globalize";
     
    Globalize.load(
        supplemental, deCldrData, ruCldrData,zhCldrData
    );
     
    Globalize.loadMessages(deMessages);
    Globalize.loadMessages(ruMessages);
    Globalize.loadMessages(zhMessages);
     
    Globalize.locale(navigator.language);
    // 国际化代码结束
  • 上面修改的配置中要求结束当前运行的项目,重新使用 ng serve --o 运行后正常,效果如下:
    DevExtreme DataGrid Angular 国际化 - 带源码

在线演示

https://stackblitz.com/github/chanchaw/DevExtremeGlobalize


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Data Mining

Web Data Mining

Bing Liu / Springer / 2011-6-26 / CAD 61.50

Web mining aims to discover useful information and knowledge from Web hyperlinks, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is not purely an ......一起来看看 《Web Data Mining》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具