bootstrap table 中自定义样式

还是下面的这张图，这次我们要完成三个小样式

1. 状态栏显示【启用】和【禁用】，并对【启用】的字体样式变成绿色，对【禁用】的字体样式变成红色
2. 对多个邮箱按换行方式来展示
3. 对某个列长度超出指定长度后，显示省略号

关于【启用】和【禁用】样式操作

    我这边对【启用】和【禁用】在后台数据库中的表示是1和0，1-代表启用， 0-代码禁用，而样式的控制是通过列参数中的cellStyle和formatter属性来实现的，它可以使用一个自定义的方法且该方法带有三个参数

    value:  该列的值

    row:   该行中所有的数据

    index: 行的索引值

代码片段

{

field: "use_flag" ,

title: "状态" ,

sortable: false ,

formatter: formatCell ,

cellStyle: formatTableUnit

}

// 设置显示启用或禁用的文字

function formatCell(value , row , index){

var title ;

if (value == true){

title = "启用" ;

}

else{

title = "禁用" ;

}

return title ;

}

// 设置table列样式

function formatTableUnit(value , row , index) {

var front_color ;

if(value== "启用"){

front_color = 'green' ;

}

else{

front_color = 'red' ;

}

return {

css: {

"color":front_color ,

"font-weight": 'bold'

}

}

}

关于多个邮箱按换行方式来展示

我这里多个邮件之前是使用逗号(,)来进行分隔的，所以可以通过js的split方法直接对它进行分隔，这里也是通过formatter属性来自定义一个方法来实现的

代码片段

{

field: "alarm_contact" ,

title: "报警联系人" ,

formatter: formatEmail ,

// sortable: true

}

// 格式化显示email

function formatEmail(value , row , index) {

if (value) {

lists = value. split( ',') ;

return lists. join( '<br/>') ;

}

else {

return '-'

}

}

某个列长度超出指定长度后，显示省略号

对于某个列内容过长时，可以通过指定它的css样式来实现对超出长度的部分显示省略号

代码片段

{

field: "res_text" ,

title: "接口返回" ,

width: "350px" ,

cellStyle: formatTableUnit ,

}

function formatTableUnit(value , row , index) {

return {

css: {

"overflow": "hidden" ,

"text-overflow": "ellipsis" ,

"white-space": "nowrap" ,

}

}

}

另外，还需要在css中给table添加一个属性

table{

     table-layout: fixed ;

}