我怎麼可以添加額外的屬性我到bootstrapTable

Question

我用bootstrapTable.js插件 https://github.com/wenzhixin/bootstrap-table 化JSON

創建數據表，我填寫表格，但我需要在我的td標籤來控制作爲TD添加一些額外的屬性標籤 正如我在我的代碼「數據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>