Как настроить Ag-grid на AngularJS 1.6

Question

Я следовал руководству, чтобы легко настроить agGrid для AngularJS, дело в том, что я также использую машинопись вместо javascript.Я на самом деле сделал:

npm install ag-grid
var AgGrid = require('ag-grid');
AgGrid.initialiseAgGridWithAngular1(angular);
var module = angular.module("example", ["agGrid"]);

Затем используйте его в моем html, и он показывает:

<div ag-grid="$ctrl.gridOptions" class="ag-theme-balham" style="height: 100%;"></div>

Но я не получаю никакого CSS.

Итак, я попытался добавить некоторые требования:

require("ag-grid/dist/styles/ag-grid.css")
require("ag-grid/dist/styles/ag-theme-balham.css")    
var AgGrid = require('ag-grid');

Но все еще не работают какие-либо идеи?Спасибо

Answer 1

Я наконец-то узнаю, как выглядят мысли в официальном документе.

Итак, есть шаги, чтобы легко его использовать:

• Установить зависимость npm install ag-grid-community
• В ваших app.ts:
  • добавьте вашу ссылку var AgGrid = require('ag-grid-community');
  • Инициализируйте AgGrid AgGrid.initialiseAgGridWithAngular1(angular);
  • Добавьте ее в основной модуль

В вашем классе или в моем случае мой компонент

• Ссылка import { Grid, GridOptions} from "ag-grid-community";
• И ваши стили (Вы также можете добавить его в vendor.ts)

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

Тогда используйте свою сетку!

• Добавьте в свой конструктор

this.gridOptions = {
  columnDefs: this.createColumnDefs(),
  rowData: this.createRowData()
};
let eGridDiv:HTMLElement = <HTMLElement>document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

• Определите свой контент

private createColumnDefs() {
    return [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];
}

private createRowData() {
    return [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];
}

Answer 2

Я использую базовую тему, и она работает для меня.Ниже приведен код для того же.

    //**Layout Page**
    <link rel="stylesheet" href="~/Content/ag-grid.css">

    //If you're using the bundled version, you can reference the ag-Grid-Enterprise library via CDN
    <script src="_url_to_your_chosen_cdn_/ag-grid-enterprise.js"></script>

    //Load from Local 
    //<script src="node_modules/ag-grid/dist/ag-grid-enterprise.js"></script>

    <script type="text/javascript">
            // Update angular grid license key. If you are using Enterprise Version
            agGrid.LicenseManager.setLicenseKey("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
            // get ag-Grid to create an Angular module and register the ag-Grid directive
            agGrid.initialiseAgGridWithAngular1(angular);

            var app = angular.module("AppName", ["agGrid"]);            
    </script>

    //**View**
    <div ag-grid="agGridOptions" class="ag-theme-fresh" style="height: 400px;"></div>

    //**ControllerJS**
    $scope.agGridOptions = {
        angularCompileRows: true,
        columnDefs: columnDefs,
        rowData: rowData,
    }