(2)
(0)
(1)
(0)
Total: 3 js 一覧表示のチェックボックス関連の制御をまとめたクラス
prototype.jsやjQueryの出現でajaxに限らずJavaScriptでのプログラミングが随分に楽になりました。
今回は検索結果一覧などテーブル内の複数行などに、データ選択用のチェックボックスがつけられているケースで、よく使う制御を簡単に実装できるようにまとめたクラスをprototype.jsをベースに作成してみました。
実装した機能
・チェックされた行の背景色を変更する
・全てチェックと全て解除
・チェックされた行のみ表示
・１つでもチェックされているかを確認する
・チェックされている値を取得
実装のルール
チェックボックスを含む親エレメントに任意のクラス名を指定する。
サンプルの例ではtrタグになりますので、
<tr class="任意の名前"> 例：<tr class="check_row">
を指定します。
実装方法
サンプルのhtmlソースを見たほうが早いかもしれませんが、、
１．prototype.js、ctl_checkbox.jsの読み込み
HTML:
２．CtlCheckBoxクラスの初期化（親クラス名とチェック時の背景色を指定）
JavaScript:
-
var ChkCtl;
-
document.observe('dom:loaded', function() {
-
ChkCtl = new CtlCheckBox('check_row', 'lightyellow');
-
ChkCtl.load();
-
});
３．各処理の記述
全て選択
JavaScript:
-
ChkCtl.setAll(1)
全て解除
JavaScript:
-
ChkCtl.setAll(0)
選択中のみ表示
JavaScript:
-
ChkCtl.showChecked()
全て表示
JavaScript:
-
ChkCtl.showAll()
１つでも選択されているかどうかを判断する
JavaScript:
-
ChkCtl.isChecked()
選択されている値の取得
JavaScript:
-
ChkCtl.getChecked()
ソースコード：ctl_checkbox.js
JavaScript:
-
/***
-
* CheckBox Control
-
*/
-
var CtlCheckBox = Class.create({
-
initialize: function(wrap_class, bgcolor_on){
-
this.wrap_class = wrap_class;
-
this.bgcolor_on = bgcolor_on;
-
this.wrap_styles = $H({});
-
},
-
load: function(){
-
var h = $H({});
-
this.wrapElments = $$('.' + this.wrap_class);
-
this.wrapElments.each(function(e){
-
var chkbox = e.down('input[type="checkbox"]');
-
if(chkbox){
-
h.set(chkbox.identify(), e.identify());
-
chkbox.observe('click', function() {
-
this.setColor();
-
}.bind(this));
-
chkbox.observe('change', function() {
-
this.setColor();
-
}.bind(this));
-
this.wrap_styles.set(e.identify(), e.getStyle('background-color'));
-
}
-
}.bind(this));
-
this.checbox2wrap = h;
-
this.setColor();
-
},
-
showAll: function(){
-
this.checbox2wrap.each(function(h){
-
$(h.value).show();
-
});
-
},
-
hideAll: function(){
-
this.checbox2wrap.each(function(h){
-
$(h.value).hide();
-
});
-
},
-
onAll: function(){
-
this.checbox2wrap.each(function(h){
-
$(h.key).checked = true;
-
});
-
this.setColor();
-
},
-
offAll: function(){
-
this.checbox2wrap.each(function(h){
-
$(h.key).checked = false;
-
});
-
this.setColor();
-
},
-
setAll: function(checked){
-
this.checbox2wrap.each(function(h){
-
$(h.key).checked = checked;
-
});
-
this.setColor();
-
},
-
setColor: function(){
-
if(!this.bgcolor_on) return;
-
this.checbox2wrap.each(function(h){
-
var chk = $(h.key);
-
if(chk.checked){
-
$(h.value).setStyle('background-color:' + this.bgcolor_on);
-
}else{
-
$(h.value).setStyle('background-color:' + this.wrap_styles.get(h.value));
-
}
-
}.bind(this));
-
},
-
showChecked: function(){
-
this.checbox2wrap.each(function(h){
-
var chk = $(h.key);
-
if(chk.checked){
-
$(h.value).show();
-
}else{
-
$(h.value).hide();
-
}
-
});
-
},
-
isChecked: function(){
-
var ret = false;
-
this.checbox2wrap.each(function(h){
-
var chk = $(h.key);
-
if(chk.checked){
-
ret = true
-
return;
-
}
-
});
-
return ret;
-
},
-
getChecked: function(){
-
var ret_arr = [];
-
this.checbox2wrap.each(function(h){
-
var chk = $(h.key);
-
if(chk.checked){
-
ret_arr.push(chk.value);
-
}
-
});
-
return ret_arr;
-
}
-
});
関連するその他の記事
Comments
Leave a Reply