Реализациякомпонента ArgusGridComponent
В компонент ArgusGridComponentбыла реализована работа с библиотекой devextreme. При помощи данной библиотеки реализована работа с таблицей.
Пример кода шаблона:
<dx-data-grid *ngIf="ready"
style="height: 100%"
#dataGrid
[dataSource]="gridConfig.rowData"
[columns]="gridConfig.columnDef"
[columnAutoWidth]="true"
[allowColumnResizing]="true"
[allowColumnReordering]="true"
[columnResizingMode]="nextColumn"
[columnMinWidth]="50"
(onToolbarPreparing)="onToolbarPreparing($event)"
(onRowClick)="rowDoubleClick($event)">
<dxo-selection *ngIf="!gridConfig.isMultiSelection" mode="single"></dxo-selection>
<dxo-selection *ngIf="gridConfig.isMultiSelection" mode="multiple"></dxo-selection>
<dxo-header-filter [visible]="gridConfig.isHeaderFilter" [allowSearch]="true"></dxo-header-filter>
<dxo-filter-row [visible]="gridConfig.isFilterRow" [applyFilter]="'auto'"></dxo-filter-row>
<dxo-column-chooser [enabled]="gridConfig.isColumnChooser" [allowSearch]="true" [mode]="'select'" [height]="400" [width]="400"></dxo-column-chooser>
<dxo-group-panel [visible]="gridConfig.isGroupPanel"></dxo-group-panel>
<dxo-grouping [contextMenuEnabled]="gridConfig.contextMenu"></dxo-grouping>
<dxo-paging [enabled]="gridConfig.isPaging" [pageSize]="10"></dxo-paging>
<dxo-pager [visible]="gridConfig.isPager" [showInfo]="true"></dxo-pager>
</dx-data-grid>
Как видно в коде в основном реализован функционал, показанный в Диаграмме прецедентов для прецедента «Просмотр данных в таблице».
Так же можно заметить присутствие в коде объекта gridConfig. Данный объект компонент получает из того места откуда он вызывается.
Примеркодакомпонента:
constructor() {
this.gridProvider.gridContext = this;
loadMessages(enMessages);
|
|
|
loadMessages(ruMessages);
if (this.translate.currentLang === 'ru-RU') {
locale('ru');
} else {
locale('en');
}
let self = this;
this.translate.onLangChange.subscribe((data: LangChangeEvent) => {
self.ready = false;
self.cdr.detectChanges();
if (data.lang === 'ru-RU') {
locale('ru');
} else {
locale('en');
}
self.ready = true;
self.changeCaption();
self.cdr.detectChanges();
});
}
В конструкторе компонента идет реализация локализации для таблицы. Здесь происходит подписание на событие изменение языка. После чего язык в таблице меняется на выбранный.
ngAfterViewInit() {
this.gridConfig.compContext.dataLoaded.subscribe(() => {
this.componentToElement();
this.gridProvider.dataGrid = this.dataGrid;
});
}
Функция ngAfterViewInit() вызывается после того, как компонент про инициализировался. В данной функции ожидаем того, что в родительском компоненте будут подгружены данные из сервиса.
export() {
this.gridProvider.openExport();
}
Функция export()инициализирует компонент ArgusModalComponent, который в свое время инициализирует компонент ArgusExportComponentи берет контент из данного компонента.
changeCaption() {
if (this.gridConfig.columnDef) {
this.gridConfig.columnDef.forEach((element) => {
element.caption = dictionary[this.translate.currentLang][element.dataField];
});
}
}
Функция changeCaption() переопределяет язык на котором будут выведены названия колонок.
|
|
|
componentToElement() {
this.gridConfig.columnDef.push(
{
dataField: 'Test custom template',
allowSorting: false,
allowReordering: false,
allowResizing: false,
minWidth: 300,
allowFiltering: false,
allowGrouping: false,
allowHeaderFiltering: false,
cellTemplate: (elem) => {
let component = ArgusExpansionPanelFormatterComponent;
let factory = this.resolver.resolveComponentFactory(component);
let comp = this.viewContainer.createComponent(factory);
elem.appendChild(comp.instance.expansivePanel.nativeElement);
}
}
);
this.changeCaption();
this.gridConfig = Object.assign(this.defaultConfig, this.gridConfig);
this.cdr.detectChanges();
}
Добавление колонки с данными, которые имеют вид открывающей панели реализует функция componentToElement(). Для реализации данной панели используется компонент ArgusExpansionPanelComponent.
rowDoubleClick(e: any) {
let component = e.component;
let prevClickTime = component.lastClickTime;
component.lastClickTime = new Date();
if (prevClickTime && (component.lastClickTime - prevClickTime < 300)) {
this.rowDoubleClickedHandler(e);
}
}
private rowDoubleClickedHandler(p: any) {
this.rowDoubleClicked.emit(p);
}
В функции rowDoubleClick() идет отслеживание того, что на строку был произведено двойное нажатие. А в функции rowDoubleClickedHandler() идет создание события, которое будет реализовано в родительском компоненте.
Дата добавления: 2018-08-06; просмотров: 508; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!