なんちゃってプログラマのぼやき

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

Jqueryのクリックイベントでクリックした要素のイベントだけを発生させたいのですが、
子要素をクリックした際、Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。
この現象を「イベントバブリング」といいます。jQueryの仕様です。
子を包含している親要素が対象となります。

そこで、親のイベントを発生させない方法として、
クリックしたイベントオブジェクトの「stopPropagation」を使用します。

例）

$('div').bind('click',function(e){
alert("親要素");
});

$('div :input').bind('click',function(e){
alert("子要素");
e.stopPropagation();　←バブリング停止
});

以上で、クリックした子要素のみのイベント発生、
親へのバブリングを止めることができます。

jquery.tablesorter.jsは、テーブルをソートするだけだと
非常に簡単に組み込むことができますが、
スタンスとして「軽くて簡単なものだけあります。あとは自分で組み込んでください」
といった感じなので、桁区切りのカンマがあると、
カンマより前の数値だけでソートされてしまい、うまくソートできません。

「jquery.tablesorter.js」の内容を一部修正することで、
カンマ以下の数字もきれいにソートできるようになります。

以下を変更する方法もあるようですが、私はうまくいきませんでした。

var i = parseFloat(s);
↓
var i = parseFloat(s.replace(/,/g,""));

私がうまくいったのは以下を変更する方法です。
コメントアウトの部分を、直下の行に変更します。

jQuery.tablesorter.addParser({
id: "commaDigit",
is: function(s, table) {
var c = table.config;
// return jQuery.tablesorter.isDigit(s, c);
return jQuery.tablesorter.isDigit(s.replace(/,/g, ""), c);
},
format: function(s) {
// return jQuery.tablesorter.formatFloat(s);
return jQuery.tablesorter.formatFloat(s.replace(/,/g, ""));
},
type: "numeric"
});

テキストエリアから違う場所をクリック（フォーカスアウト）したときに
日付チェックを行い、日付形式で入力されていなければ、今日の日付を自動でセットされるようにします。

わけあってHTML5のdate関数を使えないとか、
入力値をそのままフォームで飛ばしたいとかいうときに使えるとおもいます。

以下、javascriptに記載する部分を3つに分けて記述しています。
３つまとめて記載すれば問題ないと思います。
フォーカスアウトイベント、日付の書式チェック、日付フォーマットです。


id="sample"指定したテキストエリアからフォーカスアウトした時のイベント


<script>
　$('#sample').focusout(function(e) {
　　var str = $('#sample').children().val(); //　←入力した値を取得し、格納
　　　// ブランクチェック
　　　if (str != '') {
　　　　//日付形式チェック
　　　　if (!ckDate(str)) {
　　　　　//今日の日付をyyyy/mm/ddでセットする。
　　　　　$('#sample').children().val(dateFormat.format(new Date(), 'yyyy/MM/dd'));
　　　　}
　　}
});
</script>


日付入力の書式チェック


<script>
function ckDate(datestr) {
　// 正規表現による書式チェック
　if(!datestr.match(/^\d{4}\/\d{2}\/\d{2}$/)){
　　return false;
　}
　var vYear = datestr.substr(0, 4) - 0;
　var vMonth = datestr.substr(5, 2) - 1; // Javascriptは、0-11で表現
　var vDay = datestr.substr(8, 2) - 0;
　// 月,日の妥当性チェック
　if(vMonth >= 0 && vMonth <= 11 && vDay >= 1 && vDay <= 31){
　　var vDt = new Date(vYear, vMonth, vDay);
　　if(isNaN(vDt)){
　　　return false;
　　}else if(vDt.getFullYear() == vYear && vDt.getMonth() == vMonth && vDt.getDate() == vDay){　　
　　　return true;
　　}else{
　　　return false;
　　}
　}else{
　　return false;
　}
}
</script>


日付のフォーマットを指定


<script>
dateFormat = {
　fmt : {
　　"yyyy": function(date) { return date.getFullYear() + ''; },
　　"MM": function(date) { return ('0' + (date.getMonth() + 1)).slice(-2); },
　　"dd": function(date) { return ('0' + date.getDate()).slice(-2); },
　　"hh": function(date) { return ('0' + date.getHours()).slice(-2); },
　　"mm": function(date) { return ('0' + date.getMinutes()).slice(-2); },
　　"ss": function(date) { return ('0' + date.getSeconds()).slice(-2); }
},
format:function dateFormat (date, format) {
　　var result = format;
　　for (var key in this.fmt)
　　　result = result.replace(key, this.fmt[key](date));　
　　　return result;
}
};
</script>


bootstrapのDatatableについては以下で説明しています。

使い方などについても以下のリンクからどうぞ。
→【Bootstrap】DataTablesがすごい

実際に使用してみると、
もっとアレンジしたいとか、要望がガサガサ出てきて、
オプションも書ききれてなかったものがザクザク出てきたので追加でメモ( ..)φ

DatatablesとはきれいなUIであることだけでなく、
ソート機能や検索機能などをもったプラグインです。


$(document).ready(function() {
$('#example').DataTable();

//ここにオプションを記載

} );


オプション
// falseにすると全データが表示され、ページ切替ボタンが非表示になる
paging: true,
// falseにすると検索ボックスが非表示になる
searching: true,
// falseにするとヘッダーをクリックしてもソート不可になる
ordering: true,
// falseにすると左下のインフォメーションが非表示になる。
info: true,
// ページ初期表示時にソートする列を指定
order: [[0, 'asc']],　　
// [[0, 'asc']]は、0列目を昇順表示とする意味。
　// ex: 左から2列目を降順であれば、[[1,'desc']]

javascriptで、IDはひとつのページ内でユニークであるものですが、
ここでは複数の要素に同じIDをつけられる方法をメモ( ..)φ

普通のiQueryの#idセレクタでは、ひとつの要素、複数同じIDがある場合には最初に合致した要素しか選択できません。

[id=xx]の形で書けば、複数の同じIDを選択することができます。

例
javascript

// 一般の、IDはユニークである場合
$("#unique").css("background-color","red");
// 複数のIDを選択
$("[id=multi]").css("background-color","white");

html

// 一般の、IDはユニークである場合
<input type="text" id="unique" value="1" >
// 複数のIDを選択
<input type="text" id="multi" value="2" >
<input type="text" id="multi" value="3" >
<input type="text" id="multi" value="4" >

jQueryのプラグインであるdatetimepicker。
UIもいい感じです。



ただし、bootstrap2で動いていたdatetimepickerが
bootstrap3では動かないとか、まだ日本語に対応していないとか・・・
探していたらbootstrap2の情報が多かったので、bootstrap3での実装方法をまとめてみました。



1.ダウンロード

最終的に必要なのは以下の6つ。

�@jquery-1.x.js
�Abootstrap.min.css
�Bbootstrap.min.css
�Cbootstrap-datetimepicker.css
�Dbootstrap-datetimepicker.js
�Emoment.js
�Fja.js

�@はjQuery公式サイトからダウンロード。
�A�Bはbootstrapの公式サイトからダウンロード。

�C�Dは以下のGitHubに公開されている「build」よりダウンロード。
https://github.com/Eonasdan/bootstrap-datetimepicker

bootstrap3では、�Emoment.jsがないとまともに動かない。
http://momentjs.com/
↑よりダウンロード。
日本語化したいときは、�Fをダウンロード。
上記のURLの「locale」よりダウンロードする。


2.適当な場所に配置する

3.記述方法

(1) head内で呼び出す
　上記７つを読み込む。


(2) body内で以下のように記述


<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
// オプションを記述
});
</script>
</div>
</div>


今回、２４時間表示と、datepickerとtimepickerを横並びにしたかったため、オプションのところに以下を記述。

format : 'YYYY/MM/DD HH:mm',
sideBySide: true

BootStrapのDataTablesが簡単に実装できて使える！

下記のサイトにコードと、ライブラリがまるまる書いてあるので
それをコピペ、読み込むだけで実装完了。



https://datatables.net/examples/styling/bootstrap.html


デフォルトで、以下が設定されています。
・表示件数設定
・検索機能
・ソート機能
・ページング機能


もちろん、ただコピペするだけでは仕様が不完全。
オプションを指定して、カスタマイズしていきます。
いくつかオプションを記載します。

簡単なカスタマイズたけなら、javascriptに以下のように記載するだけでＯＫ。


$(document).ready(function() {
$('#example').DataTable();

//ここにオプションを記載

} );


オプション
// 大量データ利用時、「処理中」メッセージを表示するかを設定
bProcessing: true,
// 初期表示の行数設定
iDisplayLength: 100,
// ページングボタンの制御
// two_button:進むと戻る
// full_numbers:全ボタン表示
sPaginationType: "full_numbers",
// 改ページを有効にするか設定
bPagenate: true,
// ソート行を強調（cssクラスを指定）するかを設定
bSortClasses: false,
//検索（フィルタ）を表示するかを設定
bFilter:false,
//画面の表示件数を選択可能かを設定
bLengthChange:false
// 自働列幅の計算を有効にするか設定
bAutoWidth: true,
// テーブル情報の表示を有効にするか設定
binfo: true,
// 水平スクロールを有効にするか設定
sScrollX: faulse;
// 垂直方向のスクロールを有効にするか設定
sScrollY: faulse;

使いそうなものを抜粋しました。他にも探せばあります。

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利でした。



ダウンロード

下記よりダウンロード。
取得先によっては、日本語対応していないものもあるが、下記は日本語対応も含まれるため、まるごとダウンロードする。

https://github.com/eternicode/bootstrap-datepicker

最終的に必要なのは下の５ファイル。（日本語にする場合）
他はとくにいらない。

jquery-1.8.3.js
bootstrap.min.css
datepicker.css
bootstrap-datepicker.js
bootstrap-datepicker.ja.js

日本語化の「bootstrap-datepicker.ja.js」はlocalesフォルダ内に存在。


これらのファイルを、適当な場所に配置しておく。


記述方法

(1) head内で呼び出す
　上記５つを読み込む。
　「bootstrap-datepicker.js」を読み込んだうえで「bootstrap-datepicker.ja.js」を読み込むことに注意。

(2) body内で以下のように記述


<input id="datepicker" type="text">

<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
// 以下オプション
// 日付フォーマット
format: 'yyyy/mm/dd',
//　日本語化
language: 'ja',
// 日付を選択したらクローズ
autoclose:'true'
});
});
</script>

オプション

オプションを書き足せば、datepickerを使いやすくカスタマイズできる。
すべてではないが、使えそうなオプションをいくつかメモ。

・選択できる日付の範囲を設定
minDate: '-1w',
maxDate: '+1m +10d'
・カレンダーに「今日」ボタンと「閉じる」ボタンを表示
showButtonPanel: true
・今日の日付をハイライト
todayHighlight : true
・曜日のテキストを変更
dayNamesMin:['S','M','T','W','T','F','S']


他にも、探せばたくさんありそうです。