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;

}