<table>の<tr>行をコピーして追加
今回はちょっと違うアプローチ
以前も取り上げましたが、その際は追加するための行の情報を入力するような方式だったり、行情報を入力する場所が別テーブルになっていたりでした。
jquery-workshop.hatenablog.com
今回は選択行をコピー
前回は追加する行の情報を入力して行追加、という処理でしたが 今回は、コピーする行を選択して、その行を追加、という処理になっています。
当ブログの検索流入は「table 行追加」関連が多いので 今回違うアプローチで記事にしてみました^^
tableタグの実装
行コピーするにあたって
編集可能とする内容をcontenteditable="true"に設定しました。
また、行コピー時に重複して困るような項目として
<td class="unique-no">
を付与しています。
コピーするjQueryコード
var $clonedTr = $tr.clone();でtr要素のクローン(コピーしたもの)を取得しています。
そして、コピーとはいえ重複しては困る項目については
$clonedTr.find('.unique-no').text(generateMaxNo());
として変更しています。
generateMaxNo()は<td class="unique-no">のテキストよりmax+1を返すサンプルとして作成した関数です。
そして$tr.after( $clonedTr );でチェックした行の後にコピーした行を追加しています。
動作イメージ
jQuery UI datepickerの休日・祝日表示のカスタマイズを行う
カスタマイズ
先日jQuery UIのdatepickerについて日本語化・表示位置の調整・初期化の一括簡略化などを紹介しましたが、まだまだカスタマイズの余地があります。
今回は、週末(土曜・日曜)と祝日を選択不可にして、さらに表示文字色も一般的なカレンダーのように変更するカスタマイズ方法を紹介します。
祝日の定義
まずは祝日をJSONで定義します。
それに伴い、年月の表示幅も決めておくとJSONで定義した範囲外の休日/祝日が画面上では選択できないようになります。
JSONの定義はキーが日付(YYYY/MM/DD)になるように定義して
後述のロジックでキーが存在するかどうか？判定できるように
JSONのフォーマットを工夫してあります。
休日/祝日の判定
.datepicker({ *** }); で初期化する点は通常と変わりません。
オプションにminDateとmaxDateを指定するのも通常のdatepickerのオプションと変わりませんね。
休日・祝日の判定はbeforeShowDayのfunciton定義で行います。
$.datepicker.formatDate('yy/mm/dd', day);で表示しようとしている日付をYYYY/MM/DDに成形します。
そして、
- 祝日として存在する場合
- 日曜の場合
- 土曜の場合
- それ以外(平日)の場合
をif-elseで変数名daySettingsに設定しています。
なお、beforeShowDayは配列で3値を持つ値を返す必要があり、それぞれ
- 第1引数はboolean : trueはその日付が選択可となる。
- 第2引数はstring : cssへ追加するスタイルが指定できます。
- 第3引数はstring : tooltipが
第2,3引数は特に何もない場合は空文字""を設定してあげましょう。
休日/祝日の表示
datepickerでは下記のようなタグが各日付の表示用に自動的に生成されます。
- 選択可能な平日は
<td>配下に<a class="ui-state-default"> - 選択可能な週末は
<td class="ui-datepicker-week-end">配下に<a class="ui-state-default"> - 選択不可に設定した平日は
<td class="ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default"> - 選択不可に設定した週末は
<td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled">配下に<a class="ui-state-default">
まとめるとこんな感じです。
これを利用して、土曜は青に、日曜を赤に、祝日を赤で表示させます。
なお、上述のように選択可/不可によって子タグが<a>か<span>か変わるので、
先の処理で土日祝を選択可/不可どちらに設定したかによってCSSの記述が変わってきます。
下記は両方に対応するよう2つ定義しています。
表示
jQuery Migrate 1.4.1 リリース
既にjQuery 3.0リリース評価版が出ていますが、このところjQueryブログのポストが頻繁なのと
3.0の記事はボリュームも多く現在咀嚼中です...
jQuery Migrate 1.4.1 がリリースされました。
(ところで)そもそもjQuery Migrateとは
当ブログでは初出のjQuery Migrateとは、
jQueryのバージョンを上げる際にjQuery Migrateを使用すると
アップグレードについての警告を出力してくれるプラグインです。
使用方法は取り込むだけ
こんな感じでconsoleに表示されていきます。
Migrate 1.4.1 での更新内容としては
jQuery 3.0 へ向けてのマイグレーション手順
jQuery 3.0 へ向けてのマイグレーション手順は下記の通りとなります。
なお、jQuery Migrateの位置付けは変わらずで、Migrate 3.0はリリース評価版の後に出ます。
jQuery 2.2.4 と 1.12.4 が出ました
概要
とのことです。
AMD ソースって何だろう…？
Changelogを見るとIE 11のフルスクリーンモードでのiframeタグの問題も解決されているようです。
今回も破壊的変更はないようで、そのまま前バージョンから上げて問題なさそうです。
jQuery Migrate
先日リリースの jQuery Migrate 1.4.1 を使えば今回の1.12.4/2.2.4にマイグレートすることができます。
(jQuery 3.0用のマイグレーションプラグインは今後となるようです)
Migrateについては別途記事を書こうかと思います。
おまけ
既存のソースを1.12.3に書き換えてる間に1.12.4が出てしまいました^^;
jQuery UI autocompleteの結果表示をカスタマイズしてdivやtableに表示させる
前回の続きです
jquery-workshop.hatenablog.com
今回は、結果表示の方
前回は検索条件と検索対象のカスタマイズでしたが
今回は検索結果表示のカスタマイズです。
autocompleteではテキストボックスの下に一覧が出るのが標準ですが
これを
<div id="search_results"> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> </div>
や
<table id="search_results"> <tbody> <tr><td> ... </td></tr> <tr><td> ... </td></tr> <tr><td> ... </td></tr> </tbody> </table>
としたいことって、結構あるのではないかと。
ちょっと入り組んだカスタマイズが必要ですが
手順通りやればできます。
コードの処理概要
データの用意や検索方法については前回のものを踏襲します。
上記の実例を要約すると、
$.widget('app.autocomplete', $.ui.autocomplete, { _suggest: // ※1 _close: // ※2 }); $('#query').autocomplete({ suggest: // ※3 });
というような拡張と実装となっています。
※1については、結果候補の拡張実装があれば(※3で定義)呼び出すような処理に。
※2については、結果候補のクリア処理の拡張で、
入力が空 または minLength未満 または blur時に呼び出されます。
サンプル実装においては、結果候補の一覧のリンクを押したりすることがあるため
blur時には結果候補を消さないような処理としています。
