ag-grid在angularjs中的使用入门

2018年5月31日

ag-grid在angularjs中的使用入门

ag-grid介绍

号称世界上最好的HTML5表格
支持绝大多数主流框架: 原生JavaScript/Angular/React/Vue/AngularJS/Polymer/Aurelia/Web Components
社区版和商业版，主要功能开放为社区版，商业版支持增强特性

安装

下载方式：

Bower
NPM
Github下载

引入

直接引入

<html>
<head>
    <script src="path-to-ag-grid-/ag-grid.js"></script>
    <script src="example1.js"></script>
</head>
<body>
    <div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
</body>
</html>

CommonJS

// ECMA 5 - using nodes require() method
var AgGrid = require('ag-grid');
// only include this line if you want to use ag-grid-enterprise
require('ag-grid-enterprise');

// ECMA 6 - using the system import method
import {Grid} from 'ag-grid/main';
// only include this line if you want to use ag-grid-enterprise
import 'ag-grid-enterprise/main';

使用

引入ag-grid后，需要在angularjs中注册ag-grid指令

// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);

// create your module with ag-Grid as a dependency
var module = angular.module("example", ["agGrid"]);

定义表格容器

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

配置表格显示核心配置项为列(columnDefs)和行数据(rowData)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://unpkg.com/ag-grid@17.1.1/dist/ag-grid.min.js"></script></head>
<body>

<div ng-app="example" ng-controller="exampleCtrl" style="height: 100%">
    <div ag-grid="gridOptions" class="ag-theme-balham" style="height: 100%;"></div>
</div>

    <script src="main.js"></script>
</body>
</html>

JavaScript:

agGrid.initialiseAgGridWithAngular1(angular);

var module = angular.module("example", ["agGrid"]);

module.controller("exampleCtrl", function($scope) {

    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

});

官方的基础实例

其他

事件和Digest周期

如有需要触发digest周期，需手动调用$scope.$apply()

销毁

使用ag-grid指令，不需要手动清除grid，指令使用的资源会自动释放

高级实例

表格组件

ag-grid支持自定义表格中的部分组件组件实例

angular编译

angularCompileRows：设置是否开启编译，默认是关闭的。由于性能原因。

angular编译实例

单元格模板

表格支持使用模板来渲染单元格模板渲染实例