ag-grid总结

文档地址
英文API文档:https://www.ag-grid.com/
中文API文档:https://www.itxst.com/ag-grid/tutorial.html

JavaScript Data Grid: Grid Size

组件用法
<!-- 数据列表 -->
<ag-grid-vue ref="multipleTable" class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" 
        @grid-ready="onGridReady" :defaultColDef="defaultColDef" @selection-changed="onSelectionChanged" 
        :rowSelection="rowSelection" :enableBrowserTooltips="true" :stopEditingWhenCellsLoseFocus="false"
        @cell-value-changed="onCellValueChanged" :isRowSelectable="isRowSelectable" :editType="editType"
        :suppressRowClickSelection="suppressRowClickSelection" :suppressClickEdit="suppressClickEdit"
        :sideBar="sideBar" :components="components" :excelStyles="excelStyles">
</ag-grid-vue>
 

属性含义
1.class表格主题 
class="table ag-theme-balham" 
Ag-Grid表格的主题有 5 种
① ag-theme-alpine
② ag-theme-alpine-dark
③ ag-theme-balham
④ ag-theme-balham-dark
⑤ ag-theme-material
样式种类整理参照来源:https://blog.csdn.net/WQearl/article/details/106636786 
 

2.columnDefs 定义表格列
3.rowData 表格展示的数据
data() {
    return {
        columnDefs: null, //表格默认展示列
        rowData: null, //画面显示表格数据,查询后赋值
    }
},
beforeMount() {
    this.columnDefs = [{
            // ID
            headerName: 'ID', //序号
            field: 'id',
            hide: true //默认不显示
        },
        {
            // 姓名
            headerName: '姓名', //表格显示列名
            field: 'name', //该列对应的后台返回数据中的Key
            tooltipField: 'name', //鼠标悬浮是单元格内容的tooltip提示
            checkboxSelection: true, //该列前带CheckBox复选框
            pinned: 'left', //设置当前列为固定列,且固定在左侧
            width: 90, //宽度
            minWidth: 90, //最小宽度

            wrapText: true,//单元格文字自动换行

            autoHeight: true,//单元格根据内容自动调整高度

        },
        {
            // 年龄
            headerName: '年龄',
            field: 'age',
            tooltipField: 'age'
        }
    ];
},

4.@grid-ready 表格初期化
@grid-ready="onGridReady"
methods: {
    //ag-grid创建完成后执行的事件
    onGridReady(params) {
        // 获取gridApi
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        // 调整列宽自适应
        let allColumnIds = [];
        this.columnApi.getAllColumns().forEach(function(column) {
            allColumnIds.push(column.colId);
        });
        this.columnApi.autoSizeColumns(allColumnIds, false);
    },
}
 

5.defaultColDef 定义表格列的默认属性
 data() {
    return {
        defaultColDef: {
            sortable: true,//可排序
            resizable: true,//可拖动改变列宽
            filter: true  //可过滤筛选
            editable: true,//可编辑
        },
    }
}

6.@selection-changed 表格选中行改变事件
 @selection-changed="onSelectionChanged"
methods: {
    onSelectionChanged() {},
}

7.rowSelection 定义行选中的方式
 :rowSelection="rowSelection"
data() {
    return {
        rowSelection: null,
    }
},
beforeMount() {
    // 只可以单行选中
    this.rowSelection = 'single';
    // 可以同时选中多行
    this.rowSelection = 'multiple';
},

8.enableBrowserTooltips
 :enableBrowserTooltips="true"
鼠标悬浮在单元格上,将单元格内容以悬浮窗形势提示。（防止单元格内容过多或宽度不够导致内容显示不全）

9.stopEditingWhenCellsLoseFocus
 :stopEditingWhenCellsLoseFocus="false"
如果您希望网格在焦点离开单元格或网格时停止编辑，将该属性值设为true 

10.@cell-value-changed 表格单元格值改变事件
 @cell-value-changed="onCellValueChanged"
methods: {
    onCellValueChanged(event) {},
}

11.isRowSelectable 表格记录是否有可选中的CheckBox
 :isRowSelectable="isRowSelectable"
data() {
    return {
        // 控制checkbox只在满足条件的行显示
        isRowSelectable: null,
    }
},
beforeMount() {
    // 表格记录中,type属性值为"1"时,该记录前显示CheckBox,当前记录可选中。
    this.isRowSelectable = (rowNode) => {
        return rowNode.data ? rowNode.data.type === '1' : false;
    };
},

12.editType 编辑类型
 :editType="editType"
data() {
    return {
        editType: null, //编辑类型
    }
},
beforeMount() {
    // 整行编辑
    this.editType = 'fullRow';
    // 单元格级别的编辑不用给表格设置editType属性
},

13.suppressRowClickSelection
 :suppressRowClickSelection="suppressRowClickSelection"
data() {
    return {
        suppressRowClickSelection: true, //为true时,不可以通过点击当前行实现选中
    }
},

14.suppressClickEdit
 :suppressClickEdit="suppressClickEdit"
data() {
    return {
        suppressClickEdit: true, //设置为true,点击单元格就不会编辑，使用自定义编辑事件
    }
},

 15.sideBar 表格侧边栏
:sideBar="sideBar"
data() {
    return {
        // 使用默认的侧边栏,【列定义】和【过滤器】都展示,且默认展开并首显【列定义】
        sideBar: true,
        // 只展示【列定义】的勾选侧边栏
        sideBar: 'columns',
        // 只展示【过滤器】的勾选侧边栏
        sideBar: 'filters',
        // 自定义侧边栏(一)
        sideBar: {
            toolPanels: [
                {
                    id: 'columns',
                    labelDefault: 'Columns',
                    labelKey: 'columns',
                    iconKey: 'columns',
                    toolPanel: 'agColumnsToolPanel',
                    minWidth: 225,
                    maxWidth: 225,
                    width: 225
                },
                {
                    id: 'filters',
                    labelDefault: 'Filters',
                    labelKey: 'filters',
                    iconKey: 'filter',
                    toolPanel: 'agFiltersToolPanel',
                    minWidth: 180,
                    maxWidth: 400,
                    width: 250
                }
            ],
            position: 'left',//侧边栏在表格左侧显示
            defaultToolPanel: 'filters'//首先展示【过滤器】的勾选栏
        },
        // 自定义侧边栏(二)
        sideBar: {
            toolPanels: [{
                id: 'columns',
                labelDefault: 'Columns',
                labelKey: 'columns',
                iconKey: 'columns',
                toolPanel: 'agColumnsToolPanel',
                minWidth: 225,
                width: 225,
                maxWidth: 225,
            }, ],//侧边栏只有【列定义】的勾选栏
            position: 'right', //侧边栏在表格右侧显示
            defaultToolPanel: null, //默认收起侧边栏(指定为null找不到首先展示的)
        },
    }
},
 

16.components 自定义的组件
:components="components"
data() {
    return {
        components: null,
    }
},
beforeMount() {
    this.components = {};
},
写法见【Ag-Grid自定义组件】
 

 17.excelStyles
:excelStyles="excelStyles"
data() {
    return {
        excelStyles: null,//定义导出Excel的样式
    }
}
 

 18.getRowStyle设置列样式
 @getRowStyle="changRowColor"
methods: {
    changRowColor(params) {

         return {

             'background-color': '#ffd3d3'     //颜色可以用英文、rgb以及十六进制

         }

    },
}

19.tree树形结构数据(分组)
详情请看官网Angular Data Grid: Tree Data

Data格式如下（不支持嵌套children的数据结构）：

:treeData="true" 

@autoGroupColumnDef="autoGroupColumnDef" //设置分组列的展示内容

@getDataPath="getDataPath" //分组的路径（树形结构展开的依据）

methods: {
    autoGroupColumnDef(params) {   

         headerName: '班级（分组后的名称）',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
         minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width，maxWidth；
         sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
         pinned: 'left', // 将分组列固定在左边
         cellRendererParams: {
             suppressCount: true,  // 不显示分组列右边的计数个数
         }

    },

    getDataPath(data) {

         return data.path;

    },

    onGridReady(params: any): void {

        this.gridApi = params.api;

        this.columnApi = params.columnApi;

        this.columnOptions = params.api.getColumnDefs();

        // 展开所有折叠行

        this.gridApi.expandAll();  

  }

}

默认展开分组:使用groupDefaultExpanded

默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）;

API常用方法
网址参照https://www.ag-grid.com/javascript-data-grid/grid-api/
sizeColumnsToFit(); //列宽自适应（fit）
getAllColumns();//获取全部定义列
autoSizeColumns();//列宽自适应
startEditingCell(params); //打开编辑,需要传参
stopEditing();//停止编辑
getSelectedRows();//获取选中行的数据,返回值为数组形式
getSelectedNodes();//获取选中行的全部内容(包含rowIndex),返回值为数组形式
refreshCells(params);//刷新单元格,需要传参
deselectAll();//清空表格选中行
getColumnState();//获取全部列(包含列的显隐状态)
表格列定义中常用方法
cellRender
valueParser
valueGetter
valueFormatter
 用法注意
cellRender: function(params) {
    // params为当前行的数据
    console.log(params);
}
cellRender: params => {
    // params包含当前行全部属性,params.data为数据
    console.log(params.data);
}
 

Ag-grid导出
<!-- 导出按钮 -->
<el-button type="info" icon="el-icon-download" size="mini" @click="exportExcel()">导出</el-button>
data() {
    return {
        excelExportStyles:{
            fileName:'',//导出Excel文件名称
            sheetName:'',//导出Excel文件中Sheet页名
        },
    }
},
methods: {
    // 【导出】
    exportExcel: function() {

        // 设置导出Excel的文件名
        let date = new Date();
        let excelTitleTime = date.getFullYear() + '' + (date.getMonth() + 1) + '' + date.getDate() + '' + 
                                        date.getHours() + '' + date.getMinutes() + '' + date.getSeconds();
        // 设置导出Excel的文件名
        this.excelExportStyles.fileName = "tableData" + excelTitleTime + '.xlsx';
        // 设置导出Excel的Sheet页名
        this.excelExportStyles.sheetName = productParams.productName;
        // 导出Excel文件
        this.gridApi.exportDataAsExcel(this.excelExportStyles);

    },
}
 
————————————————
版权声明：本文为CSDN博主「海绵饱饱_wk」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38679823/article/details/127751224