別途プルダウンリストを用意しておいて、「対応中」だけを表示し直す。
というような仕組みは可能なのでしょうか？
kintoneは表示された後で画面操作をするイメージなので、
サブテーブルの内容をみつつ行を表示する／しないを判別するのは難しいと思っているのですが、可能であればヒントをご教授下さい。
大西 範知さん
cstapの瀧ヶ平です。
汎用的に実装するのは難しいですし、DOM操作が必要となるためあまりおすすめはできませんが、サブテーブルが一つだけであれば
document.querySelectorAll("subtable-gaia tr");
でサブテーブルの行が全て取得できるので、レコード上で条件が合わないサブテーブルの行があれば、その添字のtr要素を非表示にするような形で実装できるのではないでしょうか？
参考になれば幸いです
ご返信ありがとうございます。
サブテーブルは1つだけです。
kintoneはhtmlを表示後に画面を変更すると思っているのですが、
vartable =document.querySelectorAll("subtable-gaia tr");
テーブルを読み込んでおいて、あとでデーブルのみ構築して表示することは出来るのでしょうか・・・。
大西さん
app.record.detail.showのタイミングではすでにテーブルが表示されているので、実際には表示時のイベントで非表示にして、その後表示をコントロールする形になるかと思います。
ご返信ありがとうございます。
developer networkをサブテーブルで検索して参考になりそうなコードを探してみましたが、なかなか見当たりませんでした。
少し考え方を変えて、サブテーブルに非表示フラグをユーザが付けられるようにし、
フラグが立っている行だけを非表示にするのも結果的には同じ話になりそうでしょうか。。。
DOM操作でサブテーブルの列を複数行非表示にしたい
https://cybozudev.zendesk.com/hc/ja/community/posts/207684803-DOM操作でサブテーブルの列を複数行非表示にしたい
↑ ここを参照して一度テーブルをすべて非表示にし、document.querySelectorAllで一度すべて読み込み、
フラグが付いていないtrのみ素描する感じでしょうか。
大西さん
そうですね、一度すべての行に対して displaty: none;を指定した上で、何らかの操作なりで再度条件を検証して一つ一つの行に対してdisplayスタイルを空にするという流れになります。
すべての行を非表示にするのは先程取得したtablesに対して行えばいいだけなのでそこまで苦労は無いかと思います
ありがとうございます。
いろいろと仕組みを考えましたが、登録日でソートし、新⇒古で登録する。
サブテーブルをn行毎に表示する。という方式に変更してみました。
↓ソートについてはサンプルがあり、実装できました。
(function() {
"use strict";
/**
* テーブルのソート
*
* @param Array table value(ex. event.record.Table.value)
* @param string orderBy フィールドコード(price)
* @param boolean isDesc ASC(false) or DESC(true)
*/
var sortTable = function(table, orderBy, isDesc) {
table.sort(function(a, b) {
var fieldType = a.value[orderBy].type;
var v1 = a.value[orderBy].value;
var v2 = b.value[orderBy].value;
// 数値と日時は変換してから比較
switch (fieldType) {
case 'RECORD_NUMBER':
case 'NUMBER':
var v1 = parseFloat(v1);
var v2 = parseFloat(v2);
break;
case 'DATE':
case 'TIME':
case 'DATETIME':
case 'CREATED_TIME':
case 'UPDATED_TIME':
var v1 = (new Date(v1)).getTime();
var v2 = (new Date(v2)).getTime();
break;
}
var pos = isDesc ? -1 : 1;
if (v1 > v2) {
return pos;
}
if (v1 < v2) {
return pos * -1;
}
});
};
// 登録、編集時の処理
kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function(event) {
var table = event.record.商談履歴.value;
sortTable(table, '登録日', true);
return event;
});
})();
サブテーブルをn行毎に表示する、なのですが、途中まで上手くいっているのですが、
ボタンを何回押されたかをリロード後に持ち越せないでしょうか？
3件のみサブテーブルを表示する。ボタンを設置しリロードする。
までは完成したのですが、ボタンを押したとき、
2回目であれば、4～6を表示、3回目であれば、7～9
という方式にしたいのですが、変数をURLに入れ込んで持ち越し、
読み込むようなサンプルが無く困っています。
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
if (!event.record) {
return;
}
var subTotals = new Array([]);
var tableRecords = event.record.商談履歴.value;
// 全行表示しないプログラム
// var tbodyTimerId = setInterval(function () {
// for (var i = 0; i < tableRecords.length+1; i++) {
// clearInterval(tbodyTimerId);
// $("table tbody tr:nth-child("+i+")").hide();
// }
// }, 1000);
var startrow = 0;
// 表示する行数
var displayrow = 3;
// データ総数が表示する行数以下であれば実行ししない
if (displayrow < tableRecords.length) {
// ページボタンを設置
var myIndexButton = document.createElement('button');
myIndexButton.id = 'index_button01';
myIndexButton.innerHTML = '次の'+displayrow+'件を表示';
myIndexButton.onclick = function() {
// ボタンボタンをクリックされたらリロード
location.reload(true);
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
// 表示データを作成
var tbodyTimerId = setInterval(function () {
for (var i = displayrow+1; i <= tableRecords.length; i++) {
clearInterval(tbodyTimerId);
$("table tbody tr:nth-child("+i+")").hide();
}
}, 1000);
}
});
})(jQuery);
すいません。
なんとか自己解決できました。
サブテーブルに対して、前の10件、次の10件ボタンを作成して
見易くしてみました。
ただ、一瞬全件表示されてはしまうので、データが多くなるとどうなるか判りません。。。
サブテーブルの欠点ですね。
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
if (!event.record) {
return;
}
var subTotals = new Array([]);
var tableRecords = event.record.商談履歴.value;
// 全行表示しないプログラム
// var tbodyTimerId = setInterval(function () {
// for (var i = 0; i < tableRecords.length+1; i++) {
// clearInterval(tbodyTimerId);
// $("table tbody tr:nth-child("+i+")").hide();
// }
// }, 1000);
var start = 1;
// 表示する行数
var displayrow = 10;
//現在のURLを取得
var parm = location.hash;
var hash = location.hash.split('&');
//変数argはオブジェクトですよ
var arg = new Object([]);
// for文でhashがある限りループさせる
for(var i=0;hash[i];i++) {
// 変数kvにpairを=で区切り配列に分割する
var kv = hash[i].split('=');// kvはkey-value
// 最初に定義したオブジェクトargに連想配列として格納
arg[kv[0]]=kv[1]; // kv[0]がkey,kv[1]がvalue
}
// そもそもpageがなかったらpageを1にセットする
if (!arg.page) {
arg.push('page');
arg.page=1;
var _parm = parm;
}else{
// pageがあurlにあれば消す
// 10page以上は未対応
var _parm = parm.replace( /\&page\=[0-9]/g , "" );
}
// データ総数が表示する行数以下であれば実行ししない
if (displayrow < tableRecords.length) {
// 表示する件数を計算する
var _displayrow1 = displayrow*arg.page;
var _displayrow2 = _displayrow1-displayrow;
// 前に表示するものが無ければボタンを表示しない
if ( displayrow < _displayrow1 ) {
// ページボタンを設置
var btn1 = document.createElement('button');
btn1.id = 'index_button01';
btn1.name = 'index_button01';
btn1.innerHTML = '前の'+displayrow+'件を表示';
btn1.onclick = function() {
arg.page--;
// pageを追加してリロード
location.href="https://lightwell1973.cybozu.com/k/278/show" + _parm +"&page=" +arg.page;
location.reload();
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(btn1);
}
// 次に表示するものが無ければボタンを表示しない
if ( _displayrow1 < tableRecords.length) {
// ページボタンを設置
var btn2 = document.createElement('button');
btn2.id = 'index_button02';
btn2.name = 'index_button02';
btn2.innerHTML = '次の'+displayrow+'件を表示';
btn2.onclick = function() {
arg.page++;
// pageを追加してリロード
location.href="https://lightwell1973.cybozu.com/k/278/show" + _parm +"&page=" +arg.page;
location.reload();
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(btn2);
}
// 表示データを作成
var tbodyTimerId = setInterval(function () {
for (var i = 0; i <= tableRecords.length; i++) {
clearInterval(tbodyTimerId);
if ( _displayrow2 > 0 && _displayrow2 > i ){
$("table tbody tr:nth-child("+i+")").hide();
}
if ( _displayrow1 < i ) {
$("table tbody tr:nth-child("+i+")").hide();
}
}
}, 1000);
}
});
})(jQuery);