- ベストアンサー
CSVデータをツリー表示させたい
- CSVデータをWEB上でツリー表示する方法について教えてください。
- 毎日更新されるCSVデータを自動的にWEB上でツリー表示できるプラグインを探しています。
- 希望のフォルダにCSVデータを置くだけで、WEB上でツリー表示できる方法を教えてください。
- fujimasa_3
- お礼率62% (5/8)
- JavaScript
- 回答数8
- ありがとう数11
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
ANo5です。 ＞ご推察の通り、自分の力量として、自作というのはハードルがかなり高いのです。 スクリプトで処理する以上は、ある程度の理解は必要となります。 ほとんど知らなくても使えるもの（=ライブラリ等）で、可能な範囲で我慢するか、少しだけ覚えるかのどちらかですね。 読み込みからテーブル表示までを何らかのライブラリでできたとして、その後で表示だけ変える例をご参考までに。 ・表の形式を標準的なテーブルにしていますが、 実際の表示の構造と合わせる必要があります。 ・便宜上ボタンのクリックで表示を変えるようにしてありますが、 実装は表示後続けて処理することになるでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function change(tbl){ var bdy = tbl.getElementsByTagName("tbody")[0]; var i = 0, rw, cell, indent, pre; while(rw = bdy.rows[i++]){ indent = +rw.cells[1].innerHTML; if(indent){ indent--, pre = indent==0?"―":"∟"; } else { indent = 0, pre = ""; } cell = rw.cells[0]; cell.style.paddingLeft = indent*2.5 + "em"; cell.innerHTML = pre + cell.innerHTML; } } </script> </head> <body> <table id="hoge" border=1> <thead><tr> <th>コード</th><th>レベル</th><th>品名</th><th>規格</th> </tr></thead> <tbody> <tr><td>1234</td><td>1</td><td>AAA</td><td>aaa</td></tr> <tr><td>2345</td><td>2</td><td>BBB</td><td>bbb</td></tr> <tr><td>3456</td><td>3</td><td>CCC</td><td>ccc</td></tr> <tr><td>4567</td><td>3</td><td>DDD</td><td>ddd</td></tr> <tr><td>5678</td><td>3</td><td>EEE</td><td>eee</td></tr> <tr><td>6789</td><td>4</td><td>FFF</td><td>fff</td></tr> <tr><td>7890</td><td>3</td><td>GGG</td><td>ggg</td></tr> </tbody> </table> <div> <p><input type="button" value="change" onclick="change(document.getElementById('hoge'));this.disabled = 'disabled'"> ← クリックで表示を変更 </div> </body> </html>
その他の回答 (7)
- think49
- ベストアンサー率59% (285/482)
#1 の補足より。 > レベルは、１の子が２、２の子が３、３の子が４．．．となります。 BBBがAAAの子であるとどう判断するのでしょうか。 - レベル1の品名が複数あったら、レベル2の品名に対してどうやって親を判定しますか。 - 直前のレベルの一つ少ない品名を親とするのでしょうか。直前にレベルの一つ少ない親がなかったらどうしますか。 ツリー化の構造をとるなら「レベル」ではなく「フルパス」が必要な気がします。 [AAA > BBB > CCC] のようなパス情報がCSVデータにあれば、ツリー化は容易でしょう。 手前味噌ですが、以下のように実装できます。 ■実装の流れ 1. rfc4180.js ( http://vird2002.s8.xrea.com/javascript/rfc4180.html ) でCSVを配列化 2. 配列からツリー構造を判断し、ツリー化ライブラリに情報を渡すコードを書く 3. jsTree ( http://www.jstree.com/ ) でツリー化 自作する場合は 2. が課題ですね。 # Re: fujimasa_3さん
補足
言葉足らずで申し訳ありません。 >BBBがAAAの子であるとどう判断するのでしょうか。 ＢＢＢのレベルが２なので、自身より前にあるレベル１のＡＡＡが親になります。 >- レベル1の品名が複数あったら、レベル2の品名に対してどうやって親を判定しますか。 レベル１は、一つしかありません。 １を頂点にして、順次下がっていきます。 レベル２のＢＢＢを例にとると、親はＡＡＡでしかあり得ません。 もっと下位のレベルを例に取った場合は、ご推察の通り自身の直前のレベルが一つ少ないものが 親になります。 >- 直前のレベルの一つ少ない品名を親とするのでしょうか。直前にレベルの一つ少ない親がなかったらどうしますか。 レベル３の上には、必ずレベル２はありますし、レベル４の上にはレベル３があります。 例えばＣＣＣもＤＤＤもＥＥＥもＧＧＧもＢＢＢが親です。 ＦＦＦはＥＥＥが親になります（ＢＢＢの孫ですね）。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞イチからＣＧＩを勉強しないといけないですね。。(^-^; ですね。Perlのライブラリを探してみると CPAN CSV 処理 - Google 検索( https://www.google.co.jp/search?q=CPAN%20CSV%20%E5%87%A6%E7%90%86&ie=utf-8&oe=utf-8&hl=ja ) あなたの言われるとおり(^^)、 ＞結構、需要はありそうな気もするのですが、 です。 ⇒Excel出力のCSV取込みから学ぶ4つのCPANモジュール( http://www.slideshare.net/AkabaneHiroyuki/perl-beginners10-20130927 ) ⇒【perlメモ】CSVファイルを簡単に処理できるCPANモジュールText::CSV_XS | KUMA TYPE( http://blog.kumacchi.com/2010/12/perlcsvcpantextcsv_xs.html ) ⇒Text::CSV CSVの操作:CPANのお勉強( http://cpan.ti-da.net/e3707605.html ) ⇒PerlでCSVを扱う – Text::CSV_XS | Smart( http://rfs.jp/sb/perl/11/perl_text_csv_xs.html ) CPAN( http://ja.wikipedia.org/wiki/CPAN )というのは、Perlのモジュールの置き場でして、何かしたいときはここを探す。 Perl( Perl - Wikipedia( http://ja.wikipedia.org/wiki/Perl )は、javascriptなどと異なり、とても自然言語に近く、書き方もいろいろある。(それを嫌う人も多いけど・・) Text::CSV_XS で取り込んだデータを階層リストだろうがtableだろうが、好きなように出力できる。 それを表示させるHTMLもそき煮から出力させるなり、サーバーが対応していればSSLでCGIプログラムを動作させても良い。
お礼
詳しくご案内頂きまして、ありがとうございます。 イチから学習しながら実装するのは、時間的に厳しいものがあるのですが、 今後の課題として、考えたいと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
ANo3様がおっしゃるようにサーバサイドで処理してしまうのが一番確実な方法と思いますが、そういう事情でもなさそうなので… ＞J-query等で、これを実現出来るプラグインが無いか探しているのですが ANo1様がおっしゃるように、ピッタリのライブラリを探すのは難しいように思います。 なさりたいことは比較的簡単で、レベル欄の数に合わせて第1項目の表示をインデントすれば良いだけのように思われます。paddingやmarginを利用してセットしてあげれば実現できそうです。 レベルの上限がわかっているのなら、CSSで事前に用意しておいてクラス名で処理してあげても良いですね。 接頭辞的なキャラクタ（あるいは画像？）も同時に追加してあげればよろしいかと。 CSVの読み込みをどのようになさろうと計画しているのかはよくわかりませんが、スクリプトで処理するにしても、 1）CSVの読み込み～表示までを自作する 2）CSVの読み込みはライブラリを利用し、表示部分だけ自作 3）CSVの読み込み～表示まではライブラリを利用し、後からインデントだけ修正する といった方法が考えられるかと思います。 2）、3）は汎用的なライブラリが作成されていますので、利用しやすいものを選択して使えばよろしいでしょう。 比較的自作部分の少ない3）を例にとれば、読み込みと表示が終わった時点で、各行（表示がテーブルかどうか不明ですが）について上記のようなインデントの処理を繰り返してあげればよいことになります。 読み込み～表示のライブラリにいろいろな機能（並べ替えとか）が付いていたりすると、その操作後におかしなことになる可能性があるので、シンプルなものを選ぶ必要があるのと、生成される表（ではないかも）の構造を調べるという作業は発生しますが・・・
お礼
ありがとうございます。 ご推察の通り、自分の力量として、自作というのはハードルがかなり高いのです。 なので、出来るだけ自作の少ない３）を考えたいと思います(^-^; （もしくは、ツリー表示をあきらめて、ＣＳＶデータをそのまま表示させるか。。）
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 ＞比較的簡単に組み込めるJ-queryで、何とかならないかと jquey--javascriptより、テキスト処理が得意なPerlを使ったCGIのほうがはるかに楽だと思います。 ＞結構、需要はありそうな気もするのですが、技術的には難しい内容なのでしょうか？ 掲示板とか・・CGIで作られている簡易なものは、ほとんどが先の方法でつくられていると思います。 さすがに、大きな物になるとMySQL/postgreSQLなどのデータベースとPHP(orPerl)などでしょうが、簡単なものはほとんどすべて、CSVないし、平(ひら)のリストからHTML書き出していますからですから・・ 文字通り、膨大なものがあるでしょう。 CGI ツリー表示 掲示板 CSV https://www.google.co.jp/search?q=CGI%20%E3%83%84%E3%83%AA%E3%83%BC%E8%A1%A8%E7%A4%BA%20%E6%8E%B2%E7%A4%BA%E6%9D%BF%20CSV&ie=utf-8&oe=utf-8&hl=ja CGIの中では最も簡単な部類に属しますから、手始めにどうぞ・・・ なお、サーバーとの通信を行なうことになりますからjqueryというよりAjax( http://ja.wikipedia.org/wiki/Ajax )と考えたほうが良いでしょう。
お礼
そうですか。。。 イチからＣＧＩを勉強しないといけないですね。。(^-^;
- ORUKA1951
- ベストアンサー率45% (5062/11036)
jquery(javascript)を使うのではなく、ちゃんとサーバー側でCGIプログラムを動作させて作成すべきです。javascriptはすべてのユーザーに有効なわけではない。 ごく単純にCSVを配列、およびハッシュ(連想配列)に入れてHTMLを出力させればすむ事です。 この場合、配列のハッシュかな ・CSV形式の行から値のリストを取り出す( http://www.din.or.jp/~ohzaki/perl.htm#CSV2Values ) $DATA{'3'}=((3456,3,CCC,ｃｃｃ,・・・),(4567,3,DDD,ｄｄｄ・・・),以下略); @value = (1,2,3,4・・・); あとは、while(@vlalue){}
お礼
ご回答ありがとうございます。 一応、社内での使用なので、javascriptは有効ということを 前提にしても良いのかなと思ってます。 というか、CGIプログラムは、全く知識も無く素人なので、 比較的簡単に組み込めるJ-queryで、何とかならないかと 思った次第です。 結構、需要はありそうな気もするのですが、技術的には難しい 内容なのでしょうか？
- think49
- ベストアンサー率59% (285/482)
#1 です。 ツリー化は既存のライブラリを使えば、少しは楽を出来そうですね。 https://www.google.co.jp/search?q=javascript+tree # Re: fujimasa_3 さん
- think49
- ベストアンサー率59% (285/482)
要件がニッチな分野ですので csv-parser だけ既存コードを利用して出力部分は自前実装するしかない気がします。 csv to array的なライブラリは私も作ったことがあります。 CSV を array 化した後に DOM 出力部のコードを書けば原理的には可能です。 http://vird2002.s8.xrea.com/javascript/rfc4180.html # apos さんが提案している仕様が面白そうですが、まだ手をつけるに至ってなかったり…。 # http://d.hatena.ne.jp/babu_babu_baboo/20140929#c1412320759 それからツリー化を実装するにあたって、ツリー表示用の部品をAAにする方法と画像にする方法がありますね。 画像にするなら用意する手間がかなります。 > 項目の中に「レベル」という項目があり、この「レベル」の値を使って、ツリー表示出来ないかと考えています。 階層の閾値としては使えますが、親子関係を表す指標がなければ仕様として成り立たないと思います。 例えば、品名BBBはレベル2ですが、「品名BBBの親がどれになるのか」の判断基準が必要です。 # Re: fujimasa_3 さん
補足
ご回答ありがとうございます。 品名ＢＢＢの親は、品名ＡＡＡになります。 レベルは、１の子が２、２の子が３、３の子が４．．．となります。 「csv-parser」の言葉の意味自体が分からないレベルです。。orz
お礼
ありがとうございます！ ＞スクリプトで処理する以上は、ある程度の理解は必要となります。 ＞ほとんど知らなくても使えるもの（=ライブラリ等）で、可能な範囲で我慢するか、 ＞少しだけ覚えるかのどちらかですね。 はい、何とか少しでも理解しようとは思っています。 頂いたサンプルで、どんな処理が行われているかを理解出来るようにはなりたいですね。 自分でゼロから作り上げるのは、かなりハードルが高いですが、既にあるコードを 解読するのは、辞書（ネット検索）引きながらであれば、何とかなるかなと思いますので。 理想としては、下記サイトのようなツリーを実現したいと思っています。 （ネットで検索して、探り当てました。このプラグインを何とか使えればなと考えている ところです） http://www.webdlab.com/jquery/treemenu/