日: 2022年12月21日

Tabulator で行に下線をつける

投稿日: 投稿者:

 

 

 

Tabulator でグループピングするまでもないものの、区切り線で分ければわかりやすくなるので、ソートされたカラムの値でグループで別れてる変わり目に区切り線をつけてみました。

< コード例 >

tableBuiltのリスナーで行を読み込んで下線を引く行にクラスを追加しています。

CSS


.border-bottom-blue1 {
    border-bottom: solid 1px blue
}

JavaScript


        // @@ tabulator テーブル生成完了時 @@ //
        table.on('tableBuilt', function () {

            console.log('--- data loaded ---')
            console.log(new Date().getTime())

            // テーブルの行を配列にする //
            const rows = table.getRows()

            // 日付変化下線用日付配列 //
            let dates = []
            rows.forEach((row) => {
                dates.push(row.getData().subgDepDate)
            })
            console.log(dates)

            // 日が変わる行のインデックス位置を配列にする //
            let underlineIdxs = []
            dates.forEach((dt, i) => {
                if (i > 0 && dt !== dates[i - 1]) {
                    underlineIdxs.push(i - 1)
                }
            })
            console.log(underlineIdxs)

            // ++ 行を走査して下線位置に下線を引く ++ //
            rows.forEach((row, i) => {
                // 該当行の場合 //
                if (underlineIdxs.includes(i)) {
                    const elm = row.getElement()
                    // 下線クラスを追加 //
                    $(elm).addClass("border-bottom-blue1")
                }
            })

        })

< 画面例 >
スカイマークの飛行機の日付別運航履歴がわかりやすくなりました。