Question

我的股票表看起来像这样：

 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 Fiddle完美地工作，但就我而言，我的表不是静态的。它的数据动态填充。请问有人帮我吗？谢谢。

Answer 1

我不知道您的数据结构，但如果它是动态填充的，您可以执行类似的操作。

首先，为每个过滤器找到唯一值：

// 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来过滤数据，例如，用户只想显示带有＆＃39; DEF＆＃39;供应商：

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');

使用多个下拉列表过滤动态表结果

1 个答案: