jquery - 在数据表列复选框下拉列表中使用可选择的 jQuery

Question

我正在尝试在数据表列复选框列表中使用可选择的 jQuery。小提琴显示了复选框的“办公室位置”列表，当可选择关闭时，这些复选框都可以正常工作。

启用可选功能后，到目前为止，我所做的只是在复选框标签上拖动时突出显示复选框和分配类。问题是数据表没有根据选择进行过滤 - 既没有拖动，也没有单独的标签选择。

有趣的是，如果我只检查小输入框，过滤就会起作用，但不知道为什么。我已经在 .selectable() 及其过滤器中尝试了 ul、li 和标签的所有组合，但没有任何东西可以过滤表格。

我感觉该功能可能与数据表断开连接，但根本不明白如何正确处理。

任何人都可以帮忙吗？

$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'LEVEL-TWO'
    }).appendTo($('<div>', {
      'class': 'LEVEL-ONE'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column))));
  }

  $('#example').DataTable({
    scrollY: 'calc(100vh - 270px)',
    scrollX: '100%',
    fixedHeader: true,
    scrollCollapse: true,
    paging: false,
    processing: true,
    orderCellsTop: true,
    select: true,
    "language": {
      "search": "",
      "searchPlaceholder": "Search",
    },
    initComplete: function() {
      this.api().columns([2]).every(function(i) {
        var column = this;
        var ddmenu = cbDropdown($(column.header())).on('change', ':checkbox', function() {
          var active;
          var vals = $(':checked', ddmenu).map(function(index, element) {
            active = true;
            return $.fn.dataTable.util.escapeRegex($(element).val());
          }).toArray().join('|');

          column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();

          if (this.checked) {
            $(this).closest('li').addClass('active');
          } else {
            $(this).closest('li').removeClass('active');
          }

          var active2 = ddmenu.parent().is('.active');
          if (active && !active2) {
            ddmenu.parent().addClass('active');
          } else if (!active && active2) {
            ddmenu.parent().removeClass('active');
          }
        });

        column.data().unique().sort().each(function(d, j) {
          var $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });
          $text.appendTo($label);
          $cb.appendTo($label);
          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });

  //Multi-checkbox dragging
  $(".cb-dropdown-wrap ul").selectable({
    filter: 'li',
    stop: function() {
      $(".ui-selected input[type='checkbox']", this).each(function() {
        this.checked = !this.checked;

        if ($(this).is(':checked')) {
          $(this).parent().addClass("LabelHighlight")
          $(this).parent().parent().addClass("active")
        } else {
          $(this).parent().removeClass("active LabelHighlight")
          $(this).parent().parent().removeClass("active")
        }
      });
    }
  });
});

.cb-dropdown-wrap {
  position: relative;
  height: 125px;
}

.cb-dropdown,
.cb-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.cb-dropdown {
  position: absolute;
  width: 100px;
  height: 130px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #888;
}

li:hover {
  border: 1px solid blue;
}

.LabelHighlight {
  border: 1px solid #7392a5;
  background-color: #e3edf9;
  color: black;
}

<script type="text/javascript" src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Gavin Joyce</td>
      <td>Developer</td>
      <td>Edinburgh</td>
      <td>42</td>
      <td>2010/12/22</td>
      <td>$92,575</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/jgfr649m/

标签： jquerydatatablesjquery-ui-selectable