数据表按外部按钮/链接过滤

Question

我正在尝试使用桌面旁边的树视图类型的按钮/链接来过滤搜索我的表格。这是设计：

这是棘手的部分。因此，当我点击年份时，该表将按年过滤。然后，如果我也点击了年份下面的类别，它将过滤年份，依此类推。我真的不知道在数据表中定制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，你可以专注于数据处理