DevExtreme-DataGrid-Angular-国际化-带源码
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>编译重新运行项目能看到表格右边有删除按钮了，点击后弹出的提示是英文的，如下： ...