javascript - 如何将额外的属性添加到 bootstrapTable 中

Question

我使用了 bootstrapTable.js 插件 https://github.com/wenzhixin/bootstrap-table 要创建数据表，我用 Json 填充表

但我需要控制我的 td 标签，在 td 标签中添加一些额外的属性 正如我在代码“data-symbole”属性中所写 ，但插件将其删除 谁能帮帮我吗

var x = 
[
    {
        "id": 0,
        "name": "test0",
        "price": "$0"
        ,"pricesymbole":"$"
    },
    {
        "id": 1,
        "name": "test1",
        "price": "$1"
      ,"pricesymbole":"$"
    },
    {
        "id": 2,
        "name": "test2",
        "price": "$2"
      ,"pricesymbole":"$"
    },
    {
        "id": 3,
        "name": "test3",
        "price": "$3"
      ,"pricesymbole":"$"
    }
];

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified CSS -->


<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<table id="table">
    <thead>
        <tr id="tr_{{id}}">
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price" data-symbole="pricesymbole">Item Price</th>
        </tr>
    </thead>
</table>
        

Answer 1

我认为 formatter 选项对于您的情况很有用:

var x = 
[
    {
        "id": 0,
        "name": "test0",
        "price": "0"
        ,"pricesymbole":"$ "
    },
    {
        "id": 1,
        "name": "test1",
        "price": "1"
      ,"pricesymbole":"￥"
    },
    {
        "id": 2,
        "name": "test2",
        "price": "2"
      ,"pricesymbole":"$ "
    },
    {
        "id": 3,
        "name": "test3",
        "price": "3"
      ,"pricesymbole":"￥"
    }
];

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

function priceFormatter(value, row) {
    return row.pricesymbole + value;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified CSS -->


<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<table id="table">
    <thead>
        <tr id="tr_{{id}}">
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price" data-formatter="priceFormatter">Item Price</th>
        </tr>
    </thead>
</table>