サブテーブルを複数行にする方法

Legacy_Account1458 · 2020 年 4 月 15 日午前 12:19

お世話になります。

サブテーブルを複数行に分けて表示したいのですが、上手くいきません。

↑のテーブルがあった場合

AA BB CC
[] [] []
DD EE FF
[] [] [] のように表示したいのですが、

↓の様に表示されてしまいます。

https://developer.cybozu.io/hc/ja/community/posts/360054574391-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E8%A4%87%E6%95%B0%E6%AE%B5%E3%81%AB%E3%81%99%E3%82%8B

↑を参考にしたのですが…

Legacy_Account1740 · 2020 年 4 月 15 日午前 12:23

kintone素人44様

お世話になっております。
トヨクモの江田と申します。

コードの
var limit = 1;
を
var limit = 2;
に変更してみて下さい。

Legacy_Account1458 · 2020 年 4 月 15 日午前 12:31

トヨクモの江田様

ご回答ありがとうございます。

現在、
AA BB CC
DD EE FF
[フィールド] [フィールド] [フィールド]
[フィールド] [フィールド] [フィールド]
となっています。

AA BB CC
[フィールド] [フィールド] [フィールド]
DD EE FF
[フィールド] [フィールド] [フィールド]
↑の様に表示する事は可能なのでしょうか？

Legacy_Account1740 · 2020 年 4 月 15 日午前 12:56

kintone素人44様

お世話になっております。

2行以上ある場合はどのような表示になるのでしょうか？

○タイプ1

AA BB CC
[フィールド] [フィールド] [フィールド]
[フィールド] [フィールド] [フィールド]
DD EE FF
[フィールド] [フィールド] [フィールド]
[フィールド] [フィールド] [フィールド]

タイプ1であればサブテーブルを2つ用意すれば良いかと思います。
必要に応じて、テーブル同士間の余白をCSSで調節したり、行数が連動するようなJavaScriptを書けば良いと思います。

○タイプ2

AA               BB              CC
[フィールド] [フィールド] [フィールド]
AA               BB              CC
[フィールド] [フィールド] [フィールド]
DD EE              FF
[フィールド] [フィールド] [フィールド]
DD EE              FF
[フィールド] [フィールド] [フィールド]

タイプ2は、JavaScriptで実装できないこともないかと思いますが、かなり大変だと思います。

Legacy_Account1458 · 2020 年 4 月 15 日午前 1:10

トヨクモの江田様

ご回答、ありがとうございます。

○タイプ1で考えております。
AA BB CC
[フィールド] [フィールド] [フィールド]
[フィールド] [フィールド] [フィールド]
DD EE FF
[フィールド] [フィールド] [フィールド]
[フィールド] [フィールド] [フィールド]

行数を連動するには、どの様にすれば宜しいのでしょうか？

また、
https://developer.cybozu.io/hc/ja/community/posts/360054574391-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E8%A4%87%E6%95%B0%E6%AE%B5%E3%81%AB%E3%81%99%E3%82%8B
のJavaScriptは、ヘッダーを複数行にしてから、ボディ(フィールド)を複数行にしている認識でよろしいのでしょうか？
※説明が下手で申し訳ございません。
※JavaScriptの流れを教えて頂ければ幸いです。

Legacy_Account1740 · 2020 年 4 月 15 日午前 3:37

kintone素人44様

お世話になっております。

>> 行数を連動するには、どの様にすれば宜しいのでしょうか？

まず、各サブテーブルの先頭に、行番号保存用の数値フィールドを追加してください。

続いて、下記JavaScript、CSSを読み込んでください。
JavaScriptコードの3~9行目のフィールドコードはご自身のアプリ設定に合わせて変更してください。
行番号保存用の数値フィールドを非表示にする必要がなければ、CSSは不要です。

JavaScript

(function() {
  "use strict";
  var tables = [{
    fieldCode: 'table1', //１つ目のサブテーブルのフィールドコード
    rowIndexFieldCode: 'table1RowIndex', //１つ目のサブテーブルの内の行番号保存用フィールドのフィールドコード
  }, {
    fieldCode: 'table2', //2つ目のサブテーブルのフィールドコード
    rowIndexFieldCode: 'table2RowIndex', //2つ目のサブテーブルの内の行番号保存用フィールドのフィールドコード
  }];
  kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
    app: kintone.app.getId()
  }).then(function(response){
    tables.forEach(function(table){
      var fields = response.properties[table.fieldCode].fields;
      table.defaultRow = {value: Object.keys(fields).reduce(function(defaultRow, fieldCode){
        defaultRow[fieldCode] = {
          value: fields[fieldCode].defaultValue,
          type: fields[fieldCode].type,
        };
        return defaultRow;
      }, {})};
    });
  });
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
  ], function(event){
    return rowIndex(event);
  });
  tables.forEach(function(table){
    var otherTables = tables.filter(function(otherTable){
      return otherTable !== table;
    });
    kintone.events.on([
      'app.record.create.change.' + table.fieldCode,
      'app.record.edit.change.' + table.fieldCode,
    ], function(event){
      if(event.changes.row){
        var changeRowIndex = event.record[table.fieldCode].value.findIndex(function(row){
          return !row.value[table.rowIndexFieldCode].value;
        });
        otherTables.forEach(function(otherTable){
          event.record[otherTable.fieldCode].value.splice(changeRowIndex, 0, otherTable.defaultRow);
        });
      }else{
        var changeRowIndex = event.record[table.fieldCode].value.findIndex(function(row, index){
          return Number(row.value[table.rowIndexFieldCode].value) !== index;
        });
        changeRowIndex = changeRowIndex >= 0 ? changeRowIndex : event.record[table.fieldCode].value.length;
        otherTables.forEach(function(otherTable){
          event.record[otherTable.fieldCode].value.splice(changeRowIndex, 1);
        });
      }
      return rowIndex(event);
    });
  });
  var rowIndex = function(event){
    tables.forEach(function(table){
      event.record[table.fieldCode].value.forEach(function(row, index){
        row.value[table.rowIndexFieldCode].value = index;
      });
    });
    return event;
  };
})();

CSS

.subtable-gaia th:first-child,
.subtable-gaia td:first-child{
  display: none;
}
.subtable-gaia th:nth-child(2){
  border-left-width: 2px;
}
.subtable-gaia td:nth-child(2){
  border-left-width: 1px;
}

>> また、
https://developer.cybozu.io/hc/ja/community/posts/360054574391-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E8%A4%87%E6%95%B0%E6%AE%B5%E3%81%AB%E3%81%99%E3%82%8B
のJavaScriptは、ヘッダーを複数行にしてから、ボディ(フィールド)を複数行にしている認識でよろしいのでしょうか？

はい、仰る通りです。

Legacy_Account1458 · 2020 年 4 月 15 日午前 3:55

トヨクモの江田様

ご回答、ありがとうございます。
上記のコードで、上手くいきました。

一つ質問なんですが、↓の様なJavaScriptを作成するのは難しいのでしょうか？
AA BB CC
[フィールド] [フィールド] [フィールド]
DD EE FF
[フィールド] [フィールド] [フィールド]

AA BB CC
[フィールド] [フィールド] [フィールド]
DD EE FF
[フィールド] [フィールド] [フィールド]

Legacy_Account1740 · 2020 年 4 月 15 日午前 4:17

kintone素人44様

お世話になっております。

不可能ではありませんが、少なくとも上述のタイプ1よりは難易度は高いです。

下記と同じようにDOM操作が必要となります。
https://developer.cybozu.io/hc/ja/community/posts/360054574391

行追加や行削除の際にヘッダー行を複製して挿入する処理などを書けば、実装できるかと思います。
https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode
https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore
kintone内部処理と競合する可能性もあるため断言はできませんが。

Legacy_Account1458 · 2021 年 9 月 21 日午前 1:44

江田篤史様

上記の方法で、サブテーブルを複数行にしたいのですが、
初回のテーブルは2段に表示されるのですが、
2回目以降のテーブルが、1段のままになってしまいます。

解決方法を、、ご教示頂ければ幸いです。

system · 2024 年 9 月 5 日午前 12:45

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。

トピック		返信	表示
サブテーブルの抽出条件 kintone カスタマイズ	2	95	2021 年 6 月 24 日
サブテーブルのプルダウンを変更すると、テーブル内の別のサブテーブルの値が自動で切り替わる kintone カスタマイズ	2	53	2019 年 11 月 7 日
サブテーブルの行追加時に、別アプリにレコード登録をしたい。 kintone カスタマイズ	2	328	2023 年 11 月 28 日
サブテーブルの印刷について kintone カスタマイズ	2	144	2018 年 10 月 4 日
サブテーブルにボタンかリンクを配置してイベントを発生させたい kintone カスタマイズ	2	144	2016 年 12 月 9 日

サブテーブルを複数行にする方法

関連トピック