ECサイトの商品登録などで、
ツリーリストを使ってフォームに入力できると
簡単に作業ができると思いjQueryで作成してみました。
カテゴリー登録でツリーリストを使用
仕事でGoogle Shoppingのカテゴリーを登録するのに
このGoogle Shoppingのカテゴリーと同じように
クリックしてリストを選べて入力できるものはないかと
プラグインなど探していたのですが
痒いところに手が届くような
ちょうどいいものがなかったので実装してみました。
ツリーリストの実装
ツリーリストの作成はこちらのアコーディオンメニューを参考にさせて頂きました。
jQuery（＋CSS3）で作るアコーディオンメニュー（2段アコーディオン対応）
デモ
上記のような感じのものを作ります。
HTMLにツリーリストを作ります。
<input type="text" id="note" name="note" value="" maxlength="200" size="60" />
<ul id="tree_list">
<li>
<p><span class="">リスト1</span></p>
<ul>
<li>
<p><span class="">リスト1-1</span></p>
<ul>
<li>
<p><span class="">リスト1-1-1</span></p>
<ul>
<li><span class="click">リスト1-1-1a</span></li>
<li><span class="click">リスト1-1-1b</span></li>
<li><span class="click">リスト1-1-1c</span></li>
</ul>
</li>
<li>
<p><span class="">リスト1-1-2</span></p>
<ul>
<li>
<p><span class="">リスト1-1-2-1</span></p>
<ul>
<li><span class="click">リスト1-1-2-1a</span></li>
<li><span class="click">リスト1-1-2-1b</span></li>
<li><span class="click">リスト1-1-2-1c</span></li>
</ul>
</li>
<li>
<p><span class="">リスト1-1-2-2</span></p>
<ul>
<li><span class="click">リスト1-1-2-2a</span></li>
<li><span class="click">リスト1-1-2-2b</span></li>
</ul>
</li>
<li><span class="click">リスト1-1-2-3a</span></li>
<li><span class="click">リスト1-1-2-4a</span></li>
</ul>
</li>
<li><span class="click">リスト1-1-1a</span></li>
</ul>
</li>
</ul>
</li>
<li>
<p><span class="">リスト2</span></p>
<ul>
<li>
<p><span class="">リスト2-1</span></p>
<ul>
<li>
<p><span class="">リスト2-1-1</span></p>
<ul>
<li><span class="click">リスト2-1-1a</span></li>
<li><span class="click">リスト2-1-1b</span></li>
</ul>
</li>
</ul>
</li>
<li>
<p><span class="">リスト2-2</span></p>
<ul>
<li><span class="click">リスト2-2-1a</span></li>
<li><span class="click">リスト2-2-1b</span></li>
</ul>
</li>
<li>
<p><span class="">リスト2-3</span></p>
<ul>
<li>
<p><span class="">リスト2-3-1</span></p>
<ul>
<li><span class="click">リスト2-3-1a</span></li>
<li><span class="click">リスト2-3-1b</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
ul要素を入れ子にしてリストを作ります。
pが開閉操作部分なので親カテゴリーをここに入れます。
子孫がない場合はliで囲み、さらにspanを使いclickクラスで囲みます。
spanを使ってclickクラスを指定してるのは
クリックできる範囲を文字だけにしたかったためです。
jQueryを書きます
$(function(){
//子があるリストをクリックした場合
$("#tree_list p").click(function(){
$(this).next("ul").slideToggle();
$(this).parent("li").siblings().children("ul").slideUp();
$(this).children("span").toggleClass("open");
$(this).parent("li").siblings().find("span").removeClass("open");
$(this).parent("li").siblings().find("span").removeClass("red");
//親を閉じたら子孫も閉じる
if (!$(this).children("span").hasClass("open")) {
$(this).next("ul").find("ul").slideUp();
$(this).next("ul").find("span").removeClass("open");
}
var text1 = "";
$('.open').each(function(i){
if (i == 0){
text1 = $(this).text();
}else{
text1 = text1 + ' &gt; ' + $(this).text();
}
$('#note').val(text1);
})
});
//子がないリストをクリックした場合
$('.click').click(function(){
$(this).toggleClass("red");
$(this).parent("li").siblings().children("ul").slideUp();
$(this).children("span").toggleClass("open");
$(this).parent("li").siblings().find("span").removeClass("open");
$(this).parent("li").siblings().find("span").removeClass("red");
var text2 = "";
$('.open').each(function(j){
if (j == 0){
text2 = $(this).text();
}else{
text2 = text2 + ' &gt; ' + $(this).text();
}
})
//押されていいたかを判断
if ($(this).hasClass('red')){
$('#note').val(text2 + ' &gt; ' + $(this).text());
}else{
$('#note').val(text2);
}
});
});
【pタグ】をクリックした場合と【clickクラス】をクリックした場合の2つを作ります。
・・・1つでまとめたかったんですが、僕の実力では2つでしかできなかったです。
内容としては【pタグ】か【clickクラス】クリックしたら
【openクラス】がついているものを拾っていくというイメージです。
そして、リストの開いているもののテキストをテキストフォームに入力させたいので
他のリストを開いた場合は、開いていたリストと
その子や孫も閉じるようにしています。
また、子や孫がないツリーをクリックした場合は
そのリスト自体が最後に追加するという形です。
CSSはツリー表示部分はこのように記述しました
/*ツリーリストの表示*/
#tree_list p span {
padding-left: 15px;
background-image: url('../img/plus.gif');
background-repeat: no-repeat;
background-position: left center;
cursor:pointer;
}
#tree_list p span.open {
color: #F00;
background-image: url('../img/minus.gif');
}
#tree_list ul {
display:none;
}
#tree_list ul > li {
padding-left: 5px;
}
.click {
padding-left: 15px;
background-image: url('../img/point.gif');
background-repeat: no-repeat;
background-position: left center;
cursor:pointer;
}
.red {
color: #F00;
}
ツリーリストっぽくするために位置をpaddingで調整して
背景にプラス、マイナスの画像を使ってます。
openクラスが付いたらマイナスの画像に切り替わるようになってます。
子孫がないリストは点の画像を使用しています。
テキストフォームに入力している項目は
赤く表示させるためにredクラスを用意してます。
デザインや画像などは変えても問題ないです。
とりあえずこれで問題なく比較的簡単に入力できそうです。
リスト作ることが面倒くさいかもしれませんが・・・
参考までにツリーメーニューでプラグインもありました。
（使い方）
ナビゲーションメニューに便利な「Treeview」の使い方
こちらは使いやすかったのですが、
テキストフォームへ入力するというカスタマイズでうまくいかなかったので
今回は使いませんでした。
