JavaScript: ツリー構造のデータを扱う (3)

Node オブジェクトを ul要素, li要素のツリーで表示する

ツリー構造のデータを扱う (1)、 (2) までの話は データモデル の話に相当します。 Web ブラウザなどの GUI を使った表示 (ビュー) や操作 (コントローラ) の話はまだ出てきていません。 次に Node のツリーデータを HTML で表示する処理を付けてみます。
ul,liタグ, JavaScript, ツリービューのサンプル

• サンプル: TestJS_node_TreeView2022.html (2022)
  

編集可能なツリービュー

上のサンプルに 1) ファイルの読み書きの機能や 2) ツリーの編集機能を付けてみます。

TreeView を継承した編集可能なクラス (EditableTreeView) を用意します。

◎内容
・ツリー構造が扱えるテキストメモ帳

◎クラスの継承

 +- TreeView               ツリービューを表示するだけ。
    +- EditableTreeView    TreeViewを継承する。ツリーの編集処理を追加。
       +-- SGFTreeView     SGF用のクラス

◎ Node.properties のキーの定義

  N : ノード名 (項目名)
  C : コメント (テキスト)

  N,C は SGF で使われるプロパティです。

• サンプル: TestJS_node_EditableTreeView2022.html (2022)
  

いろいろ

データモデル (Node) とビュー・コントローラー (TreeViewなど) は 1つのプログラムに混在させず明確に分離しておくと、 後でコードの再利用がしやすくなります。

関連

• ツリー構造のデータを扱う (1)
• ツリー構造のデータを扱う (2)
• ul,liタグ, JavaScript, ツリービューのサンプル
• JavaScript: SGFツリービューのサンプル