pm-ag-grid v0.1.4
一、API # Table props # 属性 | 说明 | 类型 | 默认值 tableData 显示表格的结构化数据 Array [] columnDefs 表格列的配置描述,具体项见后文 Array [] border 是否显示纵向边框 Boolean false width 表格宽度，单位 px Number | String 自动 height 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 Number | String - rowHeight 设置表格行高 Number 40 headerHeight 设置表头行高 Number 40 animateRows 设置为true以启用行动画 Boolean false cellChangeFlash 开启视图更新高亮 Boolean false defaultColDef 统一配置columnDefs里面的项,这里配置了每一列都生效,如果都配置了优先使用columnDefs里面的配置 Object {} pagination 是否开启分页 Boolean false pageSize 每页加载多少行 Number 4 autoPageSize 每页加载的行数由ag-Grid表格高度自动调整 Boolean false getRowId 如果您使用网格回调getRowId()提供行id，那么网格将使用键将事务中提供的数据与网格中的数据进行匹配 Function -
二、事件 # Table events # 事件名 | 说明 | 返回值 grid-ready 表格加载完成触发 table Api
cellEditingStarted 单元格开始编辑 .colDef : 单元格配置 .data : 行数据 .rowIndex : 行索引 .value : 正在编辑单元格的值
cellEditingStopped 单元格结束编辑 .colDef : 单元格配置 .data : 行数据 .newValue : 单元格编辑后的值 .oldValue : 单元格编辑前的值 .rowIndex : 行索引 .valueChanged : 值是否发生改变
cellClicked 单元格点击事件 .colDef : 单元格配置 .data : 行数据 .eventPath : 表格元素 .rowIndex : 行索引 .value : 单元格的值
doubleCellClicked 单元格双击事件 .colDef : 单元格配置 .data : 行数据 .eventPath : 表格元素 .rowIndex : 行索引 .value : 单元格的值
rowClicked 行点击事件 .data : 行数据 .eventPath : 表格元素 .rowIndex : 行索引
columnMoved 表头拖动事件 .field : 当前拖动字段 .finished : 拖动是否结束,完成true 反之false .toIndex : 拖动完成的列索引
columnDefs #
列描述数据对象，是 columns 中的一项
属性 | 说明 | 类型 | 默认值
field 对应列内容的字段名 String -
headerName 列头显示文字 String field
sortable 是否启用排序 Boolean false
sortingOrder 支持排序配置搭配sortable属性使用 配置项'asc', 'desc', null Array 配置项全部
width 列宽 Number -
minWidth 最小列宽 Number -
maxWidth 最大列宽 Number -
marryChildren 希望列可以永远粘合在一起,避免拖拽时候列组分开,适用于多级表头 Boolean false
editable 是否可编辑 Boolean false
lockVisible 是否锁定列头在网格内 Boolean false
cellStyle 单元格自定义样式 Object -
checkboxSelection 是否开启勾选框 Boolean false
headerCheckboxSelection 列头是否开启勾选框 Boolean false
children 多级表头 Array -
valueFormatter 控制表格显示的值 Function | 表达式 -
valueGetter 控制表格新值 Function | 表达式 -
valueParser 值解析器,在编辑时值解析器的返回值应该是解析的结果，即返回你想要存储在数据中的值。 Function -
resizable 控制列头是否可拖动 Boolean false
pinned 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 String -
lockPinned 搭配pinned使用, 控制网格列头不能拖动 Boolean false
suppressMovable 禁止列拖动 Boolean false
rowDrag 行是否可以支持拖拽 Boolean false
hide 控制当前列是否隐藏 Boolean false
autoHeight 自适应行高 Boolean false
wrapText 内容超出换行 Boolean false
tooltipField 单元格悬浮显示字段 String -
headerTooltip 列标题悬浮显示内容 String -
operationBtn 显示操作按钮 Array -
使用案例 : operationBtn:
{
title: '删除',
onclick: () => {
console.log('删除', 111)
}
},
{
title: '修改',
onclick: () => {
console.log('修改', 111)
}
}
cellRenderer 自定义单元格显示内容 String -
使用案例 :
1. 自定义一个template j文件夹
2. import 引入template j文件夹
3. 在components里面进行组件注册
4. cellRenderer : components注册的组件
cellEditor 编辑时显示其他控件 String -
可选值 agLargeTextCellEditor 长文本框
agSelectCellEditor 下拉框
agNumberCellEditor 数字框
agDateCellEditor 日期
agDateStringCellEditor 日期
agCheckboxCellEditor 勾选框
cellEditorParams 搭配cellEditor使用 Object -
cellEditor是长文本框 : cellEditorParams使用例如: { maxLength: '300',cols: '50',rows: '6'}
cellEditor是下拉框 : cellEditorParams使用例如: { values: "男", "女" }
cellEditor是数字框 : cellEditorParams使用例如: { precision: 0 }
cellEditor是日期 : cellEditorParams使用例如: {min: '2000-01-01', max: '2019-12-31'}
Table methods Api #
事件名 | 说明 | 传参
showLoadingOverlay 开启表格loading加载 -
hideOverlay 关闭表格loading加载 -
setPinnedTopRowData 设置冻结行,固定行出现在表的正常行上方 Array | Object
setPinnedBottomRowData 设置冻结行,固定行出现在表的正常行下方 Array | Object
getSelectedRows 获取当前所有选中行数据 -
setRowData 设置页面视图表格显示结构化数据 Array
exportDataAsCsv 导出表格数据格式为Csv -
suppressRowDragging 默认情况下，在拖动行时，托管行拖动会移动行,防止默认行为 true
setInputFocusColor 设值可编辑单元格聚焦的边框颜色 String
setFocusColor 设置不可编辑单元格聚焦的边框颜色 String
getRowNode 根据行id(索引)获取当前行数据 String | Number
del 删除页面视图显示的数据 Array | Object
get 获取页面视图显示的数据 -
add 添加页面视图显示的数据 参数1. Array | Object格式数据 参数2. 插入索引
update 修改页面视图显示的数据 Array | Object
sizeColumnsToFit 表格宽度自适应 -