山ｐの楽しいお勉強生活

勉強の成果を垂れ流していきます

2つのリストボックス内でアイテムを入れ替えるBootstrapプラグイン「Bootstrap Dual Listbox」

bootstrap

概要

2つのリストボックス内でアイテムを入れ替えるBootstrapプラグイン「Bootstrap Dual Listbox」を使用したのでメモ。 このUIを言葉で説明するのは難しいので下記のサンプルを参照。 ちなみに、社内アプリケーション作成中に要件として必要だったので導入。

f:id:yamap_55:20150808132822j:plain

サンプル

Bootstrap Dual Listbox Sample on jsbin.com

コード

↑のサンプルに記載していますが、消えたとき用にコピペ。

  • multipleなselect要素に対してbootstrapDualListbox()メソッドを呼べばOK。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Dual Listbox Sample</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://rawgit.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/dist/bootstrap-duallistbox.css" rel="stylesheet" type="text/css"  />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-git.js"></script>
  <script src="https://rawgit.com/istvan-ujjmeszaros/bootstrap-duallistbox/master/dist/jquery.bootstrap-duallistbox.js"></script>
</head>
<body class="container">
    <select multiple="multiple" size="10" id="sample">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
</body>
</html>

var demo1 = $('#sample').bootstrapDualListbox({
  filterTextClear:'全件表示',
  filterPlaceHolder:'検索',
  moveSelectedLabel:'選択済みに移動',
  moveAllLabel:'選択済みに全て移動',
  removeSelectedLabel:'選択を解除',
  removeAllLabel:'選択を全て解除',
  moveOnSelect: false,
  nonSelectedListLabel: '一覧',
  selectedListLabel: '選択済み一覧',
  infoText:'{0}件',
  showFilterInputs:true,
  infoTextEmpty:'0件',
  infoTextFiltered:'{1}件中{0}件表示',
});

オプション

V3.0.4（2015/08/07時点の最新）のオプションを日本語訳してみた。（原文は公式のSettings） 英語は得意ではないので参考程度にどうぞ。

オプション名 概要
bootstrap2Compatible Bootstrap2の場合は「true」？デフォルト「false」
filterTextClear フィルタリングを行っている際に、全件表示するボタンのラベル名。デフォルト「show all」
filterPlaceHolder フィルタリング文字列を入力するテキストボックスのPlaceHolder。デフォルト「Filter」
moveSelectedLabel 選択済みに移動する「→」ボタンにマウスを当てた際に表示される文字列。デフォルト「Move selected」
moveAllLabel 選択済みに全件移動する「→→」ボタンにマウスを当てた際に表示される文字列。デフォルト「Move all」
removeSelectedLabel 選択済みから移動する「←」ボタンにマウスを当てた際に表示される文字列。デフォルト「Remove selected」
removeAllLabel 選択済みから全件移動する「←←」ボタンにマウスを当てた際に表示される文字列。デフォルト「Remove all」
moveOnSelect マウスクリックで移動させるか否か。falseにすると移動させるための「→」、「←」ボタンが表示されます。trueじゃないとAndroidで動かない？デフォルト「true」
preserveSelectionOnMove 移動させた要素を移動後に選択状態にするかどうか。「moveOnSelect」がfalseの場合に効果が出る。デフォルト「false」
selectedListLabel 選択済みの上部に表示される項目名。デフォルトは表示しない。
nonSelectedListLabel 未選択の上部に表示される項目名。デフォルトは表示しない。
helperSelectNamePostfix デフォルトは「helper」。意味わからず。原文「'helper': The added selects will have the same name as the original one, concatenated with this string and 1 (for the non selected list, e.g. element_helper1) or 2 (for the selected list, e.g. element_helper2).」
selectorMinimalHeight 最小の高さ。単位はpxか？デフォルト「100」
showFilterInputs フィルタリングを行うテキストボックスの表示有無。デフォルト「true」
nonSelectedFilter 未選択のフィルタリングテキストボックスの初期値。デフォルト「」
selectedFilter 選択済みのフィルタリングテキストボックスの初期値。デフォルト「」
infoText 現在の件数の文字列。「{0}」が現在の件数に置き換わる。デフォルト「Showing all {0}」
infoTextFiltered フィルタリングされている際の表示文字列。「{0}」がフィルタリング後の件数、「{1}」が全体件数に置き換わる。デフォルト「Filtered {0} from {1}」
infoTextEmpty 要素が0件の際に表示される文字列。デフォルト「Empty list」
filterOnValues Option要素のvalue値でフィルタリングするか否か。デフォルト「false」

ちなみに

同じ様なUIがBootsnippもあったけど、少しピンとこなかったので今回はスルーしました。

参考URL