Ag-Grid Column的定义与更新
Columns定义
React中声明式定义
<AgGridReactrowSelection="multiple"rowData={rowData}
><AgGridColumn field="make" sortable={true} filter={true} checkboxSelection={true}></AgGridColumn><AgGridColumn field="model" filter={true}></AgGridColumn><AgGridColumn field="price" sortable={true}></AgGridColumn>
</AgGridReact>
通过gridOptions定义列
const [gridOptions, setGridOptions] = useState({columnDefs: [{field: 'make',headerName: "Make"},{field: 'model',headerName: "Model",filter: true},{field: 'price',headerName: "Price",sortable: true}]
}, [])
<AgGridReact gridOptions={gridOptions} rowData={rowData}></AgGridReact>
通过columnDefs定义列
const [columnDefs, setColumnDefs] = useState([{field: 'make',headerName: "Make"},{field: 'model',headerName: "Model",filter: true},{field: 'price',headerName: "Price",sortable: true}
], [])
<AgGridReact columnDefs={gridOptions.columnDefs} rowData={rowData}></AgGridReact>
Columns更新
添加删除列
- 通过更新提供给grid的“列定义”列表,可以添加和删除列。
- 更新后如果原有的列仍存在,那么保留用于该列的任何状态(如排序,过滤器,宽度,列位置)。
const deleCol = () => {setGridOptions({columnDefs: [{field: 'make',headerName: "Make"},{field: 'price',headerName: "Price",sortable: true}]})
}
更新列定义
- 列定义的所有属性都可以更新,如headerName,不能单独更新一列的“列定义”,要应用一组新的列定义。
- 只要设置了新列,标题就会刷新。但是单元格不会刷新,因此需要调用 api.refreshCells({force: true})强制刷新。
- 对“列定义”进行更新之前,“列”的任何大小调整,重新排序,排序等均保持不变。
更新列状态
- 列属性的值就是状态信息,只更新列状态而不是列定义的其他部分,可以考虑使用列状态API
- 使用初始属性列定义创建grid后使用网格UI交互产生变化(比如列排序),再次使用初始属性列定义不会有任何变化
- 删除列后,使用初始属性列定义会恢复默认状态
- 使用初始属性列定义创建grid后使用网格UI交互产生变化(比如列排序),“使用State设置列”,则列的状态将更改,并且通过UI所做的更改将丢失。
//列定义
const [columns, setColumns] = useState(columnsWithState);
// 使用State更新列
const newColumns = [...columnsWithState];
newColumns[0]['dirty'] = new Date().getMilliseconds();
setColumns(newColumns);
有状态属性 | 初始属性 | 描述 |
---|---|---|
width | initialWidth | 列的宽度 |
flex | initialFlex | 用于设置此列宽度的flex值 |
hide | initialHide | 是否应隐藏此列 |
pinned | initialPinned | 是否应固定此列 |
sort | initialSort | 应用于此列的排序 |
sortIndex | initialSortIndex | 应用排序的顺序(如果是多列排序 |
rowGroup | initialRowGroup | 此列是否应为行组 |
rowGroupIndex | initialRowGroupIndex | 此列是否应为行组以及按什么顺序 |
pivot | initialPivot | 如果此列应该是枢轴 |
pivotIndex | initialPivotIndex | 此列是否应该成为枢轴,以什么顺序排列 |
aggFunc | initialAggFunc | 通过行分组或数据透视来聚合此列的函数 |
空值与未定义
- 将有状态属性设置为undefined网格时,将忽略该属性。
- 将有状态属性设置为null网格时,将清除该属性。
- 如果您不想破坏任何列状态,则不要设置状态属性,因为默认情况下为undefined。
例如,该设置pinned=null将清除固定在列上的固定,而 pinned=undefined意味着网格将保留该列的固定状态
列排序
- 新的和原来的列定义只发生顺序变化时,用户对网格所做的列的任何重新排序都不会丢失。
- 如果需要进行更新,则设置grid属性applyColumnDefOrder=true。
列匹配原则
鉴于field不是唯一标识符,网格将使用以下规则来匹配列:
- 如果colId提供,请使用colId
- 否则,如果field提供,则使用field
- 否则在列定义实例上使用对象相等性进行匹配
要使网格正确匹配Columns,请确保每个Column具有a field或colId。
触发列事件
更新列定义或通过网格UI交互产生变化,将引发列事件。
<AgGridReactonSortChanged={e => console.log('Event Sort Changed', e)}onColumnResized={e => console.log('Event Column Resized', e)}onColumnVisible={e => console.log('Event Column Visible', e)}
>{ columns.map(column => <AgGridColumn {...column}></AgGridColumn>)}
</AgGridReact>
// 为了抑制调用时引发的事件,请applyColumnState() 设置grid属性
// suppressColumnStateEvents=true。
获取列定义
gridOptions.api.getColumnDefs();
Ag-Grid Column的定义与更新相关推荐
- Ag Grid 表格树 Vue Data Grid: Tree Data
目录 Tree Data 模式 提供 Tree Data 配置组列 Auto Column Group Custom Column Group 示例:组织层次结构 填充组 Tree Data 聚合(合 ...
- 将ALV GRID中改变的值更新到ALV内表中
首先编辑ALV的CALLER_EXIT事件,在call back的subroutine中做如下处理 CALL FUNCTION 'GET_GLOBALS_FROM_SLVC_FULLSCR' IMPO ...
- extjs grid显示html,Extjs grid column里添加button等html标签,并增加点击事件
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. ...
- column属性 extjs_extjs动态改变 grid column Header属性
dataArray=""> name="couponDataGrid" id="couponDataGrid" height=&quo ...
- [转]Format a ui-grid grid column as currency
本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 Yo ...
- ExtJS Grid Column Number
{xtype: 'numbercolumn',text: '亏盈数量',width: 130,dataIndex: 'LossOrProfitNum',editor: {xtype: 'numberf ...
- 【转】wpf从我炫系列2----布局控件的使用(下)
4. GRID控件 Grid控件可以是说是wpf中功能最强大和使用最多的控件.它有点类似于HMTL网页布局中的表格,可以自定义行列显示,并可以合并某些行和列. 使用<Grid.Ro ...
- 07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点) 一.布局类控件 Grid.StackPanel. ...
- 激光雷达点云---点云二维栅格化处理
激光点云栅格化处理 激光点云地图存储的是传感器对环境的原始扫描点云,优点是保留信息完整,缺点是计算量大.不能直接用于导航避障;特征地图存储的是环境中的特殊几何特征,如电线杆.路标.障碍物边缘等,其 ...
最新文章
- 编写代码,移除未排序的链表中的重复节点
- hdu 6852Path6(最短路+最小割)
- 收发一体超声波测距离传感器模块_一文了解超声波液位计
- 项目管理办公室 PMO
- 2018杭州电子科技大学计算机研究生复试笔试编程题第三题
- java的基本循环结构_Java基础之(九):循环结构
- 开源项目filepond的独立自由之路:城市套路深
- 网易云音乐登陆显示服务器错误,网易云音乐-登录业务流程还原
- 25B无人直升机调试(Tuning)
- authc过滤器 shiro_shiro原理之过滤器
- 【网站】比较知名的大型公司官网清单可以收藏关注一下,欢迎您来补充
- python实现.jpeg转.jpg
- 实变函数---不可测集的一个例子
- IDEA 最新激活方法
- java android 计算两个日期之间的天数
- 职场蘑菇不气馁 三招修炼成向日葵
- 易安卓E4A载入创建新窗口
- u盘打不开提示格式化?里面的数据怎么办?
- UE5 官方案例Lyra 全特性详解 9.蓝图消息系统
- python定时器每隔几秒执行一次
热门文章
- android 按钮并排左右_用户界面-并排2个按钮-android布局
- c语言小球反弹的编程,少儿创意编程scratch一反弹小球游戏教程
- 油田智能化远程监控系统_油田远程监控管理研究
- 自助建站做站都有哪些步骤。
- 几何画板在现代教学中的应用
- Python可视化30|matplotlib-辅助线(axhline|vlines|axvspa|axhspan)
- 如何快速批量给视频统一去色的方法操作分享
- 底层移植之RBL, UBL, Uboot的关系
- 自定义圆形进度条,金额百分比
- Mac隐藏显示隐藏文件方法