bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色

在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value,  row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始);table的标签属性是为:data-formatter

可以再bootstrap-table.js直接设置formatter属性:

[javascript] view plaincopy
在CODE上查看代码片派生到我的代码片
  1. formatter: function(value,row,index) {  
  2.             //通过判断单元格的值,来格式化单元格,返回的值即为格式化后包含的元素  
  3.             var a = "";  
  4.                 if(value == "已完成") {  
  5.                     var a = '<span style="color:#00ff00">'+value+'</span>';  
  6.                 }else if(value == "已分派"){  
  7.                     var a = '<span style="color:#0000ff">'+value+'</span>';  
  8.                 }else if(value == "待办") {  
  9.                     var a = '<span style="color:#FF0000">'+value+'</span>';  
  10.                 }else{  
  11.                     var a = '<span>'+value+'</span>';  
  12.                 }  
  13.                 return a;  
  14.         }  

也可在html里面对单个表格进行设置:

[html] view plaincopy
在CODE上查看代码片派生到我的代码片
  1. <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">  
  2.         <thead>  
  3.         <span style="white-space:pre">    </span><tr>  
  4.             <span style="white-space:pre">    </span><th data-field="state" data-checkbox="true"><span>编号</span></th>  
  5.                 <th data-field="id" data-sortable="true"><span>编号</span></th>  
  6.                 <th data-field="report_man" data-sortable="true"><span>报修人</span></th>  
  7.                 <th data-field="phone_number" data-sortable="true"><span>联系电话</span></th>  
  8.                 <th data-field="report_date" data-sortable="true"><span>报修时间</span></th>  
  9.                 <th data-field="order_date" data-sortable="true"><span>预约时间</span></th>  
  10.                 <th data-field="allot_time" data-sortable="true"><span>分派时间</span></th>  
  11.                 <th data-field="complete_date" data-sortable="true"><span>完成时间</span></th>  
  12.                 <th data-field="service_unit" data-sortable="true"><span>所属中心</span></th>  
  13.                 <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>  
  14.             </tr>  
  15.         </thead>  
  16. </table>  
[html] view plaincopy
在CODE上查看代码片派生到我的代码片
  1. <script>  
  2.     function displaycolor(value,row,index) {  
  3.         var a = "";  
  4.             if(value == "已完成") {  
  5.                 var a = '<span style="color:#00ff00">'+value+'</span>';  
  6.             }else if(value == "已分派"){  
  7.                 var a = '<span style="color:#0000ff">'+value+'</span>';  
  8.             }else if(value == "待办") {  
  9.                 var a = '<span style="color:#FF0000">'+value+'</span>';  
  10.             }else{  
  11.                 var a = '<span>'+value+'</span>';  
  12.             }  
  13.             return a;  
  14.         }  
  15. </script>  

[html] view plaincopy
在CODE上查看代码片派生到我的代码片
  1. <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>  

使用data-formatter="displaycolor"就会执行displaycolor这个方法,来通过判断该列的值来显示不同的颜色;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SVN_06导入项目文档

把这个项目的文档迁入到SVN Server上的库中 【1】首先右键点击projectAdmin目录&#xff0c;这时候的右键菜单例如以下图看到的&#xff1a;选择copy URL toCLipboard,就是复制统一资源定位符&#xff08;URL&#xff09;到剪贴板中 https://KJ-AP01.中国.corpnet:8443/svn/pro…

实现省市二级联动效果

实现效果&#xff1a; 代码&#xff1a; <template><div class"main_tableau"><div class"page_title">百城精算编辑</div><CFlex type"flex" justify"space-between"><div style"margin-top…

jquery操作select(取值,设置选中)

jquery操作select(增加&#xff0c;删除&#xff0c;清空) http://huapengpeng1989412.blog.163.com/blog/static/58828754201342841940720/ jQuery获取Select选择的Text和Value: 123456789$("#select_id").change(function(){//code...}); //为Select添加事件&am…

手机验证码获取

<el-form-item label"短信验证码" required><el-input v-model"ruleForm.verificationcode" placeholder"请添加验证码"><el-button v-if"isdisabled" slot"suffix" style"color:#409EFF;" type&…

在bootstrap table中使用Tooltip

//偏好主题function preferenceFormatter(value, row, index) {var nameString "";if (value.length > 6) {nameString value.substring(0,6) ...;} else{nameString value;}return [<a href"#" data-toggle"tooltip" title value >…

实现值两者之间添加 , 、 | 等字符

展示效果&#xff1a; <span v-for"(item, index) in projectData.bdOwnerList" :key"index"><span style"white-space: nowrap">{{ item.userName }}<spanv-if"projectData.bdOwnerList.length - 1 ! index"style&qu…

状态管理工具vuex的基本使用(vuebus的理解)

vuex的展示图 1. vuex 的基本结构 const store new Vuex.Store({state: {} //相当于 vue结构中的 data getters: {}, // 相当于vue结构中的计算属性使用actions: {}, // 相当于vue结构中的监听属性使用mutations: {},//相当于vue结构中的 methods 方法集合 &#xff08;其中方…

Django.1

Django官方网站&#xff1a;https://www.djangoproject.com/ 使用终端创建Django文件 创建工程 django-admin startproject XXX 创建应用 python manage.py startapp YYY 迁移系统指令&#xff1a; 首先生成迁移文件 python manage.py makemigrations 执行迁移文件 python ma…

vue项目水印添加

import DomSize from wd-domsize-monitor; // 此处为 npm 下载的第三方模块包 import Api_login from "/assets/api/login" // 此处是用户信息接口调用var id shuiyinDiv var isInit false let callback function (ele) {DomSize.bind(ele, function () {//水印被…

mybatis传参

在mybatis的学习中&#xff0c;会发现经常需要传参&#xff0c;这里以上一节写的实体类为基础&#xff0c;当我们要添加一个员工时&#xff0c;需要添加员工的基本信息&#xff0c;以及所属部门&#xff0c;按照以前的方法&#xff0c;在实体类中&#xff0c;添加部门id属性&am…

自定义步骤条

展示图&#xff1a; <template><div classcreateorder><!-- 顶部步骤条 --><div class"createorder_top"><div class"createorder_top_left"><!-- 0 --><span class"createorder_left_set" :class"…

element组件库中table自定义分页效果

1.在data中设置初始值 // 页数 页码search: { offset: 1, // 当前页limit: 10, // 条数total:0, //总数},2.设置获取后的数据分配 :data"tableData.slice((search.offset - 1) * search.limit, search.offset * search.limit)" 3.展示效果&#xff1a;

数据轮播图翻页封装(左右点击)

效果图&#xff1a; <template><div class"box" style"height:200px;"><!-- 左 --><div class"box-left" click"submitrote(left)" mouseenter"chenge_menu(1)" mouseleave"chenge_menu(2)"…

087-把PHP数组中的元素按随机顺序重新排列shuffle

<?php$arrarray(3,23,A,f,123,hello); //定义一个数组echo 排序之前的数组信息&#xff1a;<br>;print_r($arr);shuffle($arr); //对数组进行随机排序echo <br>排序之后的数组信息&#xff1a;<br>;print_r($arr); //输出数组信息#…

基于Element ui 实现输入框只能输入数字并支持千分位

实现效果 设置子组件 <template><el-inputref"money"v-model.trim"money":placeholder"placeholder"v-bind"$attrs"v-on"$listeners"input"formatNumber(money,money)"keyup.enter.native"moneyCh…

Vue-使用webpack+vue-cli搭建项目

一、准备 安装NodeJs 安装Webpack 配置环境变量 技巧使用&#xff1a; 1. npm 淘宝路径配置&#xff1a;npm config set registryhttps://registry.npm.taobao.org  2.查看npm命令列表 > $ npm help 二、搭建项目 1、全局安装vue脚手架工具 vue-cli npm install vue…

CSS-合理使用z-index控制盒子视轴高度,解决z-index失效

关于z-index我们的共识 共识一 首先&#xff0c;我们都同意&#xff0c;z-index对于普通盒子是无效的&#xff0c;这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子&#xff0c;至于什么是“神奇盒子”请慢慢看。 对于普通盒子&#xff0c;不管z-index值如何&…

Activiti6.0教程 Eclipse安装Activiti Diagram插件(一)

最近这段时间打算出一个Activiti6.0的详细教程&#xff0c;Activiti作为一个流行的开源工作流引擎&#xff0c;正在不断发展&#xff0c;其6.0版本以API形式提供服务&#xff0c;而之前版本基本都是要求我们的应用以JDK方式与其交互&#xff0c;只能将其携带到我们的应用中&…

JS性能优化之文档碎片-document.createDocumentFragment

讲这个方法之前&#xff0c;我们应该先了解下插入节点时浏览器会做什么。 在浏览器中&#xff0c;我们一旦把节点添加到document.body&#xff08;或者其他节点&#xff09;中&#xff0c;页面就会更新并反映出这个变化&#xff0c;对于少量的更新&#xff0c;一条条循…

左右滑动栏

展示效果图&#xff1a; 父 <template><div ref"topBox" class"swiper-in page-container bg-white"><div class"page-body"><drag-box class"drag-box"><div class"relative" :class"{ex…