サブテーブルを複数段にする

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

お世話になります

サブテーブルは一行一段だと思いますが、項目が多いので

複数段にしたいのですが、可能でしょうか。

項目１ ｜項目２ ｜・・・・

項目１０｜項目１１｜・・・・

みたいな感じです。

わかりづらいかとは思いますが、何卒よろしくお願いします。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

玉木善朗様

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

下記コードで実装できるかと思います．

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.Table',
    'app.record.edit.change.Table',
  ], function(){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    var labelRow2 = document.createElement('tr');
    var limit = 1; //区切りの場所（0始まり）
    [].map.call(tableElement.getElementsByClassName('subtable-label-gaia'), function(labelElement){
      return labelElement;
    }).forEach(function(labelElement, index){
      if(index > limit){
        labelRow2.appendChild(labelElement);
      }
    });
    tableElement.getElementsByClassName('subtable-header-gaia')[0].appendChild(labelRow2);
    [].map.call(tableElement.getElementsByTagName('tbody')[0].getElementsByTagName('tr'), function(valueRow1){
      return valueRow1;
    }).forEach(function(valueRow1){
      var valueRow2 = document.createElement('tr');
      [].map.call(valueRow1.getElementsByTagName('td'), function(valueElement){
        return valueElement;
      }).forEach(function(valueElement, index){
        if(index > limit){
          valueRow2.appendChild(valueElement);
        }
      });
      valueRow1.parentNode.insertBefore(valueRow2, valueRow1.nextSibling);
    });
  });
})();

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

江田様

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

可能なのですね。とりあえずやってみます。

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

江田様

ご教示ありがとうございました。

一応できるようにはなったのですが、下記ソースでsetSubTable()内の

alert(‘valueRowStart’);

がapp.record.detail.showの場合に表示されないのですが、どういった原因か

お分かりになりますでしょうか。

ヘッダ部分は二段になるのですが、データ部分が二段にならないという現象です。

 

 

  //詳細画面表示時

  kintone.events.on([

    ‘app.record.detail.show’

    ,‘app.record.create.show’

    ,‘app.record.edit.show’

    ,‘app.record.submit.show’

    ,‘app.record.create.change.Table’

    ,‘app.record.edit.change.Table’

  ],function(event){

    setSubTable();

  });

 

    //サブテーブルの段組処理

    function setSubTable(){

      alert(‘setSubTable’);

      var tableElement = document.getElementsByClassName(‘subtable-gaia’)[0];

      var labelRow2 = document.createElement(‘tr’);

      var labelRow3 = document.createElement(‘tr’);

      var limit = 9;

      var limit1 = 16;

      [].map.call(tableElement.getElementsByClassName(‘subtable-label-gaia’), function(labelElement){

        return labelElement;

      }).forEach(function(labelElement, index){

        if(index > limit){

  //         if(index < limit1){

            labelRow2.appendChild(labelElement);

  //         }else{

  //           alert(index);

  //           labelRow3.appendChild(labelElement);

  //         }

        }

      });

      tableElement.getElementsByClassName(‘subtable-header-gaia’)[0].appendChild(labelRow2);

  //      tableElement.getElementsByClassName(‘subtable-header-gaia’)[0].appendChild(labelRow3);

  alert(‘valueRow’);

      [].map.call(tableElement.getElementsByTagName(‘tbody’)[0].getElementsByTagName(‘tr’),function(valueRow1){

        return valueRow1;

      }).forEach(function(valueRow1){

  alert(‘valueRowStart’);

        var valueRow2 = document.createElement(‘tr’);

  //        var valueRow3 = document.createElement(‘tr’);

        [].map.call(valueRow1.getElementsByTagName(‘td’), function(valueElement){

          return valueElement;

        }).forEach(function(valueElement,index){

          if(index > limit){

  //            if(index < limit1){

              valueRow2.appendChild(valueElement);

  //            }else{

  //              valueRow3.appendChild(valueElement);

  //            }

          }

        });

  //        valueRow1.parentNode.insertBefore(valueRow3, valueRow1.nextSibling);

        valueRow1.parentNode.insertBefore(valueRow2, valueRow1.nextSibling);

 alert(‘valueRowEnd’); 

      });

        

    }

 

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

玉木善朗様

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

詳細画面にも対応する場合は，下記のようになります．

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.Table',
    'app.record.edit.change.Table',
  ], function(){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    splitTable(tableElement);
  });
  kintone.events.on([
    'app.record.detail.show',
  ], function(event){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    var tableField = 'Table';
    var done = false;
    new MutationObserver(function(){
      if(!tableElement.getElementsByTagName('tbody')[0]) return;
      if(tableElement.getElementsByTagName('tbody')[0].childNodes.length < event.record[tableField].value.length || done) return;
      splitTable(tableElement);
      done = true;
    }).observe(tableElement.getElementsByTagName('tbody')[0], {childList: true, subtree: true});
  });
  var splitTable = function(tableElement){
    var labelRow2 = document.createElement('tr');
    var limit = 1;
    [].map.call(tableElement.getElementsByClassName('subtable-label-gaia'), function(labelElement){
      return labelElement;
    }).forEach(function(labelElement, index){
      if(index > limit){
        labelRow2.appendChild(labelElement);
      }
    });
    tableElement.getElementsByClassName('subtable-header-gaia')[0].appendChild(labelRow2);
    [].map.call(tableElement.getElementsByTagName('tbody')[0].getElementsByTagName('tr'), function(valueRow1){
      return valueRow1;
    }).forEach(function(valueRow1){
      var valueRow2 = document.createElement('tr');
      [].map.call(valueRow1.getElementsByTagName('td'), function(valueElement){
        return valueElement;
      }).forEach(function(valueElement, index){
        if(index > limit){
          valueRow2.appendChild(valueElement);
        }
      });
      valueRow1.parentNode.insertBefore(valueRow2, valueRow1.nextSibling);
    });
  };
})();

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

江田様

ありがとうございます！期待通りになりました！

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

江田様

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

以前教えていただいた明細を複数行にする方法なのですが、

10行を超えたあたりから表示速度がガクンと落ちるのですが、

なんとか改善する方法はありませんでしょうか。

よろしくお願いします。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

玉木善朗様

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

余分なDOM操作を減らしました。
より処理速度を速くしたいのであれば、追加された行のみ処理するような工夫が必要になるかと思います。

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
  ], function(){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    splitTable(tableElement);
  });
  kintone.events.on([
    'app.record.create.change.Table',
    'app.record.edit.change.Table',
  ], function(){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    splitTableBody(tableElement);
  });
  kintone.events.on([
    'app.record.detail.show',
  ], function(event){
    var tableElement = document.getElementsByClassName('subtable-gaia')[0];
    var tableField = 'Table';
    var done = false;
    new MutationObserver(function(){
      if(!tableElement.getElementsByTagName('tbody')[0]) return;
      if(tableElement.getElementsByTagName('tbody')[0].childNodes.length < event.record[tableField].value.length || done) return;
      splitTable(tableElement);
      done = true;
    }).observe(tableElement.getElementsByTagName('tbody')[0], {childList: true, subtree: true});
  });
  var limit = 1;
  var splitTableHead = function(tableElement){
    var labelRow2 = document.createElement('tr');
    [].map.call(tableElement.getElementsByClassName('subtable-label-gaia'), function(labelElement){
      return labelElement;
    }).forEach(function(labelElement, index){
      if(index > limit){
        labelRow2.appendChild(labelElement);
      }
    });
    tableElement.getElementsByClassName('subtable-header-gaia')[0].appendChild(labelRow2);
  };
  var splitTableBody = function(tableElement){
    [].map.call(tableElement.getElementsByTagName('tbody')[0].getElementsByTagName('tr'), function(valueRow1){
      return valueRow1;
    }).forEach(function(valueRow1){
      if(!valueRow1.childNodes.length){
        valueRow1.parentNode.removeChild(valueRow1);
        return;
      }
      var valueRow2 = document.createElement('tr');
      [].map.call(valueRow1.getElementsByTagName('td'), function(valueElement){
        return valueElement;
      }).forEach(function(valueElement, index){
        if(index > limit){
          valueRow2.appendChild(valueElement);
        }
      });
      if(valueRow2.childNodes.length) valueRow1.parentNode.insertBefore(valueRow2, valueRow1.nextSibling);
    });
  };
  var splitTable = function(tableElement){
    splitTableHead(tableElement);
    splitTableBody(tableElement);
  };
})();

[Legacy_Account1223 (玉木善朗（Legacy Account）)]

江田様

いつもお世話になっております。玉木です。

いつもありがとうございます。かなり改善されました！

[Legacy_Account2471 (がっちゃん（Legacy Account）)]

お世話になります。

本記事を参考に、テーブルを3行分けたいと考えています。

var labelRow2 = document.createElement(‘tr’);

var limit = 1; //区切りの場所（0始まり）

上記の部分を増やすだけでは、3行にすることはできないのでしょうか。

お手数をお掛け致しますが、宜しくお願い致します。

どなたか、ご教示頂けないでしょうか。

色々と試していますが、上手くいきません。