给bootstrap table设置行列单元格样式
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参数,但是好像没什么意义。
给bootstrap table设置行列单元格样式的更多相关文章
- POI设置excle单元格样式
Java利用POI生成Excel强制换行 使用POI创建一个简单的 myXls.xls 文件 常用的包为 org.apache.poi.hssf.usermodel.*; ...
- POI HSSFCellStyle 设置 Excel 单元格样式
POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb ...
- EXCEL设置选中单元格样式
你想这样啊,试试这段代码看行不:右键工作表名称--查看代码,在空白处粘贴就可以 Private Sub Worksheet_SelectionChange(ByVal Target As Range) ...
- 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置
涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...
- 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法
本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下 今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...
- 创建excel,合并单元格,设置单元格样式
package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; ...
- NPOI 生成Excel (单元格合并、设置单元格样式:字段,颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等)
NPIO源码地址:https://github.com/tonyqus/npoi NPIO使用参考:源码中的 NPOITest项目 下面代码包括: 1.包含多个Sheet的Excel 2.单元格合并 ...
- 设置table表格的单元格间距两种方式
table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...
- poi的各种单元格样式以及一些常用的配置
之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...
随机推荐
- docker--compose--sonarqube
Create this docker-compose.yml file: version: "2" services: sonarqube: image: sonarqube po ...
- QAU 17校赛 J题 剪丝带(完全背包变形)
题意: 剪一段丝带,对于剪完后的每一段丝带长度必须是a,b,c 输入丝带的长度 n 和 a b c 输出一个整数,代表最多能剪成多少段 样例输入 5 5 3 2 7 5 5 2 样例输出 2 ...
- day5 列表
列表 查 索引(下标),默认从0开始 切片 .count 查某个元素的出现次数 .index 根据内容找元素的对应索引位置 增加 .append() 追加在最后 .insert(index,'内容') ...
- 【BZOJ2299】[HAOI2011]向量(数论)
[BZOJ2299][HAOI2011]向量(数论) 题面 BZOJ 洛谷 题解 首先如果我们的向量的系数假装可以是负数,那么不难发现真正有用的向量只有\(4\)个,我们把它列出来.\((a,b)(a ...
- detectMultiScale 读取冲突的一个解决方法
背景:用的是opencv的HOGDescriptor检测行人,实例化为hog:使用默认的行人检测器: hog.setSVMDetector(cv::HOGDescriptor::getDefaultP ...
- TextView 借助Linkify,使用自定义模式设置链接
http://my.oschina.net/fengheju/blog/176105 TextView是android中的一个比较常用的控件,它有一个非常有趣的特性,可以通过android:autoL ...
- activity window view 关系
1.Activity , Window和View的关系是什么? 跟踪Activity的源码就会发现:Activity.attch() -> PolicyManager -> Policy ...
- Linux中使用Electronic WeChat客户端
微信推出了Windows版和Mac版,一直没有推出也不会推出Linux版本,这就催生了Electronic WeChat(https://github.com/geeeeeeeeek/electron ...
- CF 987
毒瘤啊啊啊啊啊 虽然排名还不错,331,但是B我没做出来...... 这是战绩: 可以看到我大发神威势如破竹的A了CDE,但是B把我卡了三次...不然我就能进前300了(还是很水). 逐一分析题目: ...
- 基于Spring Cloud的微服务入门教程
(本教程的原地址发布在本人的简书上:http://www.jianshu.com/p/947d57d042e7,若各位看官有什么问题或不同看法请在这里或简书留言,谢谢!) 本人也是前段时间才开始接触S ...