可以在ag-grid中使用noRowsOverlay组件来自定义无数据时显示的内容,如下所示:
// 定义noRowsOverlay的HTML内容 var noRowsTemplate = '
';// 将noRowsOverlay组件配置到ag-grid中 gridOptions = { // ... overlayNoRowsTemplate: noRowsTemplate, // ... };
当从服务器未返回数据时,noRowsOverlay组件将会在ag-grid中心显示noRowsTemplate的内容,代替默认的加载图标。这样可以明确的告诉用户没有数据返回,提高了用户体验。
如果需要在获取数据前隐藏加载图标,可以在ag-grid的onGridReady事件中使用以下代码:
// 获取ag-grid的API gridOptions = { onGridReady: function(params) { var gridApi = params.api; var gridColumnApi = params.columnApi;
// 隐藏加载图标
gridApi.showLoadingOverlay();
// 发送请求获取数据
// ...
// 数据获取成功后,显示数据
gridApi.hideOverlay();
}
// ...
};