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)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形. 控件:单元格右侧中间的各种矩形. 左父格:单 ...
随机推荐
- Exchange 2013 Database Move to New Partition
建议不要删除默认数据库,可以通过修改默认数据库名称.路径等实现您的需求. 客戶:The HK Anti-Cancer Society. 要求:遷移數據庫(01)到新分區,實際是遷移成為數據庫(05) ...
- vue2.0 vue-router
一.SPA中路由的简单实现 main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-route ...
- eclipse从svn检出项目
在eclipse的project explorer 右键->import->svn->从svn检出项目,然后填写资源库的位置,完成,然后一直next. 直到项目检出完成后,选择项目, ...
- 轻松搞定RabbitMQ(一)——RabbitMQ基础知识+HelloWorld
转自 http://blog.csdn.net/xiaoxian8023/article/details/48679609 本文是简单介绍一下RabbitMQ,参考官网上的教程.同时加入了一些自己的理 ...
- restframework-总结
1. 规范 - 版本控制 - 部署专用的域名(防止跨域攻击) - 因为restframework又称为面向资源的编程所以url名词需要用专业的名词去表示 - 请求方式method - url上可以传递 ...
- Kubernetes基本概念之Label
系列目录 在为对象定义好Label后,其他对象就可以通过Label来对对象进行引用.Label的最常见的用法便是通过spec.selector来引用对象. apiVersion: v1 kind: R ...
- libraries_v140_x64_py35_1.0.1.tar.bz2 libraries_v120_x64_py27_1.1.0.tar 下载链接以及百度云下载链接
下载链接 wget -c https://github.com/willyd/caffe-builder/releases/download/v1.0.1/libraries_v140_x64_p ...
- 后端程序员看前端想死(三)是不是该学点js了
CSS盒子模型 div布局 js 这些都懂一点,但仅仅是懂一点,有时间就学一下咯
- 理解DOMSTRING、DOCUMENT、FORMDATA、BLOB、FILE、ARRAYBUFFER数据类型
一.XMLHttpRequest 2.0的家臣们 我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位.职位兴起以及工作分工等.抛开IE6浏览器不谈,其他浏览器 ...
- 二进制安装Mysql 5.6(免编译)
安装系统基础软包 yum install -y make bc perl gcc openssl openssl-devel ncurses ncurses-devel 安装方式:二进制免编译安装 查 ...