javascript - 处理数据值过滤器(JS)

Question

我有一个表，我需要过滤

这是片段

$(document).ready(function () {
    var $rows = $('tbody#report tr')
   
     var $filters = $('.table-filter').change(function(){
       var filterArr = $filters.filter(function(){
          return this.value
       }).map(function(){
          var $el = $(this);
          var value = $el.is('select') ? $el.find(':selected').text() :$el.val()  
          return {
            col: $el.data('col'),
            value: value.toLowerCase()
          }
       }).get();
       if(!filterArr.length){
         $rows.show()
       }else{
         $rows.hide().filter(function(){
            var $row = $(this)
            return filterArr.every(function(filterObj, i){
               var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();             
              return  cellText.includes(filterObj.value);
            })
         }).show()
       }
     })
   

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div class="row">
        <div class="col-md-3">
            <h4>Date from</h4>
            <input type="date" class="table-filter form-control" id="datefilterfrom" data-date-split-input="true"  data-col="1">
        </div>
        <div class="col-md-3">
            <h4>Date to</h4>
            <input type="date"  class="table-filter form-control" id="datefilterto" data-date-split-input="true">
        </div>
        <div class="col-md-2">
            <h4>Project</h4>
           <select id="projectfilter" name="projectfilter" class="table-filter form-control" data-col="2">
             <option value="">Select one</option>
             <option value="1">Test project</option><option value="2">Test2</option></select>
        </div>
     <div class="col-md-2">
            <h4>Service</h4>
           <select id="servicefilter" name="servicefilter" class="table-filter form-control"  data-col="3">
             <option value="">Select one</option>
             <option value="1">Test service</option><option value="2">Test2 service</option></select>
        </div>
    </div>
<table id="testTable" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Date</th>
                    <th scope="col">Project</th>
                   <th scope="col">Service</th>
               
                </tr>
            </thead>
            <tbody id="report">
              <tr>
                <td class="proposalId">9</td><td> 17/07/2018</td> <td> Test project</td><td> Test service</td>
              </tr>
              <tr><td class="proposalId">8</td><td> 18/07/2018</td><td> Test project</td><td> Test2  service</td></tr>
              <tr><td class="proposalId">7</td><td> 17/07/2018</td><td> Test2</td><td> Test2 service</td></tr>
              <tr style=""><td class="proposalId">3</td><td> 19/07/2018</td><td> Test2</td><td> Test service</td></tr>
              
    </tbody>
        </table>

它非常适合文本搜索，它有 3 个和 4 个选择字段，但我无法处理日期。

我是这么想的

 var value = $el.is('select') ? $el.find(':selected').text() : moment($el.val(), "YYYY-MM-DD").format('DD/MM/YYYY')

但它不能正常工作。我该如何解决？

这里是 my demo codepen snippet ，你可以用来测试它

Answer 1

好吧，您的代码中有很多地方需要更正:

• 您用来过滤表中数据的逻辑是错误的，如果 一个 input 值被改变 整个过滤器被重置 只接受 考虑到这个输入值，你需要改变逻辑 在那之后。
• 例如，要获取 select 值，您只需要 $el.val() 而不是写 $el.is('select') ？ $el.find(':selected').text() :$el.val().

并且您需要在filter 代码中单独处理dates，因为.includes() 将比较字符串，所以你需要在这里计算和比较date对象。

这是你的日期比较代码应该如何:

if ($el.prop('type') == 'date') {
  return filterArr.every(function(filterObj, i) {
    var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
    if ($el.prop('id') == "datefilterfrom") {
      return new Date(filterObj.value) <= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
    }
    if ($el.prop('id') == "datefilterto") {
      return new Date(filterObj.value) >= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
    }
  })
}

注意:

对于 date 输入，您需要在过滤器对象中将 1 作为 col 值传递，因为您的表中只有一个日期列:

if ($el.prop('type') == 'date') {
    return {
      col: 1,
      value: value.toLowerCase()
    }
}

演示:

这是一个更新的工作演示。

$(document).ready(function() {
  var $rows = $('tbody#report tr')

  var $filters = $('.table-filter').change(function() {
    var $el = $(this);
    var filterArr = $filters.filter(function() {
      return this.value
    }).map(function() {
      var value = $el.val();
      if ($el.prop('type') == 'date') {
        return {
          col: 1,
          value: value.toLowerCase()
        }
      }
      return {
        col: $el.data('col'),
        value: value.toLowerCase()
      }
    }).get();
    if (!filterArr.length) {
      $rows.show()
    } else {
      $rows.hide().filter(function() {
        var $row = $(this);
        if ($el.prop('type') == 'date') {
          return filterArr.every(function(filterObj, i) {
            var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
            if ($el.prop('id') == "datefilterfrom") {
              return new Date(filterObj.value) <= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
            }
            if ($el.prop('id') == "datefilterto") {
              return new Date(filterObj.value) >= new Date(cellText.split("/")[2], +cellText.split("/")[1] - 1, cellText.split("/")[0]);
            }
          })
        } else {
          return filterArr.every(function(filterObj, i) {
            var cellText = $row.find('td').eq(filterObj.col).text().toLowerCase();
            return cellText.includes(filterObj.value);
          })
        }
      }).show()
    }
  })


});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div class="row">
  <div class="col-md-3">
    <h4>Date from</h4>
    <input type="date" class="table-filter form-control" id="datefilterfrom" data-date-split-input="true" data-col="1">
  </div>
  <div class="col-md-3">
    <h4>Date to</h4>
    <input type="date" class="table-filter form-control" id="datefilterto" data-date-split-input="true">
  </div>
  <div class="col-md-2">
    <h4>Project</h4>
    <select id="projectfilter" name="projectfilter" class="table-filter form-control" data-col="2">
      <option value="">Select one</option>
      <option value="1">Test project</option>
      <option value="2">Test2</option>
    </select>
  </div>
  <div class="col-md-2">
    <h4>Service</h4>
    <select id="servicefilter" name="servicefilter" class="table-filter form-control" data-col="3">
      <option value="">Select one</option>
      <option value="1">Test service</option>
      <option value="2">Test2 service</option>
    </select>
  </div>
</div>
<table id="testTable" class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Date</th>
      <th scope="col">Project</th>
      <th scope="col">Service</th>

    </tr>
  </thead>
  <tbody id="report">
    <tr>
      <td class="proposalId">9</td>
      <td> 17/07/2018</td>
      <td> Test project</td>
      <td> Test service</td>
    </tr>
    <tr>
      <td class="proposalId">8</td>
      <td> 18/07/2018</td>
      <td> Test project</td>
      <td> Test2 service</td>
    </tr>
    <tr>
      <td class="proposalId">7</td>
      <td> 17/07/2018</td>
      <td> Test2</td>
      <td> Test2 service</td>
    </tr>
    <tr style="">
      <td class="proposalId">3</td>
      <td> 19/07/2018</td>
      <td> Test2</td>
      <td> Test service</td>
    </tr>

  </tbody>
</table>