bootstrap table 根据单元格中的数据改变单元格的样式
在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value, row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始);table的标签属性是为:data-formatter
可以在bootstrap-table.js直接设置formatter属性:
formatter: function(value,row,index) {
//通过判断单元格的值,来格式化单元格,返回的值即为格式化后包含的元素
var a = "";
if(value == "已完成") {
var a = '<span style="color:#00ff00">'+value+'</span>';
}else if(value == "已分派"){
var a = '<span style="color:#0000ff">'+value+'</span>';
}else if(value == "待办") {
var a = '<span style="color:#FF0000">'+value+'</span>';
}else{
var a = '<span>'+value+'</span>';
}
return a;
}
也可在html里面对单个表格进行设置:
<table data-row-style="statestyle" data-toggle="table" data-url="tables/new_report1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="id" data-sort-order="desc">
<thead>
<span style="white-space:pre"> </span><tr>
<span style="white-space:pre"> </span><th data-field="state" data-checkbox="true"><span>编号</span></th>
<th data-field="id" data-sortable="true"><span>编号</span></th>
<th data-field="report_man" data-sortable="true"><span>报修人</span></th>
<th data-field="phone_number" data-sortable="true"><span>联系电话</span></th>
<th data-field="report_date" data-sortable="true"><span>报修时间</span></th>
<th data-field="order_date" data-sortable="true"><span>预约时间</span></th>
<th data-field="allot_time" data-sortable="true"><span>分派时间</span></th>
<th data-field="complete_date" data-sortable="true"><span>完成时间</span></th>
<th data-field="service_unit" data-sortable="true"><span>所属中心</span></th>
<th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>
</tr>
</thead>
</table>
<script>
function displaycolor(value,row,index) {
var a = "";
if(value == "已完成") {
var a = '<span style="color:#00ff00">'+value+'</span>';
}else if(value == "已分派"){
var a = '<span style="color:#0000ff">'+value+'</span>';
}else if(value == "待办") {
var a = '<span style="color:#FF0000">'+value+'</span>';
}else{
var a = '<span>'+value+'</span>';
}
return a;
}
</script>
<th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>
bootstrap table 根据单元格中的数据改变单元格的样式的更多相关文章
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- bootStrap table 和 JS 开发过程中遇到问题汇总
1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...
- 聚集表(clustered table)data page中的数据行可以无序
误区 一直以为只要一个表含有聚集索引,那么在data page中的数据行是排序的.比如原来data page中有1.2.4.5.6这样四条记录,那么我要插入3这条记录,应该是先将456三条记录往后移, ...
- Gridview 重建表头/单击单元格弹出对话框/改变单元格背景色
整理工作~ 完整的代码在GitHub上, 路径: 项目背景:追踪某个issue,并且记录每天的状态. 要求:1.点击日期就能更改,并且用颜色标志不同的状态 2.增加按钮可关闭issue 3.布局要求日 ...
- python实现处理excel单元格中的数据
实现代码如下: # 将数据单元格(格式为:参数名=值)里的数据以键值对的形式放入字典中,返回该字典 class get_string: def cut_string(self,string): # 将 ...
- EXCEL中,如何引用一个单元格中的数据,作为另一个单元格内容中的一部分?
https://zhidao.baidu.com/question/230715654.html 假设单元格A1值是8(该值由函数计算得出),我要在单元格B1中引用A1的值,但只是作为B1单元格内容中 ...
- BootStrap table动态增删改表格内数据
1:添加一个[操作]列 { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...
- Bootstrap table插件 被选中的行颜色改变
参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...
- 帆软报表(finereport)单元格中各颜色标识的含义
帆软报表(finereport)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形. 控件:单元格右侧中间的各种矩形. 左父格:单 ...
随机推荐
- npm 更新镜像安装Appium
npm -g --registry http://registry.cnpmjs.org install appium
- HDU3572Task Schedule(最大流 ISAP比較快)建图方法不错
Task Schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- 从零開始开发Android版2048 (二)获取手势信息
今天是尝试開始Android版2048小游戏的第二天.在今天,我主要学习了怎样获取用户在屏幕滑动的手势,以及对布局进行了一些小小的完好. 获取用户操作的手势(比方向左滑.向右滑等)主要用到了Gestu ...
- vue native
1.示例 <el-icon icon="Setting" size="sm" @click.native="ceshi">< ...
- Nginx优化指南+LINUX内核优化+linux连接数优化+nginx连接数优化
Most setup guides for Nginx tell you the basics - apt-get a package, modify a few lines here and the ...
- Android gdb so
gdb debug an android application 1.gdb 要有gdbserver 一般模拟器默认装有gdbserver,如2.3.3的模拟器,看一下有没有: D:\Develope ...
- Spring LDAP
LDAP Spring LDAP 使用 - Sayi像秋天一样优雅 - 开源中国社区 http://docs.spring.io/spring-ldap/docs/current/reference/ ...
- StringUtils类使用 (转载)
检查字符串是否为空或null或仅仅包含空格 String test = ""; String test1=" "; String test2 = &quo ...
- 《UNIX 网络编程 第二版》编译环境的搭建( 运行本专栏代码必读 )
第一步:搭建基本的编译环境 安装gcc, g++, bulid-essential等编译软件 第二步:下载本书示例源码包 可在这里下载http://ishare.iask.sina.com.cn/f/ ...
- Struts2基本概念
一.Struts2体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...