C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[2]: ツリー構造の文字列からUL作成(javascript)


(過去ログ 144 を表示中)

[トピック内 5 記事 (1 - 5 表示)]  << 0 >>

■84624 / inTopicNo.1)  ツリー構造の文字列からUL作成(javascript)
  
□投稿者/ HP挑戦 (1回)-(2017/07/23(Sun) 09:58:45)

分類:[JavaScript] 

初心者です。
ご教授お願いします。

以下のようなツリー構造となっている(階層は不定)の文字列から、
javaScript(jQuery)を使ってulの要素を作り出したいのですが、
どのようなプログラムを書けばよいでしょうか?

再帰処理という考え方でできそうなのですが、
どのようにプログラムを書けばよいかわからず。

【例:ツリー構造の文字列】
AAA
	AAA-1
		AAA-1-1
			AAA-1-1-1
		AAA-1-2
			AAA-1-2-1
			AAA-1-2-2
		AAA-1-3
	AAA-2
		AAA-2-1
BBB
CCC
	CCC-1
	CCC-2

【期待する結果】
<ul>
	<li>AAA
		<ul>
			<li>AAA-1
				<ul>
					<li>AAA-1-1
						<ul>
							<li>AAA-1-1-1</li>
						</ul>
					</li>
					<li>AAA-1-2
						<ul>
							<li>AAA-1-2-1</li>
							<li>AAA-1-2-2</li>
						</ul>
					</li>
					<li>AAA-1-3</li>
				</ul>
			</li>
			<li>AAA-2
				<ul>
					<li>AAA-2-1</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>BBB</li>
	<li>CCC
		<ul>
			<li>CCC-1</li>
			<li>CCC-2</li>
		</ul>
	</li>
</ul>

引用返信 編集キー/
■84625 / inTopicNo.2)  Re[1]: ツリー構造の文字列からUL作成(javascript)
□投稿者/ WebSurfer (1269回)-(2017/07/23(Sun) 11:30:41)
No84624 (HP挑戦 さん) に返信

そもそもの目的は何なのでしょう?

目的が、メニューなどを表示したい(勉強のため自分でコードを書くのが目的ではない)ということ
であれば、公開されているライブラリを探して使った方が良いかもしれません。

javascript menu とか javascript treeview とかでググるといろいろヒットしますので調べてみて
ください。

あと、多分 web アプリを作っていると想像していますが、そうであるとすると、使っているプラット
フォームによっては JavaScript ではなく、サーバー側で対応した方が良いかもしれません。たとえ
ば、ASP.NET ですと以下のようなコントロールが用意されています。

チュートリアル : TreeView コントロールでの階層データの表示
https://msdn.microsoft.com/ja-jp/library/7a9swst5.aspx



勉強のため自分でコードを書くのが目的ということであれば、

> 以下のようなツリー構造となっている(階層は不定)の文字列から、

というところは、データを xml 形式にするとか考え直した方がよさそうです。

見たところ、改行と空白を含むただの文字列のようですが、それからどのようにして「ツリー構造と
なっている」のを解析することを考えてますか?

先頭の空白文字の数で階層を判定? それはちょっと自分的には有り得ない話なのですが・・・
引用返信 編集キー/
■84627 / inTopicNo.3)  Re[2]: ツリー構造の文字列からUL作成(javascript)
□投稿者/ HP挑戦 (2回)-(2017/07/23(Sun) 22:18:39)
>あと、多分 web アプリを作っていると想像していますが、そうであるとすると
勉強のためにホームページを作ってみようと思っていました。

【例:ツリー構造の文字列】のようなファイルを持っていたので、
プログラムでメニューの要素を構成できたら勉強になるかなと思ってました。

>javascript menu とか javascript treeview とかでググるといろいろヒットしますので調べてみてください。
ありがとうございます。
調べてみます。

解決済み
引用返信 編集キー/
■84628 / inTopicNo.4)  Re[1]: ツリー構造の文字列からUL作成(javascript)
□投稿者/ もりお (42回)-(2017/07/23(Sun) 22:36:25)
2017/07/23(Sun) 22:40:34 編集(投稿者)


No84624 (HP挑戦 さん) に返信

いい感じのソースコード共有サービス探してるうちに
解決済みになってしまいましたが文字列からHTML要素の変換は
こんな感じでいけますよーと言いたかったので言います。

http://jsbin.com/soxejokiwe/edit?html,output

HTML要素を作る前にシンプルな木構造を作ってそれに対して
再帰でHTML要素を作る感じです。
解決済み
引用返信 編集キー/
■84629 / inTopicNo.5)  Re[2]: ツリー構造の文字列からUL作成(javascript)
□投稿者/ HP挑戦 (3回)-(2017/07/24(Mon) 08:21:42)
>もりおさん
ありがとうございます!!
やっぱり再帰という手法で解決できるのですね。

わかりにくい質問の意図を汲み取っていただき、
本当にありがとうございます。

質問してよかったです。
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -