Question

我正在尝试使用filter-controler或select2-filter扩展来过滤引导表wenzihixin（列出here）

我在我的表格中创建可编辑字段，如下所示：

  <table>
    <thead>...</thead>
    <tbody>
       <tr>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="2" data-field="fieldname" value = "bird"></td>
          <td><input data-id="1" data-field="fieldname" value = "pig"></td>
          <td><input data-id="4" data-field="fieldname" value = "dog"></td>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="5" data-field="fieldname" value = "pig"></td>
          <td><input data-id="2" data-field="fieldname" value = "dog"></td>
          <td><input data-id="7" data-field="fieldname" value = "cat"></td>              
       </tr>
       <tr>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="2" data-field="fieldname" value = "bird"></td>
          <td><input data-id="1" data-field="fieldname" value = "pig"></td>
          <td><input data-id="4" data-field="fieldname" value = "dog"></td>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="5" data-field="fieldname" value = "pig"></td>
          <td><input data-id="2" data-field="fieldname" value = "dog"></td>
          <td><input data-id="7" data-field="fieldname" value = "cat"></td>              
       </tr>
       ...etc...
    </tbody>
  </table>

（顺便说一句，这只是伪造数据，我无法透露真实数据）。

我尝试使用select2-filter和filter-control来过滤tabl中的结果，但它们都有效，但它们最终都会在TD标签之间过滤所有数据，所以如果我要过滤' 1'它将返回该列的data-id =“1”的所有行。

我的问题是，我如何限制这些（扩展程序可以正常工作）只查看输入标记的值？

Answer 1

一种方法是将数据与输入框的格式分开。 Look at this JSFiddle.

使用format（data-format）参数格式化输入框html。格式函数有参数（值，行和索引）字段，可用于创建带有类，超链接，按钮，复选框等的html。注意：我怀疑id字段来自您的数据，所以我将它添加到json来自sample codes shown here之一的数据数组。

function formatInput(value,row,index){
return '<input data-id="' + row.id + '" value="' + value + '">';
}

带有输入标记的bootstrap-table过滤表数据

1 个答案: