kintone:101件以上を「さらに表示」ボタンを使って表示する

サンプル(JavaScript)の利用方法について

サンプル(JavaScript)の利用方法について

ファイル

cstap_lib_show_more_records.js

ソースコード

[code language=”javascript”]
/**
* 説明
* レコード一覧は最大100件までしか表示できないので、カスタムビューを使って101件以上を「さらに表示」ボタンを使って表示する
* 絞り込み、ソートしたもののみ表示
*
* 依存関係
* http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_get_field_element.js
* http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_bootstrap.css
*
* 使い方
* 1．27行目 var columns = []に一覧で表示するフィールドコードを指定
* 2．30行目 レコード番号のフィールドコードを変更している場合は、var recordCode = "レコード番号"を変更
* 3．カスタマイズビューに下記HTMLを指定
<table class="recordlist-gaia">
<thead id="cstap_thead"></thead>
<tbody id="cstap_tbody"></tbody>
</table>
<button type="button" id="button_more" class="btn btn-large btn-success">さらに表示</button>
*
* URL
* http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_show_more_records.js
*
* @author Yuichi Ochiai <ochiai@cstap.com>
*/

// レコード一覧画面のカラム(フィールドコード)
var columns = ["レコード番号", "作成日時", "作成者", "チェックボックス", "添付ファイル", "Table"];

// レコード番号のフィールドコード
var recordCode = "レコード番号";

(function() {
"use strict";

// 一覧ページ
kintone.events.on('app.record.index.show', function(event) {

// ボタンのイベントリスナー追加
document.getElementById("button_more").onclick = showMoreEvent;

// フォームの定義取得
var appId = kintone.app.getId();
kintone.api('/k/v1/form', 'GET', {
app: appId
}, function(resp) {

// tableHeadColumns作成
var formColumns = {};
var props = resp.properties;
for (var i = 0, len = props.length; i < len; i++) {
var prop = props[i];
formColumns[prop.code] = prop.label;
}
var tableHeadColumns = [].concat(columns);
for (var j = 0, len1 = tableHeadColumns.length; j < len1; ++j) {
var col = tableHeadColumns[j];
if (typeof formColumns[col] !== 'undefined') {
tableHeadColumns[j] = formColumns[col];
}
}

// テーブルのヘッダ部分作成
makeTableHead(tableHeadColumns);
// テーブルのレコードクリア
destroyTableRecords();
// 最初のデータを表示する
showMoreEvent();

});

});
})();

/* ボタンクリック時のイベント */
var showMoreEvent = function() {
// レコード取得成功した時のコールバック関数作成
var cb = function(records) {
var tb = document.getElementById("cstap_tbody");
var appId = kintone.app.getId();

for (var i = 0, len = records.length; i < len; i++) {
var record = records[i];
var last = tb.rows.length;
var row = tb.insertRow(last);
// 詳細
var showCell = row.insertCell(row.cells.length);
showCell.innerHTML = '<a href="/k/' + appId + '/show#record=' + record[recordCode]['value'] + '" class="btn btn-mini">詳細</a>';

for (var j = 0, columnLen = columns.length; j < columnLen; j++) {
var cell = row.insertCell(row.cells.length);
cell.appendChild(getFieldElement(record[columns[j]]));
}

// 編集
var editCell = row.insertCell(row.cells.length);
editCell.innerHTML = '<a href="/k/' + appId + '/show#record=' + record[recordCode]['value'] + '&mode=edit" class="btn btn-mini">編集</a>';
}
};
getMoreRecord(cb);
};

/* レコード取得 */
var getMoreRecord = function(successCallback) {
var tb = document.getElementById("cstap_tbody");
var last = tb.rows.length;
var offset = last;
var limit = 100;
var appId = kintone.app.getId();

// 現在の検索クエリ取得
var currentQuery = kintone.app.getQuery();

// データ取得
kintone.api('/k/v1/records', 'GET', {
app: appId,
query: "" + currentQuery + " limit " + limit + " offset " + offset
}, function(resp) {
successCallback(resp.records);
});

};

/* テーブルヘッダ作成 */
var makeTableHead = function(columns) {
var th = document.getElementById("cstap_thead");
if (th.rows.length === 0) {
var row = th.insertRow();
var showCell = document.createElement('th');
showCell.innerHTML = '';
row.appendChild(showCell);

for (var i = 0, len = columns.length; i < len; i++) {
var cell = document.createElement('th');
cell.innerHTML = columns[i];
row.appendChild(cell);
}
var editCell = document.createElement('th');
editCell.innerHTML = '';
row.appendChild(editCell);
}
};

/* テーブルデータクリア */
var destroyTableRecords = function() {
document.getElementById("cstap_tbody").innerHTML = "";
};
[/code]