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. ...
激光雷达点云---点云二维栅格化处理
激光点云栅格化处理激光点云地图存储的是传感器对环境的原始扫描点云,优点是保留信息完整,缺点是计算量大.不能直接用于导航避障;特征地图存储的是环境中的特殊几何特征,如电线杆.路标.障碍物边缘等,其 ...

Ag-Grid Column的定义与更新

Columns定义

React中声明式定义

通过gridOptions定义列

通过columnDefs定义列

Columns更新

添加删除列

更新列定义

更新列状态

空值与未定义

列排序

列匹配原则

触发列事件

获取列定义

Ag-Grid Column的定义与更新相关推荐

最新文章

热门文章