ag-grid总结

最新推荐文章于 2025-02-18 01:44:48 发布

gz775

最新推荐文章于 2025-02-18 01:44:48 发布

阅读量2k

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.youkuaiyun.com/qq_38679823/article/details/127751224

版权

文档地址
英文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.youkuaiyun.com/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);

},
}

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