LoginSignup
3
8

More than 5 years have passed since last update.

kintoneの一覧画面で横スクロール時に列を固定する

Last updated at Posted at 2017-04-13

FixedMidashiというライブラリが良さそうだったので試してみました。

kintoneの画面に適用すると以下のように横スクロールで列が固定することができます。
table.gif

JavaScriptの設定

以下2つファイルを設定します。 手順はこちら
1. fixed_midashi.js
2. ↓のjs

(function() {
    'use strict';

    kintone.events.on('app.record.index.show', function() {
        var table = document.querySelector('.recordlist-gaia'); // 一覧の要素取得
        table.setAttribute("_fixedhead", "rows:1; cols:3"); // rows:固定する行数, cols:固定する列数
        table.innerHTML = table.innerHTML.replace('<thead>', '<tr>').replace('</thead>', '</tr>'); // theadをtrに書き換え
        FixedMidashi.create();
    });
}());

注意点

こちらはDOM操作をしているため、製品のアップデートにより動作しなくなる可能性があります。

3
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
8