如何获取和设置农业网格状态?

如何获取和重置 ag-grid 表的状态？我的意思是，显示哪些列，以什么顺序显示，进行什么排序和过滤等。

更新：getColumnState 和 setColumnState 似乎接近我想要的，但我无法弄清楚我应该保存和恢复状态的回调。我尝试在 onGridReady 中恢复它，但是当加载实际行时，我丢失了状态。

他们的网站上有一个非常具体的例子，提供了您要执行的操作的详细信息：javascript-grid-column-definition

function saveState() {
window.colState = gridOptions.columnApi.getColumnState();
window.groupState = gridOptions.columnApi.getColumnGroupState();
window.sortState = gridOptions.api.getSortModel();
window.filterState = gridOptions.api.getFilterModel();
console.log('column state saved');
}

以及用于恢复：

function restoreState() {
gridOptions.columnApi.setColumnState(window.colState);
gridOptions.columnApi.setColumnGroupState(window.groupState);
gridOptions.api.setSortModel(window.sortState);
gridOptions.api.setFilterModel(window.filterState);
console.log('column state restored');
}

我相信您正在寻找文档的此页面。这描述了列 api 以及您可以使用哪些功能。最相关的功能是：

getAllDisplayedColumns()- 用于显示哪些列能够呈现到显示中。由于虚拟化，可能有一些列尚未呈现到 DOM，如果您只想将列渲染到 DOM 然后使用getAllDisplayedVirtualColumns()- 这两个函数都显示顺序，因为它们将显示在网页上
- 从这些函数返回的Column对象包含每个列的排序和筛选属性。

我相信您所需要的一切都可以从该函数中获得，该函数将像这样调用gridOptions.columnApi.getAllDisplayedColumns()

其他可能有用的功能：

可从gridOptions.columnApi：
- getColumnState()- 返回比上述功能更详细的对象 - 只有：aggFunc，colId，hide，pinned，pivotIndex，rowGroupIndex和width
- setColumnState(columnState)- 这允许您将列设置为隐藏、可见或固定，columnState应该是从getColumnState()返回的内容
可从gridOptions.api获得：
- getSortModel()- 获取当前排序模型
- setSortModel(model)- 设置网格的排序模型，model应与从getSortModel()返回的格式相同
- getFilterModel()- 获取当前筛选器模型
- setFilterModel(model)- 设置网格的筛选器模型，model应与从getFilterModel()返回的格式相同

还有其他更具体的功能，如果您只想弄乱固定列，您可以使用setColumnPinned或一次使用多个列setColumnsPinned并且更多功能可从 AG-Grid 文档的链接页面获得

gridReady事件应该执行您需要它执行的操作。我怀疑正在发生的事情是，当您使用数据更新网格时，您的过滤器状态正在重置 - 您可以通过设置filterParams: {newRowsAction: 'keep'}来更改此行为

这可以通过按列设置，也可以使用defaultColDef全局设置。

下面是一个适合您的示例配置：

var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
onGridReady: function () {
gridOptions.api.setFilterModel(filterState);
gridOptions.columnApi.setColumnState(colState);
gridOptions.api.setSortModel(sortState);
},
defaultColDef: {
filterParams: {newRowsAction: 'keep'}
}
};

我在这里创建了一个 plunker 来说明这将如何工作(请注意，我正在从硬代码字符串恢复状态，但同样的原则适用)：https://plnkr.co/edit/YRH8uQapFU1l37NAjJ9B .rowData设置为加载后 1 秒

超时

要保留您可以使用的过滤器值 filterParams： {newRowsAction： 'keep'}

这是我的方法。它只涉及使用与实例化 agGrid 相同的 API 创建一个包装器函数。

此函数中的一些有趣的事情

保存/加载到本地存储
利用options对象传入Grid函数后可用的addEventListener。
附加到options对象的onGridReady回调，而不擦除可能已定义的内容。

用法：

newAgGrid(document.getElementById('my-grid'), options);

static newAgGrid(element, options) {
const ls = window.localStorage;
const key = `${location.pathname}/${element.id}`;
const colStateKey = `${key}colstate`;
const sortStateKey = `${key}sortState`;
function saveState(params) {
if (ls) {
ls.setItem(colStateKey, JSON.stringify(params.columnApi.getColumnState()));
ls.setItem(sortStateKey, JSON.stringify(params.api.getSortModel()));
}
}
function restoreState(params) {
if (ls) {
const colState = ls.getItem(colStateKey);
if (colState) {
params.columnApi.setColumnState(JSON.parse(colState));
}
const sortState = ls.getItem(sortStateKey)
if (sortState) {
params.api.setSortModel(JSON.parse(sortState));
}
}
}
// monitor the onGridReady event.  do not blow away an existing handler
let existingGridReady = undefined;
if (options.onGridReady) {
existingGridReady = options.onGridReady;
}
options.onGridReady = function (params) {
if (existingGridReady) {
existingGridReady(params);
}
restoreState(params);
}
// construct grid
const grid = new agGrid.Grid(element, options);
// now that grid is created, add in additional event listeners
options.api.addEventListener("sortChanged", function (params) {
saveState(params);
});
options.api.addEventListener("columnResized", function (params) {
saveState(params);
});
options.api.addEventListener("columnMoved", function (params) {
saveState(params);
});
return grid;
}

我们可以使用以下方式使用useRef()来引用<AgGridReact>元素来访问 getColumn 和 setColumn 状态。

const GridRef = useRef()
GridRef.current.columnApi.getColumnState() //  get Column state value
GridRef.current.columnApi.setColumnState() //  set Column state value
<AgGridReact
enableFilter={true}
rowStyle={rowStyle}
ref={GridRef}
></AgGridReact>

需要执行以下操作。

在 html 中包含网格的div

<div id="myGrid" style="width: 500px; height: 200px;"></div>

在 js 端

//initialize your grid object
var gridDiv = document.querySelector('#myGrid');

//Define the columns options and the data that needs to be shown
var gridOptions = {
columnDefs: [
{headerName: 'Name', field: 'name'},
{headerName: 'Role', field: 'role'}
],
rowData: [
{name: 'Niall', role: 'Developer'},
{name: 'Eamon', role: 'Manager'},
{name: 'Brian', role: 'Musician'},
{name: 'Kevin', role: 'Manager'}
]
};
//Set these up with your grid
new agGrid.Grid(gridDiv, gridOptions);

查看这支笔以获取更多功能。 https://codepen.io/mrtony/pen/PPyNaB .它用角度完成

相关内容

最新更新

热门标签：