javascript - 通过外部按钮/链接进行数据表过滤

Question

我正在尝试使用表格旁边的 TreeView 类型的按钮/链接来过滤表格的搜索。这是设计:

这是棘手的部分。因此，当我单击年份时，表格将按年份进行过滤。然后，如果我还单击年份下方的类别，它将按年份进行过滤，依此类推。我真的不知道如何在数据表中自定义 API。

Answer 1

const data = [
  'a-T1-2016-01',
  'b-T1-2016-01',
  'c-T1-2016-02',
  'd-T1-2015-01',
  'e-T1-2015-01',
  'f-T1-2016-03',
]

$('[data-filter]').click(function() {
  const filterStr = $(this).attr('data-filter')
  alert(data.filter((x) => x.includes(filterStr)).join(','))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a data-filter="2015">2015</a>
    <ul>
      <li>
        <a data-filter="T1-2015">Type1</a>
        <ul>
          <li>
            <a data-filter="T1-2015-01">01</a>
          </li>
          <li>
            <a data-filter="T1-2015-02">02</a>
          </li>
          <li>
            <a data-filter="T1-2015-03">03</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a data-filter="2016">2016</a>
    <ul>
      <li>
        <a data-filter="T1-2016">Type1</a>
        <ul>
          <li>
            <a data-filter="T1-2016-01">01</a>
          </li>
          <li>
            <a data-filter="T1-2016-02">02</a>
          </li>
          <li>
            <a data-filter="T1-2016-03">03</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

或者您可能需要过滤多列，例如 <a data-filer="year=xx&month=xx"></a>

或者您可能需要来自不同控件的过滤器

const filters = {}

$('[data-filter]').click(function() {
  const filterStr = $(this).attr('data-filter')
  filters[filterStr] = !filters[filterStr]
  alert(Object.keys(filters).filter((x) => filters[x]).join(','))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-filter="2015">2015</a>
<a data-filter="2016">2016</a>
<a data-filter="2017">2017</a>

或者将它们组合起来

建议你的下一个项目使用mvvm(react/angular/vue)，它们会自动处理ui，你可以专注于数据处理