multiselect.js ダウンロードページデモページ
jquery.multi-select.js の概要 画面からも解るとおり、全体の一覧より( この場合は右側 ) 必要なグループを作成する時に便利なコントロールです。HTML 上で作成するのは、一つの複数選択可能な SELECT 要素のみで、プラグインによって二つのリストボックスを横に並べたようなコントロールを作成してくれます。 OPTION 要素内に selected がある場合に、選択後のデータとして表示されます。それ以外はもう一つの一覧(残り全て)として表示されます。ですから、事前に選択データを用意するという事は、事前に OPTION 要素に selected を指定しておく事と同義です。 表示を JavaScript でリセットしたい場合は、jQuery 等で 元の SELECT 要素の内容を変更しておいて、プラグインの refresh メソッドを使用します
$('#select_item').multiSelect("refresh");選択済みデータの処理 左側のタイトル部分にあるコンボボックスによって選択されたグループをサーバーから読み出して再表示するようになっています。コンボボックスのイベントでは、location.href に URL をセットしてリロードしています( キャッシュされないように、getTime を使用 )
$("#syozoku").on("change", function(){
location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();
} );
カスタマイズ処理 クラスとして、ms-selectable と ms-selection があり、ms-selectable が選択するほうのリストボックスです。ですから、ここでは ms-selectable に float:right、ms-selection に float:left を設定して選択を右に持ってきています( デフォルトでは逆 ) また、このクラスを使って選択後のスクロールが表示される要素に対して、scrollTop( 10000 ) を実行して、選択後のスクロールを一番最後まで移動しています。選択後のリストボックスでは、一番最後にデータが追加されるので、デフォルトでは視認できないのでカスタマイズしています change.php
<?php
require_once("../common.php");
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
require_once("dbsetting.php");
if ( $_GET['scode'] == '' ) {
$_GET['scode'] = '0001';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/jquery/plugins/multiselect/multi-select.css" type="text/css" />
<script>
$(function(){
var option1 = "";
var option2 = "";
var option3 = "";
if ( '<?= $_GET['scode'] ?>' == '0001' ) {
option1 = '<option value="0001" selected>';
}
else {
option1 = '<option value="0001">';
}
if ( '<?= $_GET['scode'] ?>' == '0002' ) {
option2 = '<option value="0002" selected>';
}
else {
option2 = '<option value="0002">';
}
if ( '<?= $_GET['scode'] ?>' == '0003' ) {
option3 = '<option value="0003" selected>';
}
else {
option3 = '<option value="0003">';
}
var syozoku = '<div class="header_item"><select id="syozoku" name="syozoku">'+ option1 +'営業部第一</option>'+ option2 +'営業部第ニ</option>'+ option3 +'営業部第三</option></select></div>';
$('#select_item').multiSelect({
cssClass: "select_item",
keepOrder: true,
selectableHeader: "<div class='header_item'>対象社員</div>",
selectionHeader: syozoku,
afterSelect: function(values){
console.log( values[0] )
console.log( "Select:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )
$("#ms-" + "select_item .ms-selection .ms-list").scrollTop(10000);
},
afterDeselect: function(values){
console.log( values[0] )
console.log( "Deselect:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )
}
});
$("#syozoku").on("change", function(){
location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();
} );
});
</script>
</head>
<body>
<style>
.header_item {
padding: 5px;
text-align: center;
border: solid 1px #ccc;
margin-bottom:2px;
background-color: #eee;
}
.select_item {
width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
padding: 10px;;
}
.select_item ul.ms-list{
height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
float: right;
}
.select_item .ms-selection {
float: left;
}
select {
font-size: 16px;
}
</style>
<form
method="get"
id="target_form"
target="my_ferame"
action="change_update.php"
accept-charset="utf-8">
<input
type="submit"
name="send"
id="send_check"
value="更新"
style='padding:5px;width:600px;margin-bottom:16px;'>
<select
multiple
id="select_item"
name="select_item[]">
<?php
// -------------------------------------
// コンボボックス内容
// -------------------------------------
$query = <<< QUERY
select * from `社員マスタ`
QUERY;
$result = $connect->query($query);
if ( !$result ) {
die('クエリーに誤りがあります : ' . $connect->error );
}
while ($row = $result->fetch_array(MYSQLI_BOTH)) {
$sentaku = "";
if ( $row["所属"] == $_GET['scode'] ) {
$sentaku = "selected";
}
print <<<DISPLAY
<option value="{$row["社員コード"]}" $sentaku>{$row["氏名"]}</option>
DISPLAY;
}
?>
</select>
</form>
<br>
<iframe
name="my_ferame"
frameborder="1"
scrolling="yes"
width="600"
height="200"></iframe>
</body>
</html>
change_update.php
<?php
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
require_once("dbsetting.php");
$list = "";
foreach ($_GET['select_item'] as $scode ) {
if ( $list != "" ) {
$list .= ",";
}
$list .= "'$scode'";
}
$query = <<< QUERY
update `社員マスタ` set
`所属` = '{$_GET['syozoku']}'
,`更新日` = now()
where
`社員コード` in ({$GLOBALS['list']})
QUERY;
//$connect->query($query);
print "<pre>";
print $query;
print "\n---------------------------------\n";
print_r($_GET);
print "</pre>";
?>
関連する記事 jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
|
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
