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

我找到了解决方法：

首先，您需要将Angular库添加到convert XML data to 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

要样式化表格，您可以使用下一个link上的教程。

如果要在Angular Grid中显示结果，请更改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（）的结尾

Answer 2

您已经完成了几乎达到要求的步骤。最后一步是您需要使用下面的入门链接创建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

从XML DataSet（ado.net）生成表（角度）

2 个答案: