2. 程式人生 > >bootstrap table 編輯列的根據條件 新增背景色

bootstrap table 編輯列的根據條件 新增背景色

阿新 • • 發佈：2019-01-12
{ field:'gmt_create', title:'建立日期', formatter:function(value,row,index){ return row.gmt_create?row.gmt_create.substring(0,19):'-'; }, align:'center', valign:'middle' },{ field:'actual_execute_date'
, title:'下發日期', cellStyle:cellStylesales2, formatter:function(value,row,index){ return timemoreday(row.actual_execute_date?row.actual_execute_date:'-',row.gmt_create?row.gmt_create:'-'); }, align:'center'
, valign:'middle' },{ field:'gmt_mondified ', title:'完結日期', cellStyle:cellStylesales1, formatter : function(value,row,index){ //判斷建立時間和完結時間 var gmt_mondified = row.gmt_mondified?row.gmt_mondified:'-'
if(gmt_mondified!='-'){ return timemoreday(row.gmt_mondified,row.actual_execute_date); } return '-'; }, align:'center', valign:'middle' },{ field:'', title:'用時', cellStyle:cellStylesales, formatter : function(value,row,index){ //判斷建立時間和結束時間 if(!row.gmt_mondified && !row.gmt_create){ return '-'; } return timestampToTime(row.gmt_mondified,row.gmt_create); }, align:'center', //展示實際用時的時間轉化 function timestampToTime(date1,date2) { var end = date1?date1:'-'; var start = date2?date2:'-'; if(end == '-'){ end = new Date(); } var data_strat = Date.parse(start); var data_end = Date.parse(end); var times = Math.abs(data_end-data_strat); var days = (times/(1000*60*60*24)).toString(); var day_time = days.split('.'); //用時展示的形式是天，小時 var clock = Number('0.'+day_time[1]); return day_time[0]+'天'+Math.ceil(clock*24)+'小時'; //修改完結時間用時的背景顏色 function cellStylesales(value, row, index) { var gmt_mondified = row.gmt_mondified?row.gmt_mondified:'-'; var gmt_create = row.gmt_create; if(gmt_mondified == '-'){ gmt_mondified = new Date(); } var data_strat = Date.parse(gmt_create); var data_end = Date.parse(gmt_mondified); var times = Math.abs(data_end-data_strat); var days = times/(1000*60*60*24); if(days>=3 && days<6){ return {css:{background:'#ffeb3b',color:'#000'}}; }else if(days >=6){ return {css:{background:'#f44336',color:'#000'}}; }else{ return {css:{background:'#8bc34a',color:'#000'}}; } }
//下發時間、建立時間判斷超出天數 function timemoreday(date1,date2){ var date1 = date1; var date2 = date2; if(date1 == '-'){ var data_strat = Date.parse(date2); var data_end = Date.parse(new Date()); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ return new Date(); }else if(h>1 && h<=2){ return "超過一天"; }else if(h>2 && h<=3){ return "超過兩天"; }else{ return "超過三天"; } }else{ var data_strat = Date.parse(date2); if(!data_strat){ data_strat = Date.parse(new Date()); } var data_end = Date.parse(date1); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ return date1.substring(0,19); }else if(h>1 && h<=2){ return date1.substring(0,19); }else if(h>2 && h<=3){ return date1.substring(0,19); }else{ return date1.substring(0,19); } } }
//下發日期背景色新增 function cellStylesales2(value, row, index) { var actual_execute_date= row.actual_execute_date?row.actual_execute_date:'-'; var gmt_create = row.gmt_create; if(actual_execute_date == '-'){ var cell_data=''; var data_strat = Date.parse(gmt_create); var data_end = Date.parse(new Date()); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ cell_data = data_end; }else if(h>1 && h<=2){ cell_data = "超過一天"; }else if(h>2 && h<=3){ cell_data = "超過兩天"; }else{ cell_data = "超過三天"; }
if(cell_data == "超過一天"){ return {css:{background:'#8bc34a',color:'#000'}}; }else if(cell_data == "超過兩天"){ return {css:{background:'#f44336',color:'#000'}}; }else if(cell_data == "超過三天"){ return {css:{background:'#f44336',color:'#000'}}; }else{ return {css:{background:'#f9f9f9',color:'#000'}}; } }else{ var cell_data=''; var data_strat = Date.parse(gmt_create); var data_end = Date.parse(actual_execute_date); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ cell_data = actual_execute_date.substring(0,18); }else if(h>1 && h<=2){ cell_data = "超過一天"; }else if(h>2 && h<=3){ cell_data = "超過兩天"; }else{ cell_data = "超過三天"; } if(cell_data == "超過一天"){ return {css:{background:'#8bc34a',color:'#000'}}; }else if(cell_data == "超過兩天"){ return {css:{background:'#f44336',color:'#000'}}; }else if(cell_data == "超過三天"){ return {css:{background:'#f44336',color:'#000'}}; }else{ return {css:{background:'#f9f9f9',color:'#000'}}; } } }
//完結日期超出天數 function cellStylesales1(value, row, index) { var date1 = row.gmt_mondified?row.gmt_mondified:'-'; var actual_execute_date = row.actual_execute_date; if(date1 == '-'){ var cell_data=''; var data_strat = Date.parse(actual_execute_date); var data_end = Date.parse(new Date()); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ cell_data = data_end.substring(0,18); }else if(h>1 && h<=2){ cell_data = "超過一天"; }else if(h>2 && h<=3){ cell_data = "超過兩天"; }else{ cell_data = "超過三天"; }
if(cell_data == "超過一天"){ return {css:{background:'#8bc34a',color:'#000'}}; }else if(cell_data == "超過兩天"){ return {css:{background:'#f44336',color:'#000'}}; }else if(cell_data == "超過三天"){ return {css:{background:'#f44336',color:'#000'}}; }else{ return {css:{background:'#f9f9f9',color:'#000'}}; } }else{ var cell_data=''; var data_strat = Date.parse(actual_execute_date); var data_end = Date.parse(date1); var times = Math.abs(data_end-data_strat); var h = (times/(1000*60*60*24)).toString(); if(h<=1){ cell_data = data_end; }else if(h>1 && h<=2){ cell_data = "超過一天"; }else if(h>2 && h<=3){ cell_data = "超過兩天"; }else{ cell_data = "超過三天"; } if(cell_data == "超過一天"){ return {css:{background:'#8bc34a',color:'#000'}}; }else if(cell_data == "超過兩天"){ return {css:{background:'#f44336',color:'#000'}}; }else if(cell_data == "超過三天"){ return {css:{background:'#f44336',color:'#000'}}; }else{ return {css:{background:'#f9f9f9',color:'#000'}}; } } }
} valign:'middle' }

相關推薦

bootstrap table 編輯列的根據條件 新增背景色

{ field:'gmt_create', title:'建立日期', formatter:func

bootstrap-table 外掛二次開發新增表格行新增和編輯功能

bootstrap-table 外掛新增表格行新增和編輯功能 version 1.11.0 原外掛相關功能完善 新增表格引數totalField:'total' 修改load方法的 this.options.totalRows = data.total; 改為 this.o

[轉]bootstrap table 動態列數

原文地址:https://my.oschina.net/u/2356355/blog/1595563 據說bootstrap table非常好用，從入門教程中瞭解到它的以下主要功能： 由於固定表頭意味著固定的列，然而我需要做動態列數的表格啊。 大致思路：bootstrap table在載入表格時，表

bootstrap table 凍結列 操作無效

在bootstrap-table-fixed-columns.js 中修改程式碼   本人程式碼操作列是 使用a標籤  見下圖 當然 找a標籤的時候可以直接使用fixtb.find('a');無需再去判斷 具體判斷新增點選事件位置 需要根據自己專案情況酌情修改    

Bootstrap Table清空資料後新增資料異常

function filterVave() { $("#table-vave").bootstrapTable('removeAll'); var selectedContent = $("#table-function").bootstrapTable('getSele

bootstrap-table給所有的列表新增提示

需求1 在table中,如果表格資訊過長,顯示不美觀.這時就需要讓超出的部分省略號顯示 需求2 滑鼠移入,顯示完整省略的資訊 問題 - 1,bootstrap 表格寬度是有內容撐開的 - 2 , 表格資訊是動態載入的,如何獲得每一個單元格的內容 程式碼 // commom css

BootStrap Table：列引數

    官方文件地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 列引數     表格的列引數定義在 jQuery.fn.bootstrapTable.columnDefaults 。    

bootstrap-table如何給行內新增操作函式及功能按鍵

$('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ //data:reet.data,url:'../data/yonghuguanli.json', //uniqueId: "SOBID"

JS元件系列——Bootstrap Table 凍結列功能IE瀏覽器相容性問題解決方案

前言：最近專案裡面需要用到表格的凍結列功能，所謂“凍結列”，就是某些情況下表格的列比較多，需要固定前面的幾列，後面的列滾動。遺憾的是，bootstrap table裡自帶的fixed column功能有一點bug，於是和同事討論該如何解決，於是就有了這篇文章。 一、起因回顧 第一列固定 貌似

Django之編輯時根據條件跳轉回原頁面

在要跳轉的編輯頁面： #首先獲取當期的url: curr_url = self.request.GET.urlencode() #建立一個QueryDict物件: params = QueryD

bootstrap-table統計列的值，實現表格統計？

我嘗試了使用Column options裡footerFormatter這個屬性，然而columns: [{ field: 'classNo', title: '編號' }, {

Bootstrap Table 實現列格式化顯示

格式化使用函式formatter 例如： formatter: function (value, row, index) { if (value == 'en')

bootstrap-table表格列寬設定無效問題解決

關於調整boorstrap-table的列寬，自己在網上找了一下資料。現在分享給大家。{title: '備註, field: 'notes', visible: true, align: 'center

簡單JS代--點選誰新增背景色

<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡單JS代--點選誰新增背景色</title> <script src="http://libs.

Goland編輯器設定選擇範圍背景色

為了區分選擇與未選擇區域,，將已選擇區域的文字背景色設定為淺藍色是個很做法。 設定的路徑在Editor > Color Scheme > General > Editor > Selection background，下面以2018版的Goland為例，如圖：

PHP 實現Office word 關鍵詞新增背景色

需求：最近做一個word新聞規範掃描的工具，需要將wold中的內容讀取出來掃描可疑、錯誤詞文字，並將錯誤可疑文字新增背景顏色。內容掃描規範識別不在本文中描述，重點說怎樣通過程式語言操作word實現文字新增背景色。 下載專案目錄如下 在路徑 phpofficep

Vue給單獨頁面新增背景色

由於外層還有一個div，所以設定背景色100%的時候不能全部都被背景色覆蓋。 如果給HTML設定背景色還會影響到其他頁面的背景色。 解決辦法： 給style新增一個scoped表示當前樣式只給當前

在MFC中修改對話方塊、編輯框、button按鈕背景色

一、修改對話方塊背景色： 1、為目標對話方塊新增WM_CTRCOLOR訊息； 2、位目標Dlg類定義一個CBrush型別的私有成員變數：m_brushBg，並在其建構函式中將此畫刷初始為 一個淡藍色畫刷（畫刷顏色可任意修改）：m_brushBg.CreateSolidBru

poi之excle----佔用多行，新增背景色，設定樣式

1 package com.poi.importxls; /* ==================================================================== Licensed to the Apache Software Fo

如何用原生js給特定元素隨機新增背景色

每次做專案都是red,pink,blue,不僅單調乏味，而且充分暴露了自己三級甲等的英語水平，作為一名有理想，積極向上的程式設計師，這是果斷不能忍的事情，今天剛好寫一個用原生js給特定元素隨機新增背景色的方法，瞬間讓單調的生活豐富多彩起來，有了此方法媽媽再也不用