一、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 表格宽度自适应 -