ディレクトリのツリーを作っています。
配列の作成まではできたのですが、
任意のhtmlで出力するのが難しくjsでDOMを整形する形になってしまいました。
どのようにすれば「理想」のHTML出力が可能でしょうか?
ご教示お願い致します。
###理想
php
1Array 2( 3 [aaaa] => Array 4 ( 5 [bbbb] => Array 6 ( 7 [0] => a.php 8 [1] => b.php 9 ) 10 11 [cccc] => Array 12 ( 13 [dddd] => Array 14 ( 15 [0] => a.php 16 [1] => b.php 17 ) 18 19 [0] => a.php 20 [1] => b.php 21 ) 22 23 [0] => a.php 24 [1] => b.php 25 ) 26 27 [fuga] => Array 28 ( 29 [0] => a.php 30 [1] => b.php 31 [2] => c.php 32 ) 33 34 [hoge] => Array 35 ( 36 [0] => a.php 37 [1] => b.php 38 [2] => c.php 39 ) 40 41 [z_root] => Array 42 ( 43 [0] => index.php 44 ) 45)
▽出力
html
1<div class="folder"> 2 <div data-type="folder">aaaa</div> 3 <div class="wrap"> 4 <div class="folder"> 5 <div data-type="folder">bbbb</div> 6 <div class="wrap"> 7 <div data-type="file">a.php</div> 8 <div data-type="file">b.php</div> 9 </div><!-- /.wrap --> 10 </div> 11 <div class="folder"> 12 <div data-type="folder">cccc</div> 13 <div class="wrap"> 14 <div class="folder"> 15 <div data-type="folder">dddd</div> 16 <div class="wrap"> 17 <div data-type="file">a.php</div> 18 <div data-type="file">b.php</div> 19 </div><!-- /.wrap --> 20 </div> 21 <div data-type="file">a.php</div> 22 <div data-type="file">b.php</div> 23 </div><!-- /.wrap --> 24 </div> 25 <div data-type="file">a.php</div> 26 <div data-type="file">b.php</div> 27 </div><!-- /.wrap --> 28</div> 29<div class="folder"> 30 <div data-type="folder">hoge</div> 31 <div class="wrap"> 32 <div data-type="file">a.php</div> 33 <div data-type="file">b.php</div> 34 <div data-type="file">c.php</div> 35 </div><!-- /.wrap --> 36</div> 37<div class="folder"> 38 <div data-type="folder">fuga</div> 39 <div class="wrap"> 40 <div data-type="file">a.php</div> 41 <div data-type="file">b.php</div> 42 <div data-type="file">c.php</div> 43 </div><!-- /.wrap --> 44</div> 45<div data-type="file">index.php</div>
###現実
php
1//ファイルリストを出力 2function eachFile($arr,$arg = '') { 3 foreach($arr as $key => $value) { 4 5 // 値の設定 6 $path = $value; 7 if(is_array($value)) { 8 $path = $key; 9 } 10 $type = is_array($value) ? 'folder' : 'file'; 11 12 // キーの設定 13 if(is_numeric($key)) { 14 $group = $arg; 15 }else { 16 $group = $arg.' '.$key; 17 } 18 if($arg == '') { 19 $group = ltrim($group); 20 } 21 22 if(is_array($value) && $key == 'z_root') { 23 24 }else { 25 echo "\t\t\t<div data-type=\"$type\" class=\"$group\">$path</div>\n"; 26 } 27 28 if(is_array($value)) { 29 eachFile($value,$group); 30 } 31 } 32} 33 34eachFile($fileArr);//$fileArrに最上部記載のphpが格納されているものとする
html
1<div data-type="folder" class="aaaa">aaaa</div> 2<div data-type="folder" class="aaaa bbbb">bbbb</div> 3<div data-type="file" class="aaaa bbbb">a.php</div> 4<div data-type="file" class="aaaa bbbb">b.php</div> 5<div data-type="folder" class="aaaa cccc">cccc</div> 6<div data-type="folder" class="aaaa cccc dddd">dddd</div> 7<div data-type="file" class="aaaa cccc dddd">a.php</div> 8<div data-type="file" class="aaaa cccc dddd">b.php</div> 9<div data-type="file" class="aaaa cccc">a.php</div> 10<div data-type="file" class="aaaa cccc">b.php</div> 11<div data-type="file" class="aaaa">a.php</div> 12<div data-type="file" class="aaaa">b.php</div> 13<div data-type="folder" class="fuga">fuga</div> 14<div data-type="file" class="fuga">a.php</div> 15<div data-type="file" class="fuga">b.php</div> 16<div data-type="file" class="fuga">c.php</div> 17<div data-type="folder" class="hoge">hoge</div> 18<div data-type="file" class="hoge">a.php</div> 19<div data-type="file" class="hoge">b.php</div> 20<div data-type="file" class="hoge">c.php</div> 21<div data-type="file" class="z_root">index.php</div>
javascript
1var max_hie = 1; 2$('[data-type=folder]').each(function(){ 3 var classArr = $(this).attr('class').split(' '); 4 5 if(classArr.length > max_hie) { 6 max_hie = classArr.length; 7 } 8 9 if(classArr.length == 1) { 10 $(this).addClass('complete'); 11 $(this).nextAll('.'+classArr[0]).wrapAll('<div class="wrap"></div>'); 12 $(this).add($(this).next('.wrap')).wrapAll('<div class="folder"></div>') 13 } 14}); 15for(i=2;i<=max_hie;i++) { 16 $('[data-type=folder]').not('.complete').each(function(){ 17 var classArr = $(this).attr('class').split(' '); 18 if(classArr.length == i) { 19 $(this).addClass('complete'); 20 $(this).nextAll('.'+classArr[i - 1]).wrapAll('<div class="wrap"></div>'); 21 $(this).add($(this).next('.wrap')).wrapAll('<div class="folder"></div>') 22 } 23 }); 24}
※jsは仮の処理なので、ソースの汚さは無視してください
回答2件
あなたの回答
tips
プレビュー