ag-grid 學習

時間 2019-11-19
標籤 grid 學習简体版
原文原文鏈接
項目要將 angular 從 1.5升級到 5，ui-grid 在 5 中並不支持，因此爲了替換 ui-grid ，來學習了 ag-grid 。html
簡單來講，2 者相差並不大，使用方式也大體雷同，這裏用 js 直觀的記錄一下：ajax
<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>
效果圖：api
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。