マウスが乗ったセルを反転させて強調表示させるため、組込みの関数を探してみましたが、ないようなので、StackOverFlowの投稿を参考にして、cellのformatterでエレメントにCSSのクラスを追加したり削除したりさせてみました。
< コード例 >
CSS
/* tabulator セル文字反転用 */
.text_reverse {
color: white;
background-color: black;
}
Javascript
// Airport name //
{title: 'Name', field: 'nmAirport', width: 180,
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")
})
return cell.getData().nmAirport
}
},
< 画面例 >
画像には枠をつけてみました。
/* tabulator 画像セル背景反転用 */
.imgback_reverse {
background-color: #B8E2E6;
border: 1px solid #00a0a0;
}
|
|