Saoline Tips

画像のサイズや列数を変えてTabulatorでサムネイル表示させる為、列数、列幅を動的設定してみました。

< コード例 >

ローカルストレージにあるユーザー設定読込

// == ユーザー設定読込 == //
    const envmap = new ConfigPhoto().readLSMap()
    const w = envmap["thumbwidth"]    // 列幅
    const colcnt = envmap["colcnt"]   // 列数

// サムネイル列 //
let COLUMNS = [
  {title: `検索結果 X <span id="cnt_photo"></span>
           `,
    columns: []
  }
]

// ++ 設定列数分の列を動的追加 ++ //
for (let j = 0; j < colcnt; j++) {

  // 画像列 //
  const coltmp = {
    title: "", field: "COL" + j, width: w, hozAlign: "center",
    formatter: cellFormat, contextMenu: cellContextMenu
  }
  COLUMNS[0]["columns"].push(coltmp);

  // 非表示列 //
  COLUMNS[0]["columns"].push({field: "COL" + j + "_COL_AVG", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_URL", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_PHOTOID", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_TITLE", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_PHOTOGRAPHER", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_POS", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_IDX", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_CATEG_KANJI", visible: false})
  COLUMNS[0]["columns"].push({field: "COL" + j + "_URL_ORIGINAL", visible: false})

}

// 列設定 //
const tablerows = this.getArrangedColumnsDataColCnt(data, colcnt)

// ++ Tabulator ++ //
let table = new Tabulator("#table_photos", {
  columns: COLUMNS,
  data: tablerows,
  //placeholder: '見つかりませんでした',

  //layout: 'fitColumns',
  //layout:"fitData",
  layout: "fitDataTable",

  rowHeight: Math.round(w * 3 / 4),
  headerVisible: false

})

列設定メソッド

  /**
   * テーブル用サムネイル列設定
   * 列数指定用 使用
   * 
   * @param {type} data 応答データ
   * @param {type} colcnt 列数
   * @returns {Array|Photos.getArrangedColumnsData.resdatas}
   */
  getArrangedColumnsDataColCnt(data, colcnt) {

// == ユーザー設定幅読込 == //
 const w = new ConfigPhoto().readLSMap()["thumbwidth"]

  let resdatas = []
  let row = {}
  data.forEach((tmp, i) => {

    const mod = i % colcnt;

    row["COL" + mod] = w <= 250 ? tmp["URL_SMALL"] : tmp["URL_MEDIUM"]
    row["COL" + mod + "_COL_AVG"] = tmp["COL_AVG"]
    row["COL" + mod + "_URL"] = tmp["URL"]
    row["COL" + mod + "_PHOTOID"] = tmp["PHOTOID"]
    row["COL" + mod + "_TITLE"] = tmp["TITLE"]
    row["COL" + mod + "_PHOTOGRAPHER"] = tmp["PHOTOGRAPHER"]
    row["COL" + mod + "_POS"] = tmp["POS"]
    row["COL" + mod + "_IDX"] = tmp["IDX"]
    row["COL" + mod + "_NM_CATEG_KANJI"] = tmp["NM_CATEG_KANJI"]
    row["COL" + mod + "_URL_ORIGINAL"] = tmp["URL_ORIGINAL"]

    if (i === data.length - 1) {
      resdatas.push(row)
    }

    else if (mod === colcnt - 1) {
      resdatas.push(row)
      row = {}
    }



  })
  return resdatas

}

< 画面例 >

幅250px 5列

幅100px 12列

幅60px 16列

< コード例 >

// ロード時既定ソート列 リクエストパラメータはsortでMapのList //
      initialSort: [
        {column: "NM_FILE", dir: "asc"}, //sort by this first
                //{column:"TM_UPDATE", dir:"desc"}//then sort by this second
      ],

カラムの1行目にspanをセット

<span id="sorttxt" class="ml-2">ソート列:ソート順</span>

ソート後のイベント

  /**
     * ソート表示テキスト
     * @param {type} clms
     * @param {type} sorters
     * @returns {String}
     */
    const sortstsstr = (clms, sorters) => {
      
      let clmmap = {}
      clms.forEach(tmp => clmmap[tmp.field] = tmp.title)
      
      let res = ""
      sorters.forEach(st => 
        res += clmmap[st["field"]] + (st.dir === "asc" ? ":小さい順 " : "大きい順 ")
      )
      return res
      
    }
    
    // @@ ソートが完了した時 @@ //
    table.on("dataSorted", function (sorters, rows) {
      //sorters - array of the sorters currently applied
      //rows - array of row components in their new order
      
   
      // 初回ロード時も呼ばれる //
      $("#sorttxt").text(sortstsstr(COLUMNS[0]["columns"], sorters))
      
      
    });

< 画面例 >