bootstrap table 中自定义样式
来源:互联网 发布:js时间戳转换成时间 编辑:程序博客网 时间:2024/05/22 08:07
还是下面的这张图,这次我们要完成三个小样式
- 状态栏显示【启用】和【禁用】,并对【启用】的字体样式变成绿色,对【禁用】的字体样式变成红色
- 对多个邮箱按换行方式来展示
- 对某个列长度超出指定长度后,显示省略号
关于【启用】和【禁用】样式操作
我这边对【启用】和【禁用】在后台数据库中的表示是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(',');returnlists.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;
}
阅读全文
1 0
- bootstrap table 中自定义样式
- bootstrap-table自定义复选框列的样式
- bootstrap table样式丢失
- Bootstrap 之Table样式
- bootstrap table 中自定义新增操作
- bootstrap-table自定义查询
- bootstrap设置table的样式
- bootstrap table 中自定义修改和删除操作
- 修改 bootstrap table 默认detailRow样式
- bootstrap-table,当前行鼠标悬停样式
- bootstrap自定义样式-bootstrap侧边导航栏的实现
- css 中table简易样式
- 如何给bootstrap table设置行列单元格样式
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
- android中自定义样式
- bootstrap中固定table的表头
- bootstrap中table的行拖拽实现
- 在bootstrap table中使用Tooltip
- 初识人工智能--决策树算法
- openstack 修改 cpu 超配比例
- android 完美解决getview position多次调用
- JVM之Jstat工具原理
- 科普:intel CPU 微架构的发展史
- bootstrap table 中自定义样式
- freemaker中空值,null值,不存在的属性的判断
- 回调模式
- PostgreSQL的存储过程简单入门
- Raspbian更新源
- jsp文件中引入js、css文件失败问题
- 本地存储的使用跟删除
- iOS基础知识5
- ucos-iii学习之前后台系统