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)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形. 控件:单元格右侧中间的各种矩形. 左父格:单 ...
随机推荐
- VC++中MCI播放音频文件 【转】
MCI播放mp3音频文件例程 源文件中需要包含头文件 Mmsystem.h,在Project->Settings->Link->Object/libray module中加入库 Wi ...
- myBatis-plus异常提示For input string: "{0=null}"
异常信息 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.Per ...
- C#中toolStrip或statusStrip遮挡了SplitContainer怎么办?
如果在一个项目中先增添了SplitContainer,然后再添加的Toolbar或statusStrip,结果后者把前者上部或下部挡住了一条,造成界面别扭. 解决办法是右键点击Toolba或statu ...
- mediawiki 管理员/行政员设置
mediawiki行政员找回 mediawiki 1.22.6默认安装完毕后,无管理员/行政员.默认都是user组成员.这样不便于wiki系统维护. 注: 默认情况下.行政员组(bureaucrat) ...
- 【学习笔记】C#中HashTable和快速排序的用法,从单词频率统计小程序写起
先瞎扯点别的.进入这个神圣的地方总需要些鞭策,阿西巴,我是被鞭策进来摆摊的程序猿.软件工程老师说,写程序,发博客,就来博客园.这是个号召力很强的口号.最近看网络营销 搜索引擎优化的书多一些,只能说王老 ...
- JS 常用字符串操作
Js字符串操作函数大全 /******************************************* 字符串函数扩充 ...
- transient、volatile关键字
transient是在对象序列化的时候,不参与序列化的字段. 如LinkedList实现了Serializable,其中有变量transient int size = 0; 在Serializable ...
- c结构体里的数组与指针
/* 訪问成员数组名事实上得到的是数组的相对地址.而訪问成员指针事实上是相对地址里的内容 */ struct buf_str { int length; char buf[0]; }; struct ...
- python 修饰符(转载)
首先一个修饰符的实例: #!/usr/bin/env python def run(fn): def do_hello(): print "begin..." fn() print ...
- 模式识别之不变矩---SIFT和SURF的比较