|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
Spring-MVCの散歩道 > 応用の森(総合テクニック編) > ツリー階層構造表現
|
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring-MVCの散歩道 応用の森（生物分類階層Tree）</title>
<meta charset="UTF-8" />
<meta name="Robots" content="index, follow" />
<meta name="keywords" th:attr="content=${siteKeyword}" content="Eclipse,Spring-MVC,Thymeleaf,myBatis,Java,JavaScript,jQuery,JSON" />
<meta name="description" content="Spring-MVCアプリケーション開発における、ジャンル別小技集です" />
<link rel="shortcut icon" href="./images/sPromenade_icon.ico" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/tree.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.1.3.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="./js/jquery.ui.1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="./js/capture.js"></script>
<script type="text/javascript" src="./js/child.js"></script>
<script type="text/javascript" src="./js/header.js"></script>
</head>
<script type="text/javascript">
<!--
$(function(){
//「生物分類リストノード」クリック時の処理
/**
* 元々のHTMLに、jQueryで要素を追加した場合
* その要素に対して、$(selector).click() イベントを定義しても
* イベントをキャッチできない
* そんな場合は、$(document).on('click', '.selector', function (e) {
* を使おう
*/
$(document).on('click', '.ev_Expand', function (e) {
//自分の親タグの name属性を取得する
var data = $(this).parent().attr("name").split('_');
//自分の親タグの name属性(leaf)が"1" (子ノードなし)は何もしない
//data[0] : leaf （ノード末端の判断）
//data[1] : rute（経路）
//leaf が"1" (子ノードなし)は何もしない
if(data[0] == "1") return;
//クリックされたアイコンorノード名のid要素を取得
var id = $(this).attr('id').split('_');
var parent = id[1]; //code
//検索パラメータをJSON化
var param = {
"parent" : parent, //親のcode
"rute" : data[1] //経路
};
var div_obj = $('#div_'+parent);
var img_obj = $('#img_'+parent);
//現在のアイコンファイル名を保持
var img_name = $(img_obj).attr("src");
var html = $(div_obj).html();
if(html.length ==0) { //ノードは閉じている⇒展開する
//Ajaxを実行する(Over 1.8系)
$.ajax({
url : "./creatureclass.xhtml",
dataType: "html", //サーバから返却されるデータの型(xml, html, json, jsonp, text ...
type : "post", //post, get
data : JSON.stringify(param),
}).done(function(resData) { //callback data:response
$('#div_'+parent).html(resData); //検索結果（creature_child.html）を子ノードDIVタグに描画
//アイコンの変更(collapse_l/collapse_l_b)
var change;
if(img_name.indexOf("expand.gif") >=0) {
change = "./images/tree/collapse.gif";
} else {
change = "./images/tree/collapse_l_b.gif";
}
$(img_obj).attr("src",change);
$(img_obj).attr({"alt":"Collapse","title":"Collapse"});
//描画が終わったら親フレームの高さをコンテンツに合わせて伸縮する
var oParent = window.parent;
if(window != oParent){ //親フレーム あり
var h = $("#heder").height() + $("#main_contents").height() + 50;
//親フレーム(iframe)の高さをAjast
oParent.$("#main_frame").height(h);
}
}).fail(function(resData) {
//・通信に失敗したとき
//alert("personalajxedit:"+status);
});
} else { //ノードは展開している ⇒縮退する
$(div_obj).html(""); //innerHTML を破棄する
//アイコンの変更(expand/expand_l_b)
var change;
if(img_name.indexOf("collapse.gif") >=0) {
change = "./images/tree/expand.gif";
} else {
change = "./images/tree/expand_l_b.gif";
}
$(img_obj).attr("src",change);
$(img_obj).attr({"alt":"Expand","title":"Expand"});
}
});
});
//-->
</script>
</head>
<body class="in_background">
<table class="treebody">
<tr>
<td>
<div class="treelistn" id="main_contents">
<!-- ノード情報 -->
<div name="0_root">
<!-- +- アイコンを表示する Expand/Collapse Link -->
<img class="ev_Expand iconpointer" id="img_root" src="./images/tree/expand.gif" alt="Expand" title="Expand" border="0" />
<!-- CategoryName Link -->
<span class="ev_Expand iconpointer" id="lnk_root">生物分類リスト</span>
<!-- 子Tree描画エリア(ここにAjaxによる検索結果が差し込まれます) -->
<div class="treechdlist" id="div_root"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
|