skillup

技術ブログ

JavaScript デザイン

jquery multipleについて(応用編) keepOrder

投稿日:

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。

公式ページには下記のように書けばOKとかいてあります。

このように書けば確かに左の項目の順番を選んだ順に組み替えることができます。

が、この方法だと実際にsubmitをしたときに順番が保存されないのです・・・

なおかつ、値を実際にデータベースに保存して意図した順番で表示したいときやエラー処理などで値が戻ってきたときに入力値の順番を保存させておくのも一筋縄ではいきません。

この対処について書きたいと思います。

順番を保存したまま送るには

選んだ項目の順番を保存したい場合は、残念ながらこのプラグインのディフォルトの設定だけではだめです。

multiSelectには値を選んだ後の処理を書くことができます。

詳しくは公式ドキュメントに書いてありますが、下記のように書きます。(afterSelect,afterDeleteがそうです。)

#data_idというのはhiddenで選択値をカンマ区切りで入力しておくフィールドで、これをhtmlに用意しておきます。

要するに項目を選ぶたびに値を別の場所にカンマ区切りで登録します。これが順番を保持した真の値になります。

削除する場合はちょうど対象の値だけを削除することになります。

データベースで処理をしたりする場合にはこちらの値を使います。

値を読み込むとき

上記は値を送信するときですが、エラーなどで値を再読み込みするときや、データベースから読み込むときも順番を保持させたい場合は特別な処理がいります。

1 この場合、まず値を順番通りにならべ、カンマ区切りでhiddenでhtmlに入れておく(さきほどのdata_idの原理をそのまま使います。)

2 ページを読み込んだ瞬間に下記のコードを実行させる。

multiSelect(“select”,何らかの値)で選択状態にすることができます。

配列を読み込ませてもエラーにはならないのですが、うまく順番が保存できませんでした。

上記のようにすれば値の順番を保存させたまま、データの更新、再表示が可能になります。

コードで書くとなんてことはないんですが、これだけの実装にやたら時間がかかりました。

参考リンク

http://stackoverflow.com/questions/22020142/jquery-multiselect-output-data-in-the-order-in-which-it-was-selected

-JavaScript, デザイン
-

執筆者:


  1. ほにゃほにゃ より:

    afterSelect,afterDeleteを使わなくてもこれで並び順のまま値を取得できますよ。
    var orderedItems = new Array();
    $(‘.ms-elem-selection.ms-selected’).each(function(i, elem) {orderedItems.push( $(elem).text() );});

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5d10aa …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …