(著者:落合 雄一)
はじめに
「jQuery UIの活用」では、jQuery UIを利用したJavaScriptカスタマイズを紹介していきます。jQuery UI とは、インタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリです。記念すべき第1回は、Sortableを使ったレコードの並び替えをご紹介します(^^)
Sortableを使うと、簡単に並び替えを行うことができます。しかし、並び順を保存しないと再読み込み時に元の並び順に戻ってしまいますね(^^;;
今回は、レコードをドラッグ&ドロップで並び替えし、並び順を保存するTipsを紹介します。なおコード中のjQueryは、$とします。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/174/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
jQuery UI Sortable
HP:http://jqueryui.com/sortable/
よく一覧画面で、要素をドラッグ&ドロップで並び替えたいと思うことがかるかと思います。Sortableは、こんな場合にピッタリです(^^♪ HPのサンプルを見るとイメージがつかめるかのではないでしょうか?
基本的な使い方は、並び替えを行いたい要素(liやtr)の親(ulやtbody)のidを指定するだけです。
$(“#id”).sortable();
たったこれだけで、並び替えを実現することが出来ます。素晴らしいですね\(^o^)/
サンプルアプリ
サンプルアプリのフィールドは、以下のようになります。
フィールド名 |
フィールドタイプ |
フィールドコード |
備考 |
レコード番号 |
レコード番号 |
recordId |
|
並び順 |
数値 |
orderNum |
初期値:0 |
都道府県 |
文字列(1行) |
prefecture |
|
一覧にはカスタマイズビューを利用します。カスタマイズビューには以下のHTMLを指定します。
表示すると以下のようになります。
JavaScript
サンプルコードの他に、jQueryとjQuery UIのライブラリを読み込ませる必要があります。cybozuが提供するCDNを利用しましょう。
- https://js.cybozu.com/jquery/1.11.1/jquery.min.js
- https://js.cybozu.com/jqueryui/1.11.1/jquery-ui.min.js
JavaScriptの説明
①Sortableによる並び替え
jQuery UI Sortableに、カスタマイズビューで指定したHTMLのtbody要素(id = “cstap_tbody”)を指定します。
②並び順の保存
並び順の保存のためにはSortableにupdateイベントを追加します。これで”並び替えられた”を検知できます。updateイベント内で”並び替えられた要素のidの配列”を取得します。これは$(‘#id’).sortable(‘toArray’)を使うことで出来ます。この情報をkintoneに反映させれば、並び順の保存を実現することが出来ます。kintoneに保存させるためには、kintone REST APIのrecords.jsonをPUTメソッドで使用します。
北海道と岩手を並び替えてみると・・・
しっかり並び替えが行われていますね!!
最後に
今回、Sortableを使ったレコードの並び替えについて説明しました。並び替えまでは簡単ですが、並び順の保存まで行うと少し複雑になりますね^^;
これから、jQuery UI のTipsをご紹介していきたいと思っておりますので、よろしくお願いします!
このTipsは、2014年12月版で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。