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);
有状态属性初始属性描述
widthinitialWidth列的宽度
flexinitialFlex用于设置此列宽度的flex值
hideinitialHide是否应隐藏此列
pinnedinitialPinned是否应固定此列
sortinitialSort应用于此列的排序
sortIndexinitialSortIndex应用排序的顺序(如果是多列排序
rowGroupinitialRowGroup此列是否应为行组
rowGroupIndexinitialRowGroupIndex此列是否应为行组以及按什么顺序
pivotinitialPivot如果此列应该是枢轴
pivotIndexinitialPivotIndex此列是否应该成为枢轴,以什么顺序排列
aggFuncinitialAggFunc通过行分组或数据透视来聚合此列的函数

空值与未定义

  • 将有状态属性设置为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();
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页