jQueryでテキストフォームに入力できるツリーリストを作りました。

jQuery

jQuery

ツリーリストを使ってフォームに入力できるように

jQueryで作成してみました。

↓こんなイメージです。

ツリーリスト入力イメージ

ツリーリスト入力イメージ

スポンサードリンク

仕事でGoogle Shoppingのカテゴリーを登録するのに

このGoogle Shoppingのカテゴリーと同じように

クリックしてリストを選べて入力できるものはないかと

プラグインなど探していたのですが

ちょうどいいものがなかったので実装してみました。

ツリーリストの作成はこちらのアコーディオンメニューを参考にさせて頂きました。
jQuery(+CSS3)で作るアコーディオンメニュー(2段アコーディオン対応)

デモ
上記のような感じのものを作ります。

1.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クラスを指定してるのは

クリックできる範囲を文字だけにしたかったためです。

2.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つでしかできなかったです。

クリックしたらopenクラスがついているものを拾っていくというイメージです。

そのため、開いているもののみをテキストフォームに入力させたいので

他のリストを開いた場合は、開いていたリストと

その子孫も閉じるようにしています。

また、子孫がないツリーをクリックした場合は

そのリスト自体が最後に追加するという形です。

3.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

(使い方)
ナビゲーションメニューに便利な「Treeview」の使い方

こちらは使いやすかったのですが、

テキストフォームへ入力するというカスタマイズでうまくいかなかったので

今回は使いませんでした。

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ