新規投稿
フォローする

【一覧画面】Sortableを利用したレコードの並び替え

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

一覧画面でレコードをドラッグで並べ替えをしたいと思い

以下の記事を参考にコードを書きました。(ほぼコピーしました)

https://developer.cybozu.io/hc/ja/articles/203530824-Sortableを利用したレコードの並び替え

しかし、ドラッグ&ドロップで行の移動はできたのですが

並び順(番号)が1から順に振られません。(参考記事のようになりません…)

原因となっている箇所を教えていただきたいです。

コンソールにはドラッグするとこのようなエラーが出ます。

《 フィールド名/フィールドコード 》

  • 作業順/作業順 ⇐ 参考記事の"並び順"にあたるフィールド
  • 図面No./図面No

-------------------------------------------------------


(function() {
"use strict";

/**
* 並び替え可能なviewを表示
*/
function SortableRecordsManager(records) {
this.records = records;
this.recordOrderMap = records.map(function(recordData) {
// orderNumが0のときは、レコード番号で初期化
if (recordData["作業順"]["value"] === "0") {
recordData["作業順"]["value"] = recordData["recordId"]["value"];
}
return {"作業順": recordData["作業順"]["value"], "図面No": recordData["図面No"]["value"]};
});

// 並び替えられた図面No.の配列を一つ前の図面No.の配列と比較し、レコード番号と並び順の対を取得する
this.update = function(updatedArray) {
var tmp = $.extend(true, {}, this.recordOrderMap);
var updateRecordOrderMap = $.extend(true, {}, this.recordOrderMap);
var len = updatedArray.length;
for (var i = 0; i < len; i++) {
var prev = tmp[i]["図面No"];
var cur = updatedArray.shift();
if (prev !== cur) {
updateRecordOrderMap[i]["図面No"] = cur;
}
}
this.recordOrderMap = $.extend(true, {}, updateRecordOrderMap);
return this.recordOrderMap;
};

// すべてのレコードについて行追加
this.createTableRecords = function() {
var tb = document.getElementById("cstap_tbody");
// 追加取得できたレコードの件数
var len = this.records.length;

// すべてのレコードについて行追加
for (var i = 0; i < len; i++) {
var record = this.records[i];

// 行作成
var row = tb.insertRow(tb.rows.length);
row.id = record["図面No"]["value"];
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = record["作業順"]["value"];
cell2.innerHTML = record["得意先名"]["value"];
cell3.innerHTML = record["図面No"]["value"];
}
};

// テーブルのクリア
this.destroyTableRecords = function() {
document.getElementById("cstap_tbody").innerHTML = "";
};
}

/**
* Kintoneと通信を行うクラス
*/
var KintoneRecordManager = function() {
this.query = '';
this.records = [];
this.appId = kintone.app.getId();
this.query = '';
this.limit = 100;
this.offset = 0;

// すべての並び順を更新する(作業順を上からふり直す?)
this.updateOrderNums = function(recordOrderNumArray) {
var records = [];
for (var key in Object.keys(recordOrderNumArray)) {
records.push(
{
record: {
作業順: {
value: recordOrderNumArray[key]["作業順"]
}
}
}
);
}
console.log(records);
kintone.api(kintone.api.url('/k/v1/records', true), 'PUT', {
app: this.appId,
records: records
});
};

// ”並び順”でソート済みのすべてのレコード取得する
this.getSortedRecords = function(callback) {
this.query = kintone.app.getQueryCondition() + "order by 作業順 asc";
this.getRecords(callback);
};

// すべてのレコード取得する
this.getRecords = function(callback) {
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: this.appId,
query: this.query + (' limit ' + this.limit + ' offset ' + this.offset)
}, (function(_this) {
return function(res) {
var len;
Array.prototype.push.apply(_this.records, res.records);
len = res.records.length;
_this.offset += len;
if (len < _this.limit) {
_this.ready = true;
if (callback !== null) {
callback(_this.records);
}
} else {
_this.getRecords(callback);
}
};
})(this));
};
};

// レコード一覧画面
kintone.events.on('app.record.index.show', function(event) {
var kintoneRecordManager = new KintoneRecordManager();
var sortableRecordsManager = null;

kintoneRecordManager.getSortedRecords(function(sortedRecords) {
sortableRecordsManager = new SortableRecordsManager(sortedRecords);
sortableRecordsManager.destroyTableRecords();
sortableRecordsManager.createTableRecords();
});

$('#cstap_tbody').sortable({
// 並び替えが終了し、要素の位置が変更されたときに呼び出されるイベント
update: function(event, ui) {
// 並び替えられた要素のid(図面No.)の配列を取得
var updated = $('#cstap_tbody').sortable('toArray');
console.log(updated);
// 並び替えられたid(図面No.?)の配列を一つ前のidの配列と比較し、作業順と図面No.の対を取得する
var result = sortableRecordsManager.update(updated);
console.log(result);
// kintoneに結果を反映させる
kintoneRecordManager.updateOrderNums(result);

}
});
});
})();

 

 

0

0件のコメント

ログインしてコメントを残してください。