Question

我正在使用Bootstrap Table我用data-url="data.json"远程加载我的数据。所以我的表：

<table id="mytable" class="table table-hover" data-url="data.json" data-toggle="table" id="table-pagination"  data-pagination="true">
    <thead>
         <tr>
              <th data-field="id" data-align="center">id</th>
              <th data-field="type" data-align="center">type</th>
              <th data-field="name" data-align="center">name</th>
              <th data-field="product" data-align="center">product</th>
              <th data-field="use" data-align="center">use</th>
              <th data-field="quantity" data-sortable="true">quantity</th> 
         </tr>
    </thead>
</table>

其中最后一列只有数字（没有任何其他字符）。 data.json是这样的：

[
    {
        "id": 120,
        "type": "type1",
        "name": "name 1",
        "product": "250304-01",
        "use": "use 1",
        "quantity": 10000
    },
    {
        "id": 121,
        "type": "type2",
        "description": "name 2",
        "product": "250124-01",
        "cutter": "use 1",
        "quantity": 80
    }
]

我想检查一下，当最后一列中的值小于100时，要在tr中添加一个类。我搜索了一下，发现可以用filter完成。所以，我编码：

 $('tbody tr').filter( function(){
                       return $('td:last', this).text() < 100;
                     }).addClass('warning');

我将上述内容保存为文件addWarning.js，并将其放在页面底部的所有其他scripts的末尾。

 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/bootstrap-table.js"></script>
 <script src="assets/js/bootstrap-table-el-GR.js"></script>
 <script src="assets/js/addWarning.js"></script>

但它不起作用..我错过了什么？

Answer 1

仅在加载远程内容后过滤表格行，否则$('tbody tr')将不会选择任何元素。因此，您可以绑定 load-success.bs.table 事件的事件处理程序，它会在成功加载远程数据时触发。

$('table').on('load-success.bs.table', function() {
  $('tbody tr').filter(function() {
    return $('td:last', this).text() < 100;
  }).addClass('warning');
});

Answer 2

我将以上内容保存到文件addWarning.js中，并将其放在所有其他脚本末尾的页面底部。

这意味着脚本在命中时运行 - 这是在页面加载过程中。此时，引导表尚未加载数据，因此过滤器不匹配。

根据文档页面：http://bootstrap-table.wenzhixin.net.cn/documentation/您需要收听load-success.bs.table，您应该能够直接用以下内容替换现有代码：

$(function() {
    $(body).on("load-success.bs.table", function() {
        $('tbody tr').filter( function(){
                   return $('td:last', this).text() < 100;
                 }).addClass('warning');
    }); 
});

Answer 3

为什么不使用foo?.bar?.baz?.dummy选项，rowStyle，然后：

data-row-style="rowStyle"

文档：http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options

演示：http://jsfiddle.net/wenyi/e3nk137y/3270/

Answer 4

var tr = $('#mytable tbody tr')

tr.each(function () {
    var td = $(this).find('td:last');
    alert(td.text());
    if (td.text() < 100) {
        td.addClass('warning')
    }


})

以这种方式试试

DEMO

添加一个css类到tr失败

4 个答案: