(著者:落合 雄一)
はじめに
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 |
都道府県 |
文字列(1行) |
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月版で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。