Question

我正在研究表格行过滤脚本。

最初，所有表格行都是可见的，但在操作一些下拉列表/表单后，过滤条件会指示哪些行可见，哪些行不可见。例如：

var jobs = [{
  id: 0,
  company: "Google",
  location: "Zurich"
}, {
  id: 1,
  company: "Facebook",
  location: "Ireland"
}];

// this function isn't run in this example for reasons of brevity. it's to show how the jobs array is generated
const filterRow = function (data, filters) {
  let filtersEnabled = Object.keys(filters).filter(element => filters[element].length !== 0);
  return data.filter(row => {
    return filtersEnabled.every(k => {
      return filters[k].indexOf(row[k]) !== -1
    })
  })
}

let $tableRows = $('table tbody tr');

const updateDisplay = function() {
  // that's not ideal
  $tableRows.addClass('hidden')
  jobs.forEach((row) => {
    $(`[data-id="${row.id}"]`).removeClass('hidden')
  })
}

$('.js-filter').on('click', () => updateDisplay())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="js-filter">filter table now</button>
<table class="table table-bordered">
  <tbody>
    <tr data-company="google" data-id="0" data-loation="zurich">
      <td>Google</td>
      <td>Zurich</td>
      <td>0</td>
    </tr>
    <tr data-company="facebook" data-id="1" data-loation="ireland">
      <td>Facebook</td>
      <td>Ireland</td>
      <td>1</td>
    </tr>
    <tr data-company="microsoft" data-id="2" data-loation="california">
      <td>microsoft</td>
      <td>California</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

jobs数组确定哪些行可见。（因此在这种特殊情况下，只有id为0和1的行才会可见。

鉴于jobs数组正在以编程方式进行更改，我希望使用jQuery（或其他）方法直接隐藏数组中不存在ID的行（因此可以使用animate.css淡出行等

我目前正在做的是

隐藏所有行
然后显示数组中的那些。这是一种解决方法，它使我的过渡/动画变得复杂。

Answer 1

您可以使用jQuery .filter() method迭代行并过滤它们。

在每次迭代中，您都可以使用.some() method检查data-id数组中是否找到了行的jobs属性。从那里，您可以返回布尔值并过滤掉id与jobs数组中的对象匹配的行。

$rows.filter((index, row) => {
  return !jobs.some(job => job.id === +row.dataset.id);
}).addClass('hidden');

或者，您也可以使用jQuery .not() method代替.filter()：

$rows.not((index, row) => {
  return jobs.some(job => job.id === +row.dataset.id);
}).addClass('hidden');

或者如果你想将isJobById分成另一个函数：

const isJobById = id => jobs.some(job => job.id === +id);
const updateDisplay = () => {
  $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden');
}

您还可以更改以下行：

$('.js-filter').on('click', () => updateDisplay());

..并直接传递updateDisplay函数：

$('.js-filter').on('click', updateDisplay);

完整摘录：

＆＃13;

var jobs = [{
  id: 0,
  company: "Google",
  location: "Zurich"
}, {
  id: 1,
  company: "Facebook",
  location: "Ireland"
}];

let $rows = $('table tbody tr');
const isJobById = id => jobs.some(job => job.id === +id);
const updateDisplay = () => {
  $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden');
}

$('.js-filter').on('click', updateDisplay);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="js-filter">filter table now</button>
<table class="table table-bordered">
  <tbody>
    <tr data-company="google" data-id="0" data-loation="zurich">
      <td>Google</td>
      <td>Zurich</td>
      <td>0</td>
    </tr>
    <tr data-company="facebook" data-id="1" data-loation="ireland">
      <td>Facebook</td>
      <td>Ireland</td>
      <td>1</td>
    </tr>
    <tr data-company="microsoft" data-id="2" data-loation="california">
      <td>microsoft</td>
      <td>California</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

＆＃13;

隐藏除过滤对象

1 个答案: