やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > 木構造をもったテーブルjQuery-TreeGridを使ってみた。

木構造をもったテーブルjQuery-TreeGridを使ってみた。

こういうUIが欲しかった。しかし非常に複雑なHTMLコードになってしまう。

成果物

GitHubJS.jquery.treegrid.201705151150

前回まで

背景

テーブルだけど木構造をもっていて開閉できるUIが欲しい。以下Python学習項目の目次をそれで表示したい。

Python Documentation contents — Python 3.6.1 ドキュメント

参考

cdn。

結果

期待通り。開閉できるテーブルになった。

しかし、ソースコードの汚さとID管理の煩雑さが尋常じゃない。少なくとも手で書くのは現実的でない。

気になる点

  • HTML表示するとき最初に１行目だけ表示されてしばらくすると全部表示される
  • ソースコードが汚くなる
    • <script>の読込はHTML要素で木構造を定義した後
      • <body>の最後尾に<script>を書く
    • <table>のネスト
    • idの生成と管理が面倒すぎる
      • <tr class="treegrid-4 treegrid-parent-1" id="node-1-1-2">
        • 重複しないidを生成せねばならない
          • テキストノードとは別に。
        • classで親子関係を管理するためのIDを生成せねばならない
          • {treegrid-{自分のID}}
          • treegrid-parent-{親のID}
          • しかもこれらはid="..."とは別物

<table>をネストしていたかと思えば、親子関係をclass属性で設定していたりする。無駄に煩雑。

所感

HTMLソースコードは目もあてられないことに。どうしたものか。