给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数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...
随机推荐
- 关于mysql性能压测之tpcc
软件下载: wget http://imysql.com/wp-content/uploads/2014/09/tpcc-mysql-src.tgz安装依赖:yum install -y mysql- ...
- Minimum Cost POJ - 2516 (模板题 spfa最小费用最大流)
题意: 人回家,一步一块钱,有x个人,y个房子,求能回家的最大人数且使之费用最小 解析: 就是....套模板,,,, 建图(⊙﹏⊙)...要仔细观察呐 对于人拆不拆都可以 都能过,,,,这里贴上拆开 ...
- 查看本地Git仓库历史修改内容
查看历史内容 在.git文件 同级目录下,右键 选择 git history 但是红框中的路径无法拷贝.右键红框中的任一文件,有 HighLight this only, Highlight this ...
- 自学Linux Shell11.3-使用变量
点击返回 自学Linux命令行与Shell脚本之路 11.3-使用变量 Shell脚本的执行通常可以采用以下几种方式: 1):bash script-name或sh script-name(推荐使用) ...
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- ormlite 文档
目录[-] A Fast, Simple, Typed ORM for .NET Download 8 flavours of OrmLite is on NuGet: Docs and Downlo ...
- display position 和float的作用和关系
1.传统布局由这三者构成. 2.position设为absolute,那么display一定是block,因此对于span来说,就可以设置高和宽了. 3.position为relative ,那么fl ...
- Spring的FactoryBean使用
Spring中有两种类型的Bean,一种是普通Bean,另一种是工厂Bean,即FactoryBean.工厂Bean跟普通Bean不同,其返回的对象不是指定类的一个实例,其返回的是该工厂Bean的g ...
- MyEclipse新建工作空间后的配置详细步骤
1. General --> Workspace --> UTF-8 2. General --> Editors -->File Associations --> J ...
- 面板 JPanel,滚动面板 JScrollPane,文本域JTextArea
容器中可以有多个JPanel面板,一个JPanel面板中可以有多个控件. 滚动面板 JScrollPane中只能有一个控件. public class Demo extends JFram ...