新規投稿
フォローする

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

お世話になります。

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

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

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

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

 

 

 

0

8件のコメント

Avatar
江田篤史

kintone素人44様

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

コードの
var limit = 1;

var limit = 2;
に変更してみて下さい。

0
Avatar
kintone_TS44

トヨクモの江田様

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

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

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

0
Avatar
江田篤史

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で実装できないこともないかと思いますが、かなり大変だと思います。

0
Avatar
kintone_TS44

トヨクモの江田様

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

○タイプ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の流れを教えて頂ければ幸いです。

 

 

0
Avatar
江田篤史

kintone素人44様

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

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

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

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

JavaScript

(function() {
  "use strict";
  var tables = [{
    fieldCode: 'table1', //1つ目のサブテーブルのフィールドコード
    rowIndexFieldCode: 'table1RowIndex', //1つ目のサブテーブルの内の行番号保存用フィールドのフィールドコード
  }, {
    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は、ヘッダーを複数行にしてから、ボディ(フィールド)を複数行にしている認識でよろしいのでしょうか?

はい、仰る通りです。

0
Avatar
kintone_TS44

トヨクモの江田様

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

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

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

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

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

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

0
Avatar
江田篤史

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内部処理と競合する可能性もあるため断言はできませんが。

0
Avatar
kintone_TS44

江田篤史様

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

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

0
サインインしてコメントを残してください。