Tabulatorでタイマーで動的に更新された値をもとにしたHTMLでセルの表示を部分的に変更させてみました。
formatterを使ってない場合は、JSONの配列を使って簡潔に出来そうですが、HTMLの部分入替がややこしくなるので、jQueryでDOMエレメントを書き換えています。
< コード例 >
Unix時刻フォーマット関数
/**
* Unix時刻(ms)指定 時:分 フォーマット時刻
* @param {type} utm ミリ秒Unix時刻
* @param {type} incdate 日付有無
* @param {type} withS 秒有無
* @returns {String}
*/
getFormatLocalTime2(utm, incdate, withS = false, withYMD = false) {
//console.log(utm);
const lTM = new Date(utm);
const currMS = lTM.getTime();
const Y = lTM.getFullYear();
const M = lTM.getMonth() + 1;
const D = lTM.getDate();
let h = lTM.getHours();
let n = lTM.getMinutes();
let s = lTM.getSeconds();
h = h.toString().length === 1 ? "0" + h : h;
n = n.toString().length === 1 ? "0" + n : n;
s = s.toString().length === 1 ? "0" + s : s;
const tmtxt = h + ":" + n;
const tmtxtWithDate = Y + "-" + (M < 10 ? "0" : "") + M + "-" +
(D < 10 ? "0" : "") + D + " " + h + ":" + n;
let res = ""
if (incdate) {
res = tmtxtWithDate;
}
else {
res = tmtxt;
}
if (withS) {
res += ":" + s
}
if (withYMD) {
res = Y + "-" + M + "-" + D + " " + res
}
return res
}
現在時刻タイマー
// 時計スタート時刻 //
const sttmutc = Number(sttm - UTC_OFFSET_SECONDS * 1000)
const lt = new LocalTimes()
let tmtxt = lt.getFormatLocalTime2(sttmutc, 0, true)
$("#utctime").text(tmtxt + " (UTC)")
// tableのcellのformatterで使う //
let tmtxtUTCLong = lt.getFormatLocalTime2(sttmutc, 0, true, true)
//console.log(tmtxtUTCLong)
tmtxt = lt.getFormatLocalTime2(sttm, 0, true)
$("#yourtime").text(tmtxt + " (You)")
// == 時計時刻タイマー == //
let tmpos = 0
const clockTimer = setInterval(() => {
const curtmutc = sttmutc + parseInt(1000 * tmpos)
let tmfmt = lt.getFormatLocalTime2(curtmutc, 0, true)
//console.log(tmfmt)
tmtxtUTCLong = lt.getFormatLocalTime2(curtmutc, 0, true, true)
//console.log(tmtxtUTCLong)
$("#utctime").text(tmfmt + " (UTC)")
const curtmyou = sttm + parseInt(1000 * tmpos)
tmfmt = lt.getFormatLocalTime2(curtmyou, 0, true)
$("#yourtime").text(tmfmt + " (You)")
if (tmpos % 30 === 0 && tmpos !== 0) {
// セルのAgo minutesを書き換え //
updateRowDiffTimes(lt, tmtxtUTCLong)
}
tmpos++;
}, 1000) // <=== 1秒間隔
カラムの初期設定
// ログ追加 クライアント時刻 UTC時刻 更新遅延秒 //
{
//headerTooltip: true,
title: "Your Time", field: "TM_ADD_UTC_SHORT",
width: 50, hozAlign: "center",
formatter: function (cell, formatterParams, onRendered) {
// 反転させて強調 //
const cellelm = cell.getElement()
$(cellelm).on("mouseover", function (e) {
$(this).addClass("text_reverse")
})
$(cellelm).on("mouseout", function (e) {
$(this).removeClass("text_reverse")
})
/**
* Now - UTC追加時刻 分取得
*/
const diffMinutesToNow = (datatm, nowtm) => {
const lts = new LocalTimes()
return Math.round(lts.getMinuteTimeDifference(datatm, nowtm))
}
const utcfmt = cell.getData().TM_ADD_UTC
const dt = utcfmt.split(" ")[0]
const tm = utcfmt.split(" ")[1]
const y = dt.split("-")[0]
let m = dt.split("-")[1]
let d = dt.split("-")[2]
let h = tm.split(":")[0]
let n = tm.split(":")[1]
let s = tm.split(":")[2]
m = m.slice(0, 1) === "0" ? m.slice(1) : m
d = d.slice(0, 1) === "0" ? d.slice(1) : d
h = h.slice(0, 1) === "0" ? h.slice(1) : h
n = n.slice(0, 1) === "0" ? n.slice(1) : n
s = s.slice(0, 1) === "0" ? s.slice(1) : s
const dttm = new Date(y, m, d, h, n, s)
const dttmvalUTC = dttm.getTime()
const dttmvalLocal = Number(dttmvalUTC) + Number(UTC_OFFSET_SECONDS * 1000)
const lt = new LocalTimes()
const ltfmt = lt.getFormatLocalTime2(dttmvalLocal, 0, false, false)
const secagotxt = "SA " + cell.getData().UPDATED_SEC_AGO
const diffToNow = diffMinutesToNow(cell.getData().TM_ADD_UTC, tmtxtUTCLong)
return ltfmt + "<br>" + cell.getValue() + "<br>" + secagotxt + "<br>" +
diffToNow + "MA"
// tmtxtUTCLong
},
タイマーで更新した値にしてHTMLを部分的書き換え
/**
* テーブルの差異分更新
* @param {type} lt 時刻処理ユーティリティクラスのインスタンス
* @param {type} currtmtxt 現在時刻テキスト
* @returns {undefined}
*/
const updateRowDiffTimes = (lt, currtmtxt) => {
const rows = table.getRows()
//console.log("rows.length:" + rows.length)
// ++ テーブル行走査 ++ //
rows.forEach((row) => {
const utclong = row.getData().TM_ADD_UTC
// ++ jQueryによる列走査 ++ //
$.each($(row.getElement()).children(""), function (j, itm) {
const fld = $(this).attr("tabulator-field")
// UTC時刻列の差異分を書き換え //
if (fld === "TM_ADD_UTC_SHORT") {
//console.log($(this).html())
let html = $(this).html()
let ary = html.split("<br>")
// セルデータのUTC時刻と今との差異分 //
const diffToNow = Math.round(lt.getMinuteTimeDifference(utclong, currtmtxt)) + "MA"
//console.log(diffToNow)
// セルを書き換え //
ary[3] = diffToNow
$(this).html(`${ary[0]}<br>${ary[1]}<br>${ary[2]}<br>${ary[3]}`)
}
})
})
}
< 画面例 >
タイマーで30秒に1回、離着陸が何分前であるかを更新していく
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2fd3df59.139435c4.2fd3df5a.4476ff8c/?me_id=1243227&item_id=10255526&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fauc-toysanta%2Fcabinet%2F050mok050%2Fbs-4qgu000vcn-009.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2ec9c0a0.c0ae1684.2ec9c0a1.2e1c0049/?me_id=1285657&item_id=12769889&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbookfan%2Fcabinet%2F01041%2Fmt4910037430236.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2da28325.98229e1b.2da28326.40bbd3b8/?me_id=1278256&item_id=17885927&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F3729%2F2000006933729.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2d6b6799.7e4f498b.2d6b679a.47787c76/?me_id=1213310&item_id=13103506&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F3913%2F9784873113913.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
コメントを投稿するにはログインしてください。