Ag-Grid整理
魏书
API文档地址
英文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>
属性含义
- 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
- columnDefs 定义表格列
- 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, //最小宽度
},
{
// 年龄
headerName: '年龄',
field: 'age',
tooltipField: 'age'
}
];
},
- @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);
},
}
- defaultColDef 定义表格列的默认属性
data() {
return {
defaultColDef: {
sortable: true,//可排序
resizable: true,//可拖动改变列宽
filter: true //可过滤筛选
editable: true,//可编辑
},
}
}
- @selection-changed 表格选中行改变事件
@selection-changed="onSelectionChanged"
methods: {
onSelectionChanged() {},
}
- rowSelection 定义行选中的方式
:rowSelection="rowSelection"
data() {
return {
rowSelection: null,
}
},
beforeMount() {
// 只可以单行选中
this.rowSelection = 'single';
// 可以同时选中多行
this.rowSelection = 'multiple';
},
- enableBrowserTooltips
:enableBrowserTooltips="true"
鼠标悬浮在单元格上,将单元格内容以悬浮窗形势提示。（防止单元格内容过多或宽度不够导致内容显示不全）
- stopEditingWhenCellsLoseFocus
:stopEditingWhenCellsLoseFocus="false"
如果您希望网格在焦点离开单元格或网格时停止编辑，将该属性值设为true
- @cell-value-changed 表格单元格值改变事件
@cell-value-changed="onCellValueChanged"
methods: {
onCellValueChanged(event) {},
}
- isRowSelectable 表格记录是否有可选中的CheckBox
:isRowSelectable="isRowSelectable"
data() {
return {
// 控制checkbox只在满足条件的行显示
isRowSelectable: null,
}
},
beforeMount() {
// 表格记录中,type属性值为"1"时,该记录前显示CheckBox,当前记录可选中。
this.isRowSelectable = (rowNode) => {
return rowNode.data ? rowNode.data.type === '1' : false;
};
},
- editType 编辑类型
:editType="editType"
data() {
return {
editType: null, //编辑类型
}
},
beforeMount() {
// 整行编辑
this.editType = 'fullRow';
// 单元格级别的编辑不用给表格设置editType属性
},
- suppressRowClickSelection
:suppressRowClickSelection="suppressRowClickSelection"
data() {
return {
suppressRowClickSelection: true, //为true时,不可以通过点击当前行实现选中
}
},
- suppressClickEdit
:suppressClickEdit="suppressClickEdit"
data() {
return {
suppressClickEdit: true, //设置为true,点击单元格就不会编辑，使用自定义编辑事件
}
},
- 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找不到首先展示的)
},
}
},
- components 自定义的组件
:components="components"
data() {
return {
components: null,
}
},
beforeMount() {
this.components = {};
},
写法见【Ag-Grid自定义组件】:
- excelStyles
:excelStyles="excelStyles"
data() {
return {
excelStyles: null,//定义导出Excel的样式
}
}
API常用方法
网址参照https://www.ag-grid.com/javascript-data-grid/grid-api/
- sizeColumnsToFit(); //列宽自适应
- 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);
},
}
代码参照
https://gitee.com/client-code-accumulation/tree/master/Ag-Grid
类似资料：