我有一个股票表看起来像这样:
Supplier | Category | ItemID | Stock | SafetyLimit | Status
------------------------------------------------------------------------
ABC | FOOD | 001 | 200 | 140 | Safe
ABC | FOOD | 004 | 50 | 100 | Risky
DEF | NON FOOD | 002 | 150 | 100 | Safe
DEF | FOOD | 006 | 32 | 50 | Risky
我正在尝试根据供应商(全部、ABC、DEF(、类别(全部、食品、非食品(和状态(安全、有风险(为该表制作 3 个过滤器。我找到了这个脚本:
$('select').change(function () {
var current = this.value;
if (current == 'all') {
$('#FilterContainer').find('div.all').show();
} else {
$('#FilterContainer').find('div').hide();
$('#FilterContainer').find('div.all.' + current).show();
}
return false;
});
从这个JS小提琴完美运行,但就我而言,我的桌子不是静态的。它的数据是动态填充的。有人会帮我这个吗?谢谢。
我不知道
你的数据结构,但如果它是动态填充的,你可以做这样的事情。
首先,查找每个筛选器的唯一值:
// Example for suppliers
const suppliers = ['ABC', 'ABC', 'DEF', 'DEF']; // Your suppliers data
const uniqueSuppliers = Array.from(new Set(suppliers)); // ['ABC', 'DEF']
const supplierFilterValues = ['All', ...uniqueSuppliers]; // ['All', 'ABC', 'DEF']
现在用户可以从supplierFilterValues
中进行选择来过滤数据,例如用户只想显示带有"DEF"供应商的行:
const tableData = [{
supplier: 'ABC',
category: 'FOOD',
itemID: '001',
stock: '200',
safetyLimit: '140',
status: 'Safe',
}, {
supplier: 'DEF',
category: 'NON FOOD',
itemID: '002',
stock: '150',
safetyLimit: '100',
status: 'Safe',
}];
const dataToShow = tableData.filter((item) => item.supplier === 'DEF');