【问题标题】:How to change bootstrap-tabe row background depending on its content如何根据其内容更改引导表行背景
【发布时间】:2016-11-11 17:17:25
【问题描述】:

假设我只想将包含“博客”一词的行更改为绿色或蓝色。请参阅我在 jsfiddle 中的示例。有没有办法根据其内容更改引导表的行颜色? :P

jsfiddle 上查看此示例

function rowStyle(row, index) {
    var classes = ['active', 'success', 'info', 'warning', 'danger'];
    
    if (index % 2 === 0 && index / 2 < classes.length) {
        return {
            classes: classes[index / 2]
        };
    }
    return {};
}
<table data-toggle="table" 
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
       data-row-style="rowStyle">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

【问题讨论】:

  • 查看问题中发布的 jsfiddle 链接以获得更好的输出结果。
  • 就我个人而言,我会使用类似 Knockout JS 的东西,并且只使用 css 绑定来根据包含的数据更改颜色。完全动态。

标签: javascript bootstrap-table


【解决方案1】:

试试这个:

function rowStyle(row, index) {
    const obj = {};
    if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('blog'))) {
      obj.css = {'background-color': 'blue'};
    }
    var classes = ['active', 'success', 'info', 'warning', 'danger'];

    if (index % 2 === 0 && index / 2 < classes.length) {
        return Object.assign({}, obj, {classes: classes[index / 2]});
    }
    return obj;
}

updated JS Fiddle

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2012-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多