ag-grid 学习

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

项目要将 angular 从 1.5升级到 5，ui-grid 在 5 中并不支持，所以为了替换 ui-grid ，来学习了 ag-grid 。

简单来说，2 者相差并不大，使用方式也大致雷同，这里用 js 直观的记录一下：

<html>
<head>
    <!-- reference the ag-Grid library-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/10.1.0/ag-grid.js"></script>-->
    <script src="ag-grid.js"></script>
    <style>
        .orange {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>Simple ag-Grid Example</h1>

    <!-- the div ag-Grid will use to render it's data -->
    <div id="myGrid" style="height: 200px;width:700px" class="ag-fresh"></div>
    
    <p>        
        <button type='button' onclick="deselectAllFnc()">clear selection</button>
        <button type='button' onclick="selectAllFnc()">select all</button>
    </p>
    <script>
        // row data ，行内数据
        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}
        ]
        // column definitions，表格列属性
        var columnDefs = [
            {
                headerName: 'Name',
                field: 'name',
                width: 200,
                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 onclick="btnClick(1);">click1</button> <button onclick="btnClick(2);">click2</button>'}}    
        ]
        // Grid Definition 
        // let the grid know which columns and what data to use
        // 表格初始化配置
        var gridOptions = {
            // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application
            //列标题设置
            columnDefs: columnDefs,        
            //行内数据插入
            rowData: rowData,    
            animateRows: true,
            
            // PROPERTIES - simple boolean / string / number properties    
            //是否支持列宽调整
            enableColResize: true,
            //行高设置
            rowHeight: 26,
            //单行选中，"multiple" 多选（ctrl）,"single" 单选
            rowSelection: 'multiple',
            // enable sorting ，是否支持排序
            enableSorting: true,
            // enable filtering ，是否可以筛选
            enableFilter: true,
            //默认筛选字段
            //quickFilterText: 's',
            //选中组可选中组下子节点
            //groupSelectsChildren: true,
            //true的话，点击行内不会进行行选择
            suppressRowClickSelection: true,
            //阻止列拖拽移动
            //suppressMovableColumns: true,
            //阻止列拖拽出表格，列移除
            suppressDragLeaveHidesColumns: true,
            //给整行加样式，
            getRowClass: function(params) { return (params.data.name === 'Ford') ? "orange" : null; },
            
            // EVENTS - add event callback handlers
            onModelUpdated: function(event) { console.log('model updated'); },
            //行内点击触发事件
            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'); },
            
            onCellContextMenu: function(event) { },
            onCellValueChanged: function(event) { },
            onCellFocused: function(event) { },
            onRowSelected: function(event) { },
            onSelectionChanged: function(event) { },
            onBeforeFilterChanged: function(event) { },
            onAfterFilterChanged: function(event) { },
            onFilterModified: function(event) { },
            onBeforeSortChanged: function(event) { },
            onAfterSortChanged: function(event) { },
            onVirtualRowRemoved: function(event) { },
            
            // CALLBACKS
            isScrollLag: function() { return false; },
            
            
            getNodeChildDetails: function(file) {
                if (file.folder) {
                    return {
                        group: true,
                        children: file.children,
                        expanded: file.open
                    };
                } else {
                    return null;
                }
            }            
        }
        
        //取消选中状态
        function deselectAllFnc() {
            gridOptions.api.deselectAll();
        }
        //全选
        function selectAllFnc() {
            gridOptions.api.selectAll();
        }
        
        function btnClick(value) {
            console.log(value);
        }
        
        // wait for the document to be loaded, otherwise,
        // ag-Grid will not find the div in the document.
        document.addEventListener("DOMContentLoaded", function() {
            // lookup the container we want the Grid to use
            var eGridDiv = document.querySelector('#myGrid');

            // create the grid passing in the div to use together with the columns & data we want to use
            new agGrid.Grid(eGridDiv, gridOptions);
            
            
            // create handler function，增加监听事件
            function myRowClickedHandler(event) {
                console.log('the row was clicked');
            }
            // add the handler function
            gridOptions.api.addEventListener('rowClicked', myRowClickedHandler);
        });
    </script>
</body>
</html>