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
的标准项目页面,如下:
下载安装国际化包
打开新的 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>
编译重新运行项目能看到表格右边有删除按钮了,点击后弹出的提示是英文的,如下:
注册并且调用国际化方法,显示效果
-
在文件
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
运行后正常,效果如下:
在线演示
https://stackblitz.com/github/chanchaw/DevExtremeGlobalize
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!