Sortableを利用したレコードの並び替え

jQuery UI は v1.13 をもってメンテナンスモードになりました。

（著者：落合 雄一）

はじめに

jQuery UI とは、インタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリです。今回はSortableを使って、レコードをドラッグ＆ドロップで並び替えし、並び順を保存するTipsを紹介します。なおコード中のjQueryは、$とします。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/174/

ログイン情報はcybozu developer network デモ環境で確認してください。

jQuery UI Sortable

jQuery UI Sortable

一覧画面で、要素をドラッグ＆ドロップで並び替えたいと思うことがあるかと思います。Sortableは、こんな場合にピッタリです(^^♪ Webサイトのサンプルを見るとイメージがつかめるかのではないでしょうか？

基本的な使い方は、並び替えを行いたい要素(liやtr)の親(ulやtbody)のidを指定するだけです。

$(“#id”).sortable();

たったこれだけで、並び替えを実現することが出来ます。素晴らしいですね＼(^o^)／

サンプルアプリ

サンプルアプリのフィールドは、以下のようになります。

フィールド名	フィールドタイプ	フィールドコード	備考
並び順	数値	orderNum	初期値：0
都道府県	文字列(１行)	prefecture

一覧にはカスタマイズビューを利用します。カスタマイズビューには以下のHTMLを指定します。

レコードをいくつか追加してから表示すると以下のようになります。

JavaScriptとCSS

サンプルコードの他に、jQueryとjQuery UIのライブラリを読み込ませる必要があります。Cybozu CDNを利用しましょう。

• JavaScript
  • https://js.cybozu.com/jquery/3.6.1/jquery.min.js
  • https://js.cybozu.com/jqueryui/1.13.2/jquery-ui.min.js
  • sample.js（以下のコードをコピーして保存し、アップロードしてください）
• CSS
  • sample.css（以下のコードをコピーして保存し、アップロードしてください）

JavaScriptの説明

①Sortableによる並び替え

jQuery UI Sortableに、カスタマイズビューで指定したHTMLのtbody要素(id = “sortable_tbody”)を指定します。

②並び順の保存

並び順を保存するには、Sortableにupdateイベントを追加します。これで”並び替えられた”を検知できます。updateイベント内の $(‘#id’).sortable(‘toArray’) で”並び替えられた要素のidの配列”を取得します。この情報をkintoneに反映させれば、並び順が保存できます。kintone REST APIのrecords.jsonのPUTメソッドで更新します。

北海道と岩手を並び替えてみると・・・

しっかり並び替えが行われていますね！！

最後に

今回、Sortableを使ったレコードの並び替えについて説明しました。並び替えまでは簡単ですが、並び順の保存まで行うと少し複雑になりますね^^;

このTipsは、2022年12月版で確認したものになります。