// Filter rows based on string values and exclude from whiteList
const whiteList = rows.map(sel => sel.RuleAutoID); // Array of IDs to exclude
console.log('whiteList', whiteList);
// Assuming you're getting the searchTerm dynamically from an input field
let searchTerm = $('.regulationData .mendix-react-material-table .MuiInputBase-input').val().toLowerCase();
console.log('searchTerm', searchTerm);
// Create a new array of objects without the RuleAutoID property
let filterRows = rows.map(({ RuleAutoID, ...rest }) => rest);
console.log('filterRows', filterRows);
const filteredData = filterRows.filter(item => {
const values = Object.values(item).filter((v) => !(v === null || v === undefined || v === ''));
console.log('values', values);
return values.some(val => {
console.log('val', val);
return typeof val === "string" && val.toLowerCase().includes(searchTerm);
});
});
console.log('filteredData', filteredData);
您可以使用
filter()map()RuleAutoIDssearchTermto toLowerCase()includes()参考以下代码：
const rows = [{
RuleAutoID: 1,
name: 'John Doe',
age: 30
},
{
RuleAutoID: 2,
name: 'Jane Smith',
age: 25
},
{
RuleAutoID: 3,
name: 'Mark Johnson',
age: 35
}
];
const whiteList = [2];
function displayFilteredData(filteredData) {
const tbody = document.getElementById('filteredData');
tbody.innerHTML = '';
filteredData.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${row.RuleAutoID}</td><td>${row.name}</td><td>${row.age}</td>`;
tbody.appendChild(tr);
});
}
function setWhiteList() {
const whiteListInput = document.getElementById('whiteList').value;
whiteList = whiteListInput.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
console.log('whiteList', whiteList);
}
function setWhiteList(filteredData) {
const tbody = document.getElementById('filteredData');
tbody.innerHTML = '';
filteredData.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${row.RuleAutoID}</td><td>${row.name}</td><td>${row.age}</td>`;
tbody.appendChild(tr);
});
}
function filterData() {
const searchTerm = document.getElementById('searchTerm').value.toLowerCase();
console.log('searchTerm', searchTerm);
const filteredRows = rows.filter(row => !whiteList.includes(row.RuleAutoID));
console.log('filteredRows', filteredRows);
const filteredData = filteredRows.filter(row => {
const values = Object.values(row).filter(val => val !== null && val !== undefined && val !== '');
console.log('values for row', row, values);
return values.some(val => {
console.log('checking value', val, 'against searchTerm', searchTerm);
return typeof val === 'string' && val.toLowerCase().includes(searchTerm);
});
});
console.log('filteredData', filteredData);
displayFilteredData(filteredData);
}
document.getElementById('filterButton').addEventListener('click', filterData);
displayFilteredData(rows.filter(row => !whiteList.includes(row.RuleAutoID)));.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid black;
padding: 8px;
text-align: left;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Filter Data Sample</h1>
<label for="searchTerm">Search Term:</label>
<input type="text" id="searchTerm" placeholder="Enter search term...">
<button id="filterButton">Filter</button><br>
<h2>Filtered Data</h2>
<table class="table">
<thead>
<tr>
<th>RuleAutoID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="filteredData"></tbody>
</table>
</body>
</html>