给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数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...
随机推荐
- 【长期更新】 PHP题目
1.要求在一组数中,插入一个新数,并维护原来的排序方式不变 <?php //1.要求在一组数中,插入一个新数,并维护原来的排序方式不变 function insertArr($arr,$val) ...
- mvc 验证登录
很多时候,我们需要多个页面验证用户是否登录 有2中方法. 一种是继承 Attrbuite属性,添加验证,这个可以网上搜索. 我一般使用下面的方式 创建BaseWebController继承Contro ...
- day 变量的赋值原理 变量的命名规则
print(3*4*5*6/2) #简单的计算输出 x=3 y=4 print("x乘以y=",x*y) #运行5分钟 = 12 print(x*y) #在运行5分钟 = 12 ' ...
- hihocoder部分题解
hihocoder1609 数组分拆II [dp] 给定数组,问有多少种拆法,使得每一段不出现重复的数字,且要保证分组数最少.(1e5) 题解: O(n) d[i]表示1~i最小划分的段数, f[i] ...
- emWin 之 WM_SetCallback 创建回调函数
@2018-7-11 [小记] emWin 通过函数 WM_SetCallback ( ) 自定义回调函数 > 下段代码就是通过 MESSAGEBOX 控件的 OK 按键实现删除信息框的对话框 ...
- 洛谷 P3253 [JLOI2013]删除物品 解题报告
P3253 [JLOI2013]删除物品 题目描述 箱子再分配问题需要解决如下问题: (1)一共有\(N\)个物品,堆成\(M\)堆. (2)所有物品都是一样的,但是它们有不同的优先级. (3)你只能 ...
- cf500E New Year Domino (倍增)
先用线段树处理出推倒某一个后能覆盖到的最右端的位置R(绝对不能是最右边的那个骨牌,因为有可能右面的很短,左面的巨长(R不随L单调),后面算花费又需要用到这个位置),之后可以花费R到第一个比R大的左端点 ...
- bzoj1007/luogu3194 水平可见直线 (单调栈)
先按斜率从小到大排序,然后如果排在后面的点B和前面的点A的交点是P,那B会把A在P的右半段覆盖掉,A会把B在P的左半段覆盖掉. 然后如果我们现在又进来了一条线,它跟上一条的交点还在上一条和上上条的左边 ...
- [luogu2657][windy数]
luogu2657 思路 数位dp,记录下上个位置的数,如果当前的数字与上个数字的差值小于2,就不再转移.还是要注意排除前导0.在记忆化的时候,全都是前导0的情况不能记忆化. 代码 #include& ...
- 一次有趣的ant-design与后端数据交互的使用
最近有个需求是新闻时间排序与点击量排序,数据库中存储的新闻是按照时间顺序排序的,从后台数据中取出数据,在前端进行页面展示即可. 我用到了ant-design中的Tabs切换页,样式大概如下图. 其实这 ...