Ag-Grid Column的定义与更新

Columns定义

React中声明式定义

<AgGridReact
	rowSelection="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不是唯一标识符，网格将使用以下规则来匹配列：

1. 如果colId提供，请使用colId
2. 否则，如果field提供，则使用field
3. 否则在列定义实例上使用对象相等性进行匹配

要使网格正确匹配Columns，请确保每个Column具有a field或colId。

触发列事件

更新列定义或通过网格UI交互产生变化，将引发列事件。

<AgGridReact
	onSortChanged={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();