（著者：落合 雄一）
はじめに
jQuery UI とは、インタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリです。今回はSortableを使って、レコードをドラッグ＆ドロップで並び替えし、並び順を保存するTipsを紹介します。なおコード中のjQueryは、$とします。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/174/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
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（以下のコードをコピーして保存し、アップロードしてください）
- 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月版で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。