ag-grid总结
ag-grid
文档地址
英文API文档:https://www.ag-grid.com/
中文API文档:https://www.itxst.com/ag-grid/tutorial.html
组件用法
<!-- 数据列表 -->
<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);},
}
更多推荐
所有评论(0)