Question

我正在编写一个脚本，它将根据一些Bootstrap下拉列表过滤表。我想避免使用臭名昭着的datatables脚本的大小和复杂性。

下面，我目前的脚本状态看起来并不理想，因为我必须制作几个循环才能实现过滤。

我的两个主要问题：

很高兴性能和效率：我使用最好的方法来做到这一点吗？
错误：如果添加过滤器，则可以正常工作，但删除过滤器会导致相关项目隐藏（而不是显示更多项目）。

如果他们改进脚本，我愿意使用以下内容：

:contains
Array.prototype.filter
有点牵强但放弃Vue.js将是一个选项，因为我可以在我项目的其他地方使用它的数据绑定功能。
任何lodash方法

＆＃13;

let data = []
let filters = {
  company: [],
  location: []
}

let $tableRows = $('table tbody tr');

$tableRows.each(function (i, element) {
  data.push($(element).data())
})

$('.js-filter').on('click', function () {
  $(this).toggleClass('on')
  $('.selection').toggleClass('hidden glyphicon glyphicon-chevron-down')
  $('.dropdown-toggle').toggleClass('disabled')
  // $tableRows.removeClass('hidden')
})

$(document).on('click', '.dropdown-menu a', function (e) {
  e.stopPropagation()
  let filterData = $(this).data()

  if ($(this).hasClass('active')) {
    $(this).removeClass('active glyphicon glyphicon-ok')
    prepareFilters(filterData)
    filterRow(data, filters)
  } else {
    $(this).addClass('active glyphicon glyphicon-ok')
    prepareFilters(filterData)
    filterRow(data, filters)
  }
})

function prepareFilters (filterData) {
  Object.keys(filterData).forEach(function (key) {
    let filterIndex = filters[key].indexOf(filterData[key])
    if (filterIndex === -1) {
      filters[key].push(filterData[key])
    } else {
      filters[key].splice(filterIndex, 1)
    }
  })
}

function filterRow (data) {
  data.forEach(function(value, index) {
    Object.keys(value).some(function (key) {
      if (key !== 'id') {
        console.log(key)
        console.log(filters[key])
        if (filters[key].indexOf(value[key]) === -1) {
          $(`[data-id="${value.id}"]`).addClass('hidden')
        } else {
          $(`[data-id="${value.id}"]`).removeClass('hidden')
          console.log(`item with id ${value.id} should be invisible`)
          return true
        }
      }
    })
  })
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="js-filter btn btn-default">
  Click here to enable filter mode
</a>

<table class="table">
  <thead>
    <tr>
      <th>
        <div class="dropdown">
          <a href="javascript:void(0)" class="btn text-light-gray font-small disabled" type="button" id="dropdown-function">
                                        Position type
                                 
                                    </a>

        </div>
      </th>
      <th>
        <div class="dropdown">
          <a href="javascript:void(0)" class="btn text-light-gray dropdown-toggle font-small disabled" type="button" id="dropdown-company" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        company
                                        <span class="font-title-reg selection center-block text-left text-capitalize hidden">All</span>
                                    </a>
          <ul class="dropdown-menu" aria-labelledby="dropdown-company">
            <li><a data-company="apple">Apple</a>
            </li>
            <li><a data-company="google">google</a>
            </li>
            <li><a data-company="microsoft">Microsoft</a>
            </li>
            <li><a data-company="facebook">facebook</a>
            </li>
            <li><a data-company="twitter">twitter</a>
            </li>
          </ul>
        </div>
      </th>
      <th>
        <div class="dropdown">
          <a href="javascript:void(0)" class="btn text-light-gray dropdown-toggle font-small disabled" type="button" id="dropdown-location" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        location
                                        <span class="font-title-reg selection center-block text-left text-capitalize hidden">All</span>
                                    </a>
          <ul class="dropdown-menu" aria-labelledby="dropdown-location">
            <li><a data-location="berlin">Berlin, Germany</a>
            </li>
            <li><a data-location="munich">Munich, Germany</a>
            </li>
            <li><a data-location="frankfurt">Frankfurt, Germany</a>
            </li>
            <li><a data-location="london">London, UK</a>
            </li>
          </ul>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0" data-company="apple" data-location="berlin">
      <td>Design Working Student (m/f)</td>
      <td>Apple</td>
      <td>Berlin, Germany</td>
    </tr>
    <tr data-id="1" data-company="apple" data-location="berlin">
      <td>Director of Design (m/f)</td>
      <td>Apple</td>
      <td>Berlin, Germany</td>
    </tr>
    <tr data-id="2" data-company="microsoft" data-location="munich">
      <td>Design Intern (m/f)</td>
      <td>Microsoft</td>
      <td>Munich, Germany</td>
    </tr>
    <tr data-id="3" data-company="twitter" data-location="london">
      <td>UI/UX Designer (m/f)</td>
      <td>Twitter</td>
      <td>London, UK</td>
    </tr>
    <tr data-id="4" data-company="facebook" data-location="london">
      <td>Senior Engineer</td>
      <td>Facebook</td>
      <td>London, UK</td>
    </tr>
    <tr data-id="5" data-company="facebook" data-location="frankfurt">
      <td>Senior Engineer</td>
      <td>Facebook</td>
      <td>Frankfurt, Germany</td>
    </tr>
    <tr data-id="6" data-company="ibm" data-location="frankfurt">
      <td>Senior Engineer</td>
      <td>IBM</td>
      <td>Frankfurt, Germany</td>
    </tr>
  </tbody>
</table>

＆＃13;

根据下拉选项过滤表行

0 个答案: