我如何在bootstrapTable中添加額外的屬性

Question

我使用bootstrapTable.js插件https://github.com/wenzhixin/bootstrap-table來創建數據表，我填充了Json的表

但是我需要控制我的td標簽，因為我在我的代碼“data-symbole”屬性中寫了td標簽中的一些額外屬性，但是插件刪除它可以幫助我

 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>