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

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

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

ファイル

cstap_lib_show_more_records.js

ソースコード

<br /></p><p>// レコード一覧画面のカラム(フィールドコード)<br />var columns = [&quot;レコード番号&quot;, &quot;作成日時&quot;, &quot;作成者&quot;, &quot;チェックボックス&quot;, &quot;添付ファイル&quot;, &quot;Table&quot;];</p><p>// レコード番号のフィールドコード<br />var recordCode = &quot;レコード番号&quot;;</p><p>(function() {<br />  &quot;use strict&quot;;</p><p>  // 一覧ページ<br />  kintone.events.on('app.record.index.show', function(event) {</p><p> // ボタンのイベントリスナー追加<br /> document.getElementById(&quot;button_more&quot;).onclick = showMoreEvent;</p><p> // フォームの定義取得<br /> var appId = kintone.app.getId();<br /> kintone.api('/k/v1/form', 'GET', {<br />app: appId<br /> }, function(resp) {</p><p>// tableHeadColumns作成<br />var formColumns = {};<br />var props = resp.properties;<br />for (var i = 0, len = props.length; i &lt; len; i++) {<br />  var prop = props[i];<br />  formColumns[prop.code] = prop.label;<br />}<br />var tableHeadColumns = [].concat(columns);<br />for (var j = 0, len1 = tableHeadColumns.length; j &lt; len1; ++j) {<br />  var col = tableHeadColumns[j];<br />  if (typeof formColumns[col] !== 'undefined') {<br /> tableHeadColumns[j] = formColumns[col];<br />  }<br />}</p><p>// テーブルのヘッダ部分作成<br />makeTableHead(tableHeadColumns);<br />// テーブルのレコードクリア<br />destroyTableRecords();<br />// 最初のデータを表示する<br />showMoreEvent();</p><p> });</p><p>  });<br />})();</p><p><br />var showMoreEvent = function() {<br />  // レコード取得成功した時のコールバック関数作成<br />  var cb = function(records) {<br /> var tb = document.getElementById(&quot;cstap_tbody&quot;);<br /> var appId = kintone.app.getId();</p><p> for (var i = 0, len = records.length; i &lt; len; i++) {<br />var record = records[i];<br />var last = tb.rows.length;<br />var row = tb.insertRow(last);<br />// 詳細<br />var showCell = row.insertCell(row.cells.length);<br />showCell.innerHTML = '&lt;a href=&quot;/k/' + appId + '/show#record=' + record[recordCode]['value'] + '&quot; class=&quot;btn btn-mini&quot;&gt;詳細&lt;/a&gt;';</p><p>for (var j = 0, columnLen = columns.length; j &lt; columnLen; j++) {<br />  var cell = row.insertCell(row.cells.length);<br />  cell.appendChild(getFieldElement(record[columns[j]]));<br />}</p><p>// 編集<br />var editCell = row.insertCell(row.cells.length);<br />editCell.innerHTML = '&lt;a href=&quot;/k/' + appId + '/show#record=' + record[recordCode]['value'] + '&amp;mode=edit&quot; class=&quot;btn btn-mini&quot;&gt;編集&lt;/a&gt;';<br /> }<br />  };<br />  getMoreRecord(cb);<br />};</p><p><br />var getMoreRecord = function(successCallback) {<br />  var tb = document.getElementById(&quot;cstap_tbody&quot;);<br />  var last = tb.rows.length;<br />  var offset = last;<br />  var limit = 100;<br />  var appId = kintone.app.getId();</p><p>  // 現在の検索クエリ取得<br />  var currentQuery = kintone.app.getQuery();</p><p>  // データ取得<br />  kintone.api('/k/v1/records', 'GET', {<br /> app: appId,<br /> query: &quot;&quot; + currentQuery + &quot; limit &quot; + limit + &quot; offset &quot; + offset<br />  }, function(resp) {<br /> successCallback(resp.records);<br />  });</p><p>};</p><p><br />var makeTableHead = function(columns) {<br />  var th = document.getElementById(&quot;cstap_thead&quot;);<br />  if (th.rows.length === 0) {<br /> var row = th.insertRow();<br /> var showCell = document.createElement('th');<br /> showCell.innerHTML = '';<br /> row.appendChild(showCell);</p><p> for (var i = 0, len = columns.length; i &lt; len; i++) {<br />var cell = document.createElement('th');<br />cell.innerHTML = columns[i];<br />row.appendChild(cell);<br /> }<br /> var editCell = document.createElement('th');<br /> editCell.innerHTML = '';<br /> row.appendChild(editCell);<br />  }<br />};</p><p><br />var destroyTableRecords = function() {<br />  document.getElementById(&quot;cstap_tbody&quot;).innerHTML = &quot;&quot;;<br />};<br />