Question

我正在使用Bootstrap-table插件（http://bootstraptable.wenzhixin.net.cn/documentation/），我正在尝试使用方法filterby按标签进行过滤，但无法弄清楚如何将多个标记纳入必须以字符串形式出现，以逗号分隔。

我创建了一个例子来说明我想要实现的目标。为简单起见，

这是html：

<table id="table">
    <thead>
    <tr>
        <th data-field="date">Date</th>
        <th data-field="desc">Description</th>
        <th data-field="tags">Tags</th>
    </tr>
    </thead>
</table>
<br>
<button id="filter-general">General</button>
<button id="filter-rotation">Rotation</button>
<button id="clear">clear</button>

使用Javascript：

var data = [{
  "date": "2016-05-10",
  "tags": "General, Research, Rotation",
  "desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
  "date": "2016-04-22",
  "tags": "General",
  "desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
  "date": "2016-03-23",
  "tags": "Research, Rotation",
  "desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
  "date": "2015-11-01",
  "tags": "Rotation",
  "desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
},{
  "date": "2016-08-15",
  "tags": "General, Rotation",
  "desc": "Nunc velit lectus, ornare vitae fringilla eget, vestibulum quis tortor."
}];

$(function() {
  $table = $('#table');
  $table.bootstrapTable({
    data: data
  });

  $('#clear').click(function() {
    $table.bootstrapTable('filterBy', {});
  });

  $('#filter-general').click(function() {
    $table.bootstrapTable('filterBy', {
      tags: "General"
    });
  });

  $('#filter-rotation').click(function() {
    $table.bootstrapTable('filterBy', {
      tags: "Rotation"
    });
  });
});

http://jsfiddle.net/zqxwr3uL/6/

编辑：通过filterby方法或其中一个过滤器扩展程序。

Answer 1

我认为使用filterBy功能你运气不好。从源代码（https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js）：

var f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns;

// Check filter
this.data = f ? $.grep(this.options.data, function (item, i) {
     for (var key in f) {
        if ($.isArray(f[key]) && $.inArray(item[key], f[key]) === -1 ||
            item[key] !== f[key]) {
                return false;
        }
     }
     return true;
 }) : this.options.data;

其中item [key]是您的单元格值，f [key]是您的过滤字符串。 $ .inArray正在寻找过滤字符串中单元格的完整文本。

Answer 2

我知道，旧的会话，但只需将检查过滤器部分更改为此：

for (var key in f) {

    if (Array.isArray(f[key]) && !f[key].includes(item[key])) {
     return false;
    }

    if(!Array.isArray(f[key]) ){

       if(item[key].search(f[key])==-1){
         return false
       }
   }
 }

Bootstrap表按字符串部分过滤表

2 个答案: