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

（著者：落合 雄一）

はじめに

「jQuery UIの活用」では、jQuery UIを利用したJavaScriptカスタマイズを紹介していきます。jQuery UI とは、インタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリです。記念すべき第１回は、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^)／

サンプルアプリ

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

一覧にはカスタマイズビューを利用します。カスタマイズビューには以下の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月版で確認したものになります。