ag-grid 在 angular 1.5 中使用

1、首先引入模塊：

 

2、然后引入樣式：

 

3、接着配置相關數據：

　　//行內數據
    var rowData = [
        {name: "Toyota", model: "Celica", price: 35000,operation: 'a', folder: true, children: [{name:'3x', model:'sss', price:37000}]},
        {name: "Ford", model: "Mondeo", price: 32000,folder: true, open: true, children: [{name:'test', model:'test', price:100}]},
        {name: "Porsche", model: "Boxter", price: 72000}
    ];
    //列屬性設置
    var columnDefs = [
        {
            headerName: 'Name',
            field: 'name',
            width: 400,
            enableRowGroup: true,
            checkboxSelection: function (params) {
                // we put checkbox on the name if we are not doing grouping
                return params.columnApi.getRowGroupColumns().length === 0;
            },
            headerCheckboxSelection: function (params) {
                // we put checkbox on the name if we are not doing grouping
                return params.columnApi.getRowGroupColumns().length === 0;
            },
            headerCheckboxSelectionFilteredOnly: true,
            cellRenderer: 'group',
            cellRendererParams: {
                innerRenderer: function (params) { return params.data.name; },
                suppressCount: true
            }
        },
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"},
        {headerName: "Operation", field: "operation", cellRenderer: function(params) { return '<button ng-click="btnClick(1);">click1</button> <button onclick="btnClick(2);">click2</button>'}}
    ];
    //表格設置
    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        animateRows: true,
        enableColResize: true,
        rowHeight: 30,
        rowSelection: 'multiple',
        enableSorting: true,
        suppressDragLeaveHidesColumns: true,
        //行內點擊觸發事件
        onRowClicked: function(event) {
            //event.data 選中的行內數據，event.event 為鼠標事件，等其他。可以log自己看一下
            console.log('a row was clicked', event);
        },
        //列寬度改變觸發
        onColumnResized: function(event) { console.log('a column was resized'); },
        //表格加載完成觸發
        onGridReady: function(event) { console.log('the grid is now ready'); },
        //單元格點擊觸發
        onCellClicked: function(event) { console.log('a cell was cilcked'); },
        //單元格雙擊觸發
        onCellDoubleClicked: function(event) { console.log('a cell was dbcilcked'); },

        //子節點顯示
        getNodeChildDetails: function(file) {
            if (file.folder) {
                return {
                    group: true,
                    children: file.children,
                    expanded: file.open
                };
            } else {
                return null;
            }
        }
    };

 

4、最后在頁面中調用配置：（這里我用的是pug文件，同理html）

 

最后效果：