给bootstrap table设置行列单元格样式
2024-10-15 18:34:07
1、根据单元格或者行内其他单元格的内容，给该单元格设置一定的css样式
columns: [{
field: 'index',
title: '序号',
align:"center",
formatter:function(value, row, index){
return index+1;
}，
cellStyle:{
css:{"background-color":"red"}
}
}]
这样的代码可以将序号这个单元格的背景色改成红色，可以发现无非是给这个json加上一个cellStyle，其内容又是一个json对象，里面对应着key-value形式的数据，从而改变单元格的样式。
那如何根据其数据内容来改变这个样式呢，参考上面的formatter的方法，我们可以将cellStyle部分这样改动一下。
cellStyle:function(value,row,index){
if (value==1){
return {css:{"background-color":"red"}}
}else{
return {css:{"background-color":"green"}}
}
}
根据value（该单元格的值），row（该行的数据对象），index（= =就是简单的表示该列表的第几个，从0开始）这三个属性就行条件的判定，只要依旧返回json对象就好了，多个css之间用逗号隔开就行。
2、根据单元格或者行内其他单元格的内容，给该单元格设置一定的css样式
与刚才的方式类似，只不过这次并不是加在colums内的json数组里，而是和colums平级放置，代码如下:
rowStyle:function(row,index){
if (index==1){
return {css:{"background-color":"red"}}
}else{
return {css:{"background-color":"green"}}
}
},
columns: [...]
cellStyle可以针对单个单元格的
value进行样式的设置，rowStyle虽然也可以加入value参数，但是好像没什么意义。
最新文章
- 网站上如何添加显示favicon
- Java集合系列：-----------07Map架构
- 常用sql语句整理[SQL Server]
- jsp机制基础
- python编码-1
- LightOJ1079 Just another Robbery（DP）
- [jPlayer] HTML5 Audio & Video for jQuery
- HDU-4515 小Q系列故事——世界上最遥远的距离
- GET POST方法长度限制
- datarow用linq查询
- MVC的DependencyResolver组件
- JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法
- 《ActiveMQ in Action》【PDF】下载
- iOS: FFmpeg编译和使用 学习
- VSCode插件MSSQL教程（昨天提了一下）
- javascript 面向对象（多种创建对象的方式）
- Android Studio Gradle 多渠道自动打包，动态修改HostUrl，签名apk，混淆配置详解
- maven项目（转）
- phpcms调用指定文章内容模型的ID
- 【python】控制台输出颜色