Создать таблицу (угловую) из XML DataSet (ado.net)

Question

Клиент отправляет SQL-запрос, который будет выполнен на сервере.Сервер обрабатывает sql, получает данные и возвращает их как DataSet обратно на клиентскую сторону.Они имеют следующую форму:

<?xml version="1.0" encoding="UTF-8"?>
<FlexiDataSet>
   \r\n
   <Table>
      \r\n
      <OperatorId>112051</OperatorId>
      \r\n
      <UserName>112051</UserName>
      \r\n
      <Name>Vasya  Whitebear</Name>
      \r\n
      <IsLeftHanded>false</IsLeftHanded>
      \r\n
      <PinCode>CFCD208495D565EF66E7DFF9F98764DA</PinCode>
      \r\n
      <OperatorType>SystemUser</OperatorType>
      \r\n
   </Table>
   \r\n
   <Table>
      \r\n
      <OperatorId>114178</OperatorId>
      \r\n
      <UserName>114178</UserName>
      \r\n
      <Name>QaLab03Dev owner  QaLab03Dev</Name>
      \r\n
      <IsLeftHanded>false</IsLeftHanded>
      \r\n
      <PinCode>CFCD208495D565EF66E7DFF9F98764DA</PinCode>
      \r\n
      <OperatorType>SystemUser</OperatorType>
      \r\n
   </Table>
</FlexiDataSet>

Важно отметить, что данные не всегда будут поступать в этой форме, потому что клиент может выполнить любой SQL-запрос.Как отобразить этот xml в виде таблицы в угловых?

Answer 1

Вы сделали почти шаги, чтобы выполнить ваше требование.Последний шаг - вам нужно создать EJ2 Angular, используя следующую ссылку для начала работы, и связать преобразованный источник данных (XML-данные в JSON) с Grid.См. Ниже документацию и примеры ссылок.

Начало работы: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/

Привязка локального источника данных: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/?no-cache=1#local-data

Пример браузера: https://ej2.syncfusion.com/angular/demos/#/material/grid/default

Answer 2

Я нашел решение:

Прежде всего, вам нужна Angular Library для преобразования XML-данных в JSON .

Компонент

public XML_DataSet = 'XML from question';
public tableHeaders = [];
public tableValues = [];

     ngOnInit() {
        this.PrepareData();
      }

      PrepareData() {
        let x = this.XML_DataSet;
        const parser = new DOMParser();
        const xml = parser.parseFromString(x, 'text/xml');
        let json = this.xml2json.xmlToJson(xml); // XML is converted in JSON
        this.tableValues = json['FlexiDataSet']['Table'];

        for (let data of this.tableValues) {
          // Extract table headers
          this.tableHeaders = Object.keys(data);
          //Remove #text - unnecessary column
          this.tableHeaders.shift();
          break;
        }
      }

HTML

  <div>
    <table>
      <thead>
        <tr>
          <th *ngFor="let header of tableHeaders">
            {{header}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of tableValues">
          <td *ngFor="let header of tableHeaders">
            {{data[header]}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

Чтобы стилизовать таблицу, вы можете использовать учебное пособие на следующем ссылка .

Если вы хотите отобразить результаты в угловой сетке, измените HTML

  <div>
    <table mat-table #table [dataSource]="tableValues">
      <ng-container *ngFor="let column of tableHeaders" [matColumnDef]="column">
        <mat-header-cell *matHeaderCellDef>{{ column }}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{ row[column] }}</mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="tableHeaders"></mat-header-row>
      <mat-row *matRowDef="let row; columns: tableHeaders;"></mat-row>
    </table>
  </div>

Если вы хотите отобразить результаты в таблице Syncfusion EJ2, измените логику

HTML

<div>
  <ejs-grid #grid [dataSource]='tableValues'
            height="100%"
            width='100%'
            [toolbar]='toolbar'
            [searchSettings]='searchOptions'
            [allowFiltering]=true
            [filterSettings]='filterSettings'
            [allowSorting]=true
            [allowPaging]=true
            [pageSettings]='pageSettings'
            [allowGrouping]=true>
  </ejs-grid>
</div>

Компонент

  import { SearchSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';
  @ViewChild('grid')
  public grid: GridComponent;

  public grid: GridComponent;
  public toolbar: Object[] = ['Search'];
  public searchOptions: SearchSettingsModel = { fields: this.tableHeaders, operator: 'contains', ignoreCase: true };
  public filterSettings: Object = { type: "Menu" };
  public pageSettings: Object = { enableQueryString: true, pageSize: 20 };

SyncFusionGrid() {
    let columns = [];
    for (let data of this.tableHeaders) {
      let column = { field: data, headerText: data };
      columns.push(column);
    }
    this.grid.columns = columns;

    // Set column width
    for (let column of this.grid.columns) {
      column['width'] = '200';
    }
  }

Вызовите метод SyncFusionGrid (), когда у нас есть данные, которые нам нужно показать.В моем примере это конец метода PrepareData ()