在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value, row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始);table的标签属性是为:data-formatter
可以再bootstrap-table.js直接设置formatter属性:
[javascript] view plaincopy
- formatter: function(value,row,index) {
- //通过判断单元格的值,来格式化单元格,返回的值即为格式化后包含的元素
- var a = "";
- if(value == "已完成") {
- var a = '<span style="color:#00ff00">'+value+'</span>';
- }else if(value == "已分派"){
- var a = '<span style="color:#0000ff">'+value+'</span>';
- }else if(value == "待办") {
- var a = '<span style="color:#FF0000">'+value+'</span>';
- }else{
- var a = '<span>'+value+'</span>';
- }
- return a;
- }
也可在html里面对单个表格进行设置:
[html] view plaincopy
- <table data-row-style="statestyle" data-toggle="table" data-url="tables/new_report1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="id" data-sort-order="desc">
- <thead>
- <span style="white-space:pre"> </span><tr>
- <span style="white-space:pre"> </span><th data-field="state" data-checkbox="true"><span>编号</span></th>
- <th data-field="id" data-sortable="true"><span>编号</span></th>
- <th data-field="report_man" data-sortable="true"><span>报修人</span></th>
- <th data-field="phone_number" data-sortable="true"><span>联系电话</span></th>
- <th data-field="report_date" data-sortable="true"><span>报修时间</span></th>
- <th data-field="order_date" data-sortable="true"><span>预约时间</span></th>
- <th data-field="allot_time" data-sortable="true"><span>分派时间</span></th>
- <th data-field="complete_date" data-sortable="true"><span>完成时间</span></th>
- <th data-field="service_unit" data-sortable="true"><span>所属中心</span></th>
- <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>
- </tr>
- </thead>
- </table>
[html] view plaincopy
- <script>
- function displaycolor(value,row,index) {
- var a = "";
- if(value == "已完成") {
- var a = '<span style="color:#00ff00">'+value+'</span>';
- }else if(value == "已分派"){
- var a = '<span style="color:#0000ff">'+value+'</span>';
- }else if(value == "待办") {
- var a = '<span style="color:#FF0000">'+value+'</span>';
- }else{
- var a = '<span>'+value+'</span>';
- }
- return a;
- }
- </script>
在
[html] view plaincopy
- <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>