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设置行列单元格样式的更多相关文章

  1. POI设置excle单元格样式

    Java利用POI生成Excel强制换行 使用POI创建一个简单的   myXls.xls   文件       常用的包为   org.apache.poi.hssf.usermodel.*;    ...

  2. POI HSSFCellStyle 设置 Excel 单元格样式

    POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb ...

  3. EXCEL设置选中单元格样式

    你想这样啊,试试这段代码看行不:右键工作表名称--查看代码,在空白处粘贴就可以 Private Sub Worksheet_SelectionChange(ByVal Target As Range) ...

  4. 【POI xlsx】使用POI对xlsx的单元格样式进行设置 / 使用POI对xlsx的字体进行设置

    涉及到的样式都在代码中有说明: package com.it.poiTest; import java.io.FileNotFoundException; import java.io.FileOut ...

  5. 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法

    本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下 今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...

  6. 创建excel,合并单元格,设置单元格样式

    package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; ...

  7. NPOI 生成Excel (单元格合并、设置单元格样式:字段,颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等)

    NPIO源码地址:https://github.com/tonyqus/npoi NPIO使用参考:源码中的 NPOITest项目 下面代码包括: 1.包含多个Sheet的Excel 2.单元格合并 ...

  8. 设置table表格的单元格间距两种方式

    table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...

  9. poi的各种单元格样式以及一些常用的配置

    之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...

随机推荐

  1. docker--compose--sonarqube

    Create this docker-compose.yml file: version: "2" services: sonarqube: image: sonarqube po ...

  2. QAU 17校赛 J题 剪丝带(完全背包变形)

    题意: 剪一段丝带,对于剪完后的每一段丝带长度必须是a,b,c 输入丝带的长度  n 和  a  b  c 输出一个整数,代表最多能剪成多少段 样例输入 5 5 3 2 7 5 5 2 样例输出 2 ...

  3. day5 列表

    列表 查 索引(下标),默认从0开始 切片 .count 查某个元素的出现次数 .index 根据内容找元素的对应索引位置 增加 .append() 追加在最后 .insert(index,'内容') ...

  4. 【BZOJ2299】[HAOI2011]向量(数论)

    [BZOJ2299][HAOI2011]向量(数论) 题面 BZOJ 洛谷 题解 首先如果我们的向量的系数假装可以是负数,那么不难发现真正有用的向量只有\(4\)个,我们把它列出来.\((a,b)(a ...

  5. detectMultiScale 读取冲突的一个解决方法

    背景:用的是opencv的HOGDescriptor检测行人,实例化为hog:使用默认的行人检测器: hog.setSVMDetector(cv::HOGDescriptor::getDefaultP ...

  6. TextView 借助Linkify,使用自定义模式设置链接

    http://my.oschina.net/fengheju/blog/176105 TextView是android中的一个比较常用的控件,它有一个非常有趣的特性,可以通过android:autoL ...

  7. activity window view 关系

    1.Activity , Window和View的关系是什么? 跟踪Activity的源码就会发现:Activity.attch() -> PolicyManager -> Policy ...

  8. Linux中使用Electronic WeChat客户端

    微信推出了Windows版和Mac版,一直没有推出也不会推出Linux版本,这就催生了Electronic WeChat(https://github.com/geeeeeeeeek/electron ...

  9. CF 987

    毒瘤啊啊啊啊啊 虽然排名还不错,331,但是B我没做出来...... 这是战绩: 可以看到我大发神威势如破竹的A了CDE,但是B把我卡了三次...不然我就能进前300了(还是很水). 逐一分析题目: ...

  10. 基于Spring Cloud的微服务入门教程

    (本教程的原地址发布在本人的简书上:http://www.jianshu.com/p/947d57d042e7,若各位看官有什么问题或不同看法请在这里或简书留言,谢谢!) 本人也是前段时间才开始接触S ...