Question

我一直试图解决将行更新为ag网格之类的问题，该行始终以区分大小写的顺序进行更新。

这里是场景，

实际结果是

A => While updating the row A => a
B
C
D

结果是

 B
 C
 D
 a

预期结果是

A => While updating the row A => a
B
C
D

结果是

a
B
C
D

Answer 1

请参阅此javascript-grid-sorting

app / app.component.ts

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [animateRows]="true"
      [sortingOrder]="sortingOrder"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private sortingOrder;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
        sortingOrder: ["asc", "desc"]
      },
      {
        headerName: "Age",
        field: "age",
        width: 90,
        sortingOrder: ["desc", "asc"]
      },
      {
        headerName: "Country",
        field: "country",
        width: 120,
        sortingOrder: ["desc", null]
      },
      {
        headerName: "Year",
        field: "year",
        width: 90,
        sortingOrder: ["asc"]
      },
      {
        headerName: "Date",
        field: "date",
        width: 110
      },
      {
        headerName: "Sport",
        field: "sport",
        width: 110
      },
      {
        headerName: "Gold",
        field: "gold",
        width: 100
      },
      {
        headerName: "Silver",
        field: "silver",
        width: 100
      },
      {
        headerName: "Bronze",
        field: "bronze",
        width: 100
      },
      {
        headerName: "Total",
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = { sortable: true };
    this.sortingOrder = ["desc", "asc", null];
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

index.html

<!DOCTYPE html>
 <html lang="en">
<head>
    <title>Angular 2 ag-Grid starter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style> html, body { margin: 0; padding: 0; height: 100%; } </style>


    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.17/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@21.0.1\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@21.0.1\/","ag-grid-react":"npm:ag-grid-react@21.0.1\/","ag-grid-angular":"npm:ag-grid-angular@21.0.1\/","ag-grid-vue":"npm:ag-grid-vue@21.0.1\/"};
    </script>

    <script src="systemjs.config.js"></script>

    <script>
    System.import('main.ts').catch(function(err){ console.error(err); });
    </script>

</head>
<body>
    <my-app>Loading ag-Grid example&hellip;</my-app>
</body>
</html>

app / app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";

// ag-grid
import { AgGridModule } from "ag-grid-angular";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpClientModule,
    AgGridModule.withComponents([])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ag网格：删除区分大小写的排序

1 个答案: