admin管理员组文章数量:1023242
When I filter a Javascript AG Grid by hiding columns, I only want to see row data if the remaining columns actually contain data. How can I do this?
Here is my example grid:
index.html:
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Example - Side Bar - Boolean Configuration</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<link
href="+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<style media="only screen">
:root,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 16px;
overflow: auto;
background-color: transparent;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-quartz" style="height: 100%"></div>
<script>
(function () {
const appLocation = "";
window.__basePath = appLocation;
})();
</script>
<script src="/[email protected]/dist/ag-grid-charts-enterprise.js?t=1731498721360"></script>
<script src="main.js"></script>
</body>
</html>
Here's my main.js:
let gridApi;
const gridOptions = {
columnDefs: [
{ field: "A" },
{ field: "B" },
{ field: "C" },
{ field: "D" },
],
rowData: [
{ A: "y", B: "", C: "", D: "" },
{ A: "y", B: "y", C: "", D: "" },
{ A: "y", B: "y", C: "y", D: "" },
{ A: "y", B: "y", C: "y", D: "y" },
{ A: "y", B: "y", C: "y", D: "y" },
{ A: "y", B: "y", C: "y", D: "y" },
],
defaultColDef: {
flex: 1,
minWidth: 100,
enableValue: true,
enableRowGroup: true,
enablePivot: true,
filter: true,
},
autoGroupColumnDef: {
minWidth: 200,
},
sideBar: true,
};
// setup the grid after the page has finished loading
document.addEventListener("DOMContentLoaded", function () {
var gridDiv = document.querySelector("#myGrid");
gridApi = agGrid.createGrid(gridDiv, gridOptions);
});
Here's my package.json file (why is this even needed??):
{
"name": "ag-grid-packages",
"dependencies": {
"ag-grid-community": "^32.3.3",
"ag-grid-charts-enterprise": "^32.3.3"
}
}
Put these all together, and you get a simple grid that has the sidebar with the columns and filters toolbars added.
If you open the columns toolbar and uncheck column A, the first row still remains, even though there is no data in it. **I want that row to go away, if possible, if it contains no data **so there are fewer rows to deal with. I would want it to come back if I check column A again.
Next, if you open the columns toolbar and uncheck column A, and then go into the Filters toolbar, you will still see column A there. I want to hide that column in the filters toolbar if it is unchecked in the columns toolbar and restore it if the column is checked again.
I've tried googling the issue, but I don't seem to be asking the right question. I know the answer is out there, I'm just not using the correct terminology or something, or my understanding of what I'm trying to do is totally flawed. Part of the objective of this question is to find out what I need to be asking.
I deeply apologize if these are noob questions. I'm not a developer by trade, so I'm very inexperienced with all of this.
UPDATE: Nov.20, 2024: I tried using ChatGPT to see if it could figure out the issue. It seemed to be fairly confident that it could. It found several functions that it felt would make it so that the row would be hidden if none of the visible columns contained any values. Here is what it came up with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AG Grid with Sidebar</title>
<!-- AG Grid Enterprise Scripts -->
<script src=".min.js"></script>
<link rel="stylesheet" href=".min.css">
<link rel="stylesheet" href=".min.css">
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 800px;"></div>
<!-- AG Charts Enterprise -->
<script src="/[email protected]/dist/ag-grid-charts-enterprise.js"></script>
<script>
// Provide your AG Grid Enterprise license key here if you have one
agGrid.LicenseManager.setLicenseKey("YOUR_LICENSE_KEY");
// Define column definitions
const columnDefs = [
{ field: 'A', filter: true },
{ field: 'B', filter: true },
{ field: 'C', filter: true },
{ field: 'D', filter: true },
];
// Define row data
const originalRowData = [
{ A: 'y', B: '', C: '', D: '' },
{ A: 'y', B: 'y', C: '', D: '' },
{ A: 'y', B: 'y', C: 'y', D: '' },
{ A: 'y', B: 'y', C: 'y', D: 'y' },
];
// Grid options with filtering and sidebar
const gridOptions = {
columnDefs: columnDefs,
rowData: originalRowData,
defaultColDef: {
filter: true,
sortable: true,
resizable: true,
},
sideBar: {
toolPanels: [
{ id: 'columns', labelDefault: 'Columns', toolPanel: 'agColumnsToolPanel' },
{ id: 'filters', labelDefault: 'Filters', toolPanel: 'agFiltersToolPanel' },
],
defaultToolPanel: 'filters',
},
onGridReady: function (params) {
// Assign APIs to gridOptions for future reference
gridOptions.api = params.api;
gridOptions.columnApi = params.columnApi;
// Run the initial check for visible rows
updateVisibleRows();
},
onFilterChanged: updateVisibleRows,
onColumnVisible: updateVisibleRows, // Trigger row update when columns are hidden or shown
};
// Function to update visible rows based on filters and column visibility
function updateVisibleRows() {
// Ensure columnApi and api are available
if (!gridOptions.columnApi || !gridOptions.api) return;
// Get the visible columns from columnApi
const visibleColumns = gridOptions.columnApi
.getAllColumns()
.filter(col => col.getVisible()) // Filter out columns that are not visible
.map(col => col.getColId());
// Loop through all rows and update their visibility
gridOptions.api.forEachNode((node) => {
// Only check rows that have data
const rowValues = visibleColumns.map(colId => node.data[colId]);
const isNotEmpty = rowValues.some(value => !isEmptyValue(value));
// Set row visibility by calling setDataValue to "visibility" flag (which is not part of the row data)
if (isNotEmpty) {
node.setDataValue('hidden', false); // Keep it visible
} else {
node.setDataValue('hidden', true); // Hide it if it's empty
}
});
// Force a refresh after updating the row data visibility
gridOptions.api.refreshCells();
}
// Helper function to check if a value is considered empty
function isEmptyValue(value) {
return value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
}
// Initialize the grid using createGrid
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.getElementById('myGrid');
const { api, columnApi } = agGrid.createGrid(gridDiv, gridOptions);
// Assign APIs to gridOptions for use in event callbacks
gridOptions.api = api;
gridOptions.columnApi = columnApi;
});
</script>
</body>
</html>When I filter a Javascript AG Grid by hiding columns, I only want to see row data if the remaining columns actually contain data. How can I do this?
Here is my example grid:
index.html:
<!doctype html>
<html lang="en">
<head>
<title>JavaScript Example - Side Bar - Boolean Configuration</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<link
href="+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<style media="only screen">
:root,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 16px;
overflow: auto;
background-color: transparent;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-quartz" style="height: 100%"></div>
<script>
(function () {
const appLocation = "";
window.__basePath = appLocation;
})();
</script>
<script src="/[email protected]/dist/ag-grid-charts-enterprise.js?t=1731498721360"></script>
<script src="main.js"></script>
</body>
</html>
Here's my main.js:
let gridApi;
const gridOptions = {
columnDefs: [
{ field: "A" },
{ field: "B" },
{ field: "C" },
{ field: "D" },
],
rowData: [
{ A: "y", B: "", C: "", D: "" },
{ A: "y", B: "y", C: "", D: "" },
{ A: "y", B: "y", C: "y", D: "" },
{ A: "y", B: "y", C: "y", D: "y" },
{ A: "y", B: "y", C: "y", D: "y" },
{ A: "y", B: "y", C: "y", D: "y" },
],
defaultColDef: {
flex: 1,
minWidth: 100,
enableValue: true,
enableRowGroup: true,
enablePivot: true,
filter: true,
},
autoGroupColumnDef: {
minWidth: 200,
},
sideBar: true,
};
// setup the grid after the page has finished loading
document.addEventListener("DOMContentLoaded", function () {
var gridDiv = document.querySelector("#myGrid");
gridApi = agGrid.createGrid(gridDiv, gridOptions);
});
Here's my package.json file (why is this even needed??):
{
"name": "ag-grid-packages",
"dependencies": {
"ag-grid-community": "^32.3.3",
"ag-grid-charts-enterprise": "^32.3.3"
}
}
Put these all together, and you get a simple grid that has the sidebar with the columns and filters toolbars added.
If you open the columns toolbar and uncheck column A, the first row still remains, even though there is no data in it. **I want that row to go away, if possible, if it contains no data **so there are fewer rows to deal with. I would want it to come back if I check column A again.
Next, if you open the columns toolbar and uncheck column A, and then go into the Filters toolbar, you will still see column A there. I want to hide that column in the filters toolbar if it is unchecked in the columns toolbar and restore it if the column is checked again.
I've tried googling the issue, but I don't seem to be asking the right question. I know the answer is out there, I'm just not using the correct terminology or something, or my understanding of what I'm trying to do is totally flawed. Part of the objective of this question is to find out what I need to be asking.
I deeply apologize if these are noob questions. I'm not a developer by trade, so I'm very inexperienced with all of this.
UPDATE: Nov.20, 2024: I tried using ChatGPT to see if it could figure out the issue. It seemed to be fairly confident that it could. It found several functions that it felt would make it so that the row would be hidden if none of the visible columns contained any values. Here is what it came up with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AG Grid with Sidebar</title>
<!-- AG Grid Enterprise Scripts -->
<script src=".min.js"></script>
<link rel="stylesheet" href=".min.css">
<link rel="stylesheet" href=".min.css">
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 800px;"></div>
<!-- AG Charts Enterprise -->
<script src="/[email protected]/dist/ag-grid-charts-enterprise.js"></script>
<script>
// Provide your AG Grid Enterprise license key here if you have one
agGrid.LicenseManager.setLicenseKey("YOUR_LICENSE_KEY");
// Define column definitions
const columnDefs = [
{ field: 'A', filter: true },
{ field: 'B', filter: true },
{ field: 'C', filter: true },
{ field: 'D', filter: true },
];
// Define row data
const originalRowData = [
{ A: 'y', B: '', C: '', D: '' },
{ A: 'y', B: 'y', C: '', D: '' },
{ A: 'y', B: 'y', C: 'y', D: '' },
{ A: 'y', B: 'y', C: 'y', D: 'y' },
];
// Grid options with filtering and sidebar
const gridOptions = {
columnDefs: columnDefs,
rowData: originalRowData,
defaultColDef: {
filter: true,
sortable: true,
resizable: true,
},
sideBar: {
toolPanels: [
{ id: 'columns', labelDefault: 'Columns', toolPanel: 'agColumnsToolPanel' },
{ id: 'filters', labelDefault: 'Filters', toolPanel: 'agFiltersToolPanel' },
],
defaultToolPanel: 'filters',
},
onGridReady: function (params) {
// Assign APIs to gridOptions for future reference
gridOptions.api = params.api;
gridOptions.columnApi = params.columnApi;
// Run the initial check for visible rows
updateVisibleRows();
},
onFilterChanged: updateVisibleRows,
onColumnVisible: updateVisibleRows, // Trigger row update when columns are hidden or shown
};
// Function to update visible rows based on filters and column visibility
function updateVisibleRows() {
// Ensure columnApi and api are available
if (!gridOptions.columnApi || !gridOptions.api) return;
// Get the visible columns from columnApi
const visibleColumns = gridOptions.columnApi
.getAllColumns()
.filter(col => col.getVisible()) // Filter out columns that are not visible
.map(col => col.getColId());
// Loop through all rows and update their visibility
gridOptions.api.forEachNode((node) => {
// Only check rows that have data
const rowValues = visibleColumns.map(colId => node.data[colId]);
const isNotEmpty = rowValues.some(value => !isEmptyValue(value));
// Set row visibility by calling setDataValue to "visibility" flag (which is not part of the row data)
if (isNotEmpty) {
node.setDataValue('hidden', false); // Keep it visible
} else {
node.setDataValue('hidden', true); // Hide it if it's empty
}
});
// Force a refresh after updating the row data visibility
gridOptions.api.refreshCells();
}
// Helper function to check if a value is considered empty
function isEmptyValue(value) {
return value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
}
// Initialize the grid using createGrid
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.getElementById('myGrid');
const { api, columnApi } = agGrid.createGrid(gridDiv, gridOptions);
// Assign APIs to gridOptions for use in event callbacks
gridOptions.api = api;
gridOptions.columnApi = columnApi;
});
</script>
</body>
</html>本文标签： javascriptHow to only display rows containing data when column filter is appliedStack Overflow
版权声明：本文标题：javascript - How to only display rows containing data when column filter is applied - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745598995a2158342.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论