-
今回は w2ui.grid のカラム名のグループ化を指示するプロパティである columnGroups ついて説明をします。
この columnGroups を宣言することでカラム名タイトルの上に1行追加してグループ化したタイトルが表示出来たり、タイトル2行を1行にして表示できます。
columnGroups プロパティのオブジェクトの構造は以下の通りです。columnGroups = { span : 1, // カラム結合数 caption : '', // グループの caption master : false // true :カラムで宣言された caption を優先 // false:columnGroups の caption を優先(デフォルト) }以下に紹介したページのHTMLに columnGroups プロパティを追加します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
<!DOCTYPE html> <html> <head> <title>w2ui Grid-6 columnGroups</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui-1.5.rc1.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columnGroups: [ { span: 1, caption: '' , master: true }, { span: 2, caption: 'Name' }, { span: 1, caption: 'Email' }, { span: 1, caption: '' , master: true } ], columns: [ { field: 'recid', caption: 'ID' , size: '40px' }, { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '30%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], records: [ { recid: 1, fname: 'John' , lname: 'Doe' , email: 'jdoe@gmail.com', sdate: '2020/03/01' }, { recid: 2, fname: 'Stuart' , lname: 'Motzart', email: 'smot@gmail.com', sdate: '2020/03/12' }, { recid: 3, fname: 'Jin' , lname: 'Franson', email: 'jgra@gmail.com', sdate: '2020/03/13' }, { recid: 4, fname: 'Susan' , lname: 'Ottie' , email: 'sott@gmail.com', sdate: '2020/03/24' }, { recid: 5, fname: 'Kelly' , lname: 'Silver' , email: 'ksil@gmail.com', sdate: '2020/03/25' }, { recid: 6, fname: 'Francis', lname: 'Gatos' , email: 'fgat@gmail.com', sdate: '2020/03/26' }, { recid: 7, fname: 'Mark' , lname: 'Welldo' , email: 'mwel@gmail.com', sdate: '2020/03/27' }, { recid: 8, fname: 'Thomas' , lname: 'Bahh' , email: 'tbah@gmail.com', sdate: '2020/03/28' } ] }); }); </script> </body> </html>これを実行させると以下の様な表示になります。
master:true のカラムは columns の caption がヘッダに表示され span: 2 の部分は2カラムが結合されます。
尚、今回読込んでいる w2ui の JavaScript ソースですが最新バージョンの w2ui-1.5.rc1.js に変更しました。
この w2ui-1.5.rc1 バージョンでないとブラウザのコンソールに以下の警告メッセージが表示される様です。 （皆さんもご注意ください。）NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "recid", caption: "ID", size: "40px", sizeCalculated: "40px", sizeType: "px", min: 20, text: "ID" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "fname", caption: "First Name", size: "30%", sizeType: "%", sizeCalculated: "114px", min: 20, text: "First Name", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "lname", caption: "Last Name", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Last Name", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "email", caption: "Email", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Email", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "sdate", caption: "Start Date", size: "100px", sizeCalculated: "100px", sizeType: "px", min: 20, text: "Start Date" } w2grid.js:6751:32 NOTICE: grid columnGroup.caption property is deprecated, please use columnGroup.text. Group -> Object { span: 1, caption: "", master: true, text: "" } w2grid.js:6624:28
PR -
今回は Ajax を使い JSON ファイルから配列データを取得し select などに設定する例を示します。
今回の例は都道府県のコードと名称を読込んで select に設定することを行います。
先ずは以下の様な都道府県のコードと名称のリストである JSON ファイルを用意します。[ {"id":"01", "name":"北海道"}, {"id":"02", "name":"青森県"}, {"id":"03", "name":"岩手県"}, {"id":"04", "name":"宮城県"}, {"id":"05", "name":"秋田県"}, {"id":"06", "name":"山形県"}, {"id":"07", "name":"福島県"}, {"id":"08", "name":"茨城県"}, {"id":"09", "name":"栃木県"}, {"id":"10", "name":"群馬県"}, {"id":"11", "name":"埼玉県"}, {"id":"12", "name":"千葉県"}, {"id":"13", "name":"東京都"}, {"id":"14", "name":"神奈川県"}, {"id":"15", "name":"新潟県"}, {"id":"16", "name":"富山県"}, {"id":"17", "name":"石川県"}, {"id":"18", "name":"福井県"}, {"id":"19", "name":"山梨県"}, {"id":"20", "name":"長野県"}, {"id":"21", "name":"岐阜県"}, {"id":"22", "name":"静岡県"}, {"id":"23", "name":"愛知県"}, {"id":"24", "name":"三重県"}, {"id":"25", "name":"滋賀県"}, {"id":"26", "name":"京都府"}, {"id":"27", "name":"大阪府"}, {"id":"28", "name":"兵庫県"}, {"id":"29", "name":"奈良県"}, {"id":"30", "name":"和歌山県"}, {"id":"31", "name":"鳥取県"}, {"id":"32", "name":"島根県"}, {"id":"33", "name":"岡山県"}, {"id":"34", "name":"広島県"}, {"id":"35", "name":"山口県"}, {"id":"36", "name":"徳島県"}, {"id":"37", "name":"香川県"}, {"id":"38", "name":"愛媛県"}, {"id":"39", "name":"高知県"}, {"id":"40", "name":"福岡県"}, {"id":"41", "name":"佐賀県"}, {"id":"42", "name":"長崎県"}, {"id":"43", "name":"熊本県"}, {"id":"44", "name":"大分県"}, {"id":"45", "name":"宮崎県"}, {"id":"46", "name":"鹿児島県"}, {"id":"47", "name":"沖縄県"} ]
HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、引数には JSON データの配列が返りますので それを option 句のリストとして整形してやり select の子要素に追加します。
■Ajaxを使いJSONファイルからデータを取得
<html> <head> <meta charset="utf-8"> <title>test ajax json file</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h2>test ajax json file</h2> 都道府県： <select name="SelectPref" id="SelectPref"> <option value=""></option> </select> <button onclick="getPrefData();">Ajax</button> <script type="text/javascript"> function getPrefData() { $.ajax({ type: "GET", url: "pref.json", dataType: "json", cache: false, success: function(PrefData) { // select の内容削除 $("#SelectPref").empty(); var append = '<option value=""></option> '; // JSON データを option に展開生成 for(var i = 0; i < PrefData.length; i++) { append += '<option value="' + PrefData[i].id + '" >'; append += PrefData[i].name; append += '</option>'; append += ' '; } /* forループを以下の様にしてもOK $.each(PrefData, function(i) { append += '"; append += PrefData[i].name; append += ''; append += ' "; }); */ // select の内容に設定 $("#SelectPref").append(append); } }); return false; } </script> </body> </html>
簡単なマスタデータを JSON ファイルにまとめて上記の様に取得すれば、区分データぐらいであれば特にデータベースを使わないでもいけると思います。
-
今回は jQuery でForm のSUMITを処理する為に用意されている submit 関数ついて説明します。
先ずは1個のテキスト入力と SUMIT ボタンを宣言したフォームをもつHTMLを以下に示します。 これは特に難しくは無いと思います。ちなみにアクション先の PHP のソースをその下に示します。■簡単なFormとSUBMITについて
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form method="post" action="stest.php"> <input type="text" name="data1" value=""> <input type="submit" value="送信"> </form> </body> </html>■アクション先のPHP
<?php $data1 = ""; if (isset($_POST["data1"]) == true) { $data1 = $_POST["data1"]; } // データを表示 echo("data1=".$data1); ?>
ここで jQuery の submit 関数を導入します。 submit 宣言で無名関数を宣言しています。 この無名関数はアラート表示を行っていますが、アラートが表示されて「OK」ボタンを押下すると上記の stest.php のプログラムに遷移します。
■submit 関数
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form method="post" action="stest.php"> <input type="text" name="data1" value=""> <input type="submit" value="送信"> </form> <script type="text/javascript"> // jquery でSUBMIT処理 $('form').submit(function(){ alert("送信します。"); return true; }); </script> </body> </html>
この処理はそこまで必要は感じられませんが無名関数の最後で return false; とすれば SUBMIT 処理が中断します。
つまりこの関数の中で入力データの必須チェック等を行うことで正しいデータをアクション先に送信できます。 では、テキストボックスにデータが入力されていない場合にエラー表示をする様にします。
■submit 関数の中でチェック処理を行いエラーの場合 return false;
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form id="SForm" method="post" action="stest.php"> <input type="text" id="data1" name="data1" value=""> <input type="submit" value="送信"> </form> <script type="text/javascript"> // jquery でSUBMIT処理 $('form').submit(function(){ if ($('#data1').val() == '') { alert("データを入力して下さい。"); return false; } alert("送信します。"); return true; }); </script> </body> </html>
ところで jQuery のプログラムからフォームを生成し非表示の input ボックスを追加し SUBMIT 処理を行う例を示します。
尚、コメントで囲まれた処理は jQuery ではなく JavaScript のみで記述した場合を示します。
■jQuery プログラムによるフォーム生成と SUBMIT 処理
<html> <head> <meta charset="utf-8"> <title>jquery submit2</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit2</h1> <button onclick="doSubmit();">送信</button> <script type="text/javascript"> // jquery でSUBMIT処理 function doSubmit() { // from オブジェクト var form = $("<form></form>").attr('method', 'post').attr('action', 'stest.php'); $('body').append(form); // input オブジェクト var inp = $("<input>"); inp.attr("type", "hidden").attr("name", "data1").attr("value", 123); // input オブジェクトをformに追加 form.append(inp); // SUBMIT処理 form.submit(); return false; /* // 純粋なJacaScriptでの記述 var form = document.createElement("form"); form.action = "stest.php"; form.method = "POST"; form.style.visibility = "hidden"; document.body.appendChild(form); var elem = document.createElement("input"); elem.name = "data1"; elem.type = "hidden"; elem.value = "123"; form.appendChild(elem); form.submit(); */ } </script> </body> </html>
-
今回は jQuery で用意されている append , appendTo , before , after 関数を使って要素の追加を行う方法について説明します。
■各関数の定義について
関数名 書式 引数 戻り値 append $.(セレクタ).append(content) セレクタ：追加対象要素を指し示す文字列
content：追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト appendTo $.(セレクタ).appendTo(content) セレクタ：追加する要素を指し示す文字列または、
追加文字列
content：追加対象要素を指し示す文字列
(セレクタ)jQueryオブジェクト before $.(セレクタ).before(content) セレクタ：追加対象要素を指し示す文字列
(実際はこのセレクタの外側の前方に追加)
content：追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト after $.(セレクタ).after(content) セレクタ：追加対象要素を指し示す文字列
(実際はこのセレクタの外側の後方に追加)
content：追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト
ここで注意するのは appendTo 関数で append とは逆の指定となり、 appendTo の引数（content）で指定されたセレクタの子要素の最後に $.(セレクタ) の「セレクタ」部分が追加されます。
また before , after 関数は指定されたセレクタの外側の前後へ、指定文字列等（content）が追加されます。
では実際の例を以下に示します。
■要素を追加する方法（append,appendTo,before,after）
<html> <head> <meta charset="utf-8"> <title>jquery append</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> var i = 1; // append による指定要素の最後にHTML文字列の追加 function doAppend() { $("#maindiv").append("<p>追加の要素(" + i + "):append</p>\n"); i++; // これを無くして上の「i」⇒「(i++)」でもOK return false; } // appendTo によりHTML文字列を指定要素の最後に追加 function doAppendTo() { $("<p>追加の要素(" + (i++) + "):appendTo</p>\n").appendTo("#maindiv"); return false; } // before による要素の追加 function doBefore() { $("#maindiv").before("<div>追加の要素(" + (i++) + "):before</div>\n"); return false; } // after による要素の追加 function doAfter() { $("#maindiv").after("\n<div>追加の要素(" + (i++) + "):after</div>"); return false; } </script> </head> <body> <h1>jquery append</h1> <div id="maindiv"> </div> <button onclick="doAppend();">append</button> <button onclick="doAppendTo();">appendTo</button> <button onclick="doBefore();">before</button> <button onclick="doAfter();">after</button> </body> </html>
上記のソースを実行し、「append」ボタンを2回押下後、「appendTo」「before」「after」ボタンを順に押下すると、HTML内のソースは以下の様になります。<h1>jquery append</h1> <div>追加の要素(4):before</div> <div id="maindiv"> <p>追加の要素(1):append</p> <p>追加の要素(2):append</p> <p>追加の要素(3):appendTo</p></div> <div>追加の要素(5):after</div>
上記では appendTo 関数は追加処理と説明しましたが、実は移動処理が本当の処理なのです。
「$.(セレクタ).appendTo」のセレクタの中がHTMLのDOMのなかで、存在しないものであれば、その文字列そのものを追加処理し、 存在するセレクタであればそれ自身を移動します。
それでは、以下のソースを見て下さい。
■appendToについて
<html> <head> <meta charset="utf-8"> <title>jquery append2</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> // appendTo によりHTML文字列を指定要素の最後に追加 function doAppendTo1() { $("<p>追加の要素:appendTo</p>\n").appendTo("#maindiv"); return false; } // appendTo によりセレクタで指定されたHTML文字列を指定要素の最後に移動 function doAppendTo2() { $("#padd").appendTo("#maindiv"); return false; } </script> </head> <body> <h1>jquery append2</h1> <p id="padd">「id=padd」の行</p> <div id="maindiv"> <p>「id=maindiv」の中の最初の行</p> </div> <button onclick="doAppendTo1();">appendTo1</button> <button onclick="doAppendTo2();">appendTo2</button> </body> </html>「appendTo1」ボタンを押下すると常に「<p>追加の要素:appendTo</p>」が追加され、 「appendTo2」ボタンを押下すると「id="padd"」の行が追いかける様に最後の行に移動するのが分かると思います。
appendTo 関数は子要素の最後に移動しますが、先頭に追加するには prependTo 関数があります。 また append 関数に対しては prepend 関数があります。
-
今回は jQuery で用意されている when 関数を使って Ajax の逐次処理を行う方法について説明します。
先ずは Ajax でよくある勘違いに付いてですが Ajax の処理が終わった時点で行いたい処理を記述する以下の様な場合です。 以下のソースは Ajax の終了後 test1() が処理されることを期待しています。
しかし実際には、この場合 $.ajax(); の処理が行われた直後に test1() が実行されて、その後で testajax() が実行されるはずです。 $.ajax(); で実行される url はネットを通して行われるため通信に時間が掛かります。 通信が終了後、結果として done で宣言された関数の中の testajax() が実行されます。
$.ajax(); はあくまで関数宣言であり、最初は非同期通信の発火を行うだけです。 非同期通信の結果としての関数を done や fail で宣言します。■$.ajax の終了処理の勘違い
<script type="text/javascript"> // Ajax処理 $.ajax({ type: "POST", url: "hoge.php" }).done(function(data){ // 正常処理 testajax(); }); // 次の処理 test1(); </script>
上記の様に $.ajax(); の後に記述した処理を、本当に $.ajax(); の処理の終了後に行いたい場合に使うのが when です。
when の使い方ですが、以下の様な感じで when の中に Ajax 処理を行い when の done で行いたい処理を記述します。<whenの例> $.when( // ajax 等の処理 $.ajax({ type: "POST", url: "hoge.php" }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }), // 次の処理 test1() ).done(function(){ // 後処理 }); <when の中の処理> ・複数の関数を呼出す場合は 「,」(カンマ)で区切ること。 <メソッド> ・done(function(data){}：when の中の処理が終了した場合に呼ばれる関数宣言。
上では Ajax 処理としていますが、別に Ajax にこだわらなくても、通常の関数処理でもOKです。 それでは Ajax ではない簡単な例を以下に示します。
■when の使い方HTMLファイル
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //when関数 function goWhen() { $.when( console.log("test-1"), console.log("test-2") ).done(function(){ // 後処理 console.log("test-end"); }); return false; } </script> </head> <body> <h2>test jquery when</h2> <button onclick="goWhen();">test when</button> </body> </html>「test when」ボタンを押下するとコンソール画面に "test-1" "test-2" "test-end" の文字列が順次表示されるはずです。
それでは、以下の Ajax のページの処理に when を適用してみます。
⇒JavaScript jQueryでAjaxを使いPHPからデータを取得する方法
■when を適用：Ajaxを使いPHPからデータを取得するHTMLファイル
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Ajax関数 function getData() { $.when( // マスタデータの取得 $.ajax({ type: "POST" , url: "./ajax1.php" , data: { id: $("#id").val() } }).done(function(res){ // ajaxがOK $("#msg").text(JSON.parse(res)); }).fail(function() { // 取得エラー alert('取得エラー'); }).always(function() { // 後処理(処理することが在れば) }) ).done(function(){ alert("ajax-end"); }); return false; } </script> </head> <body> <h2>test ajax json</h2> ID:<input type="text" id="id" size="10" maxlength="10" /><br /> <p id="msg">テストメッセージ</p> <button onclick="getData();">Ajax</button> </body> </html>
このソースで「Ajax」ボタンを押下した場合 $.ajax(); の処理が正常に行われれば メッセージ領域へのデータ表示の後にアラートで「ajax-end」の表示がされるはずです。
■外部PHPファイル ajax1.php
<?php // 処理モードの取得 $id = -1; if (isset($_POST["id"]) == true && $_POST["id"] != "") { $id = intval($_POST["id"]); } // マスタ風の仮のデータ $arrData = array( 0 => "@@@@@@" ,1 => "AAAAAA" ,2 => "BBBB" ,3 => "CCCCCCCC" ); $strRet = ""; if (0 <= $id && $id <= 3) { $strRet = $arrData[$id]; } // 結果を返す echo(json_encode($strRet));
