Vue と jsmind を通じてノードのチェックボックスとマインド マップの選択状態を管理するにはどうすればよいですか?

Vue と jsmind を使用してノードのチェックボックスとマインド マップの選択された状態を管理するにはどうすればよいですか?

はじめに:
日常生活や仕事において、さまざまな情報を整理して表示するためにマインド マップがよく使用されます。 Web 開発の継続的な発展に伴い、Vue や jsmind を介してインタラクティブなマインド マップを実装することがますます便利になってきました。この記事では、Vue と jsmind を使用して、マインド マップのノードのチェック ボックスと選択状態を管理する方法を紹介します。

1. jsmind と Vue をインストールして導入する:

まず、jsmind と Vue をプロジェクトにインストールします。 npm または js ファイルを直接導入してインストールおよびインポートできます。 HTML ファイルに次の導入部分を追加します:

<!-- 引入jsmind的样式文件 -->
<link rel="stylesheet" type="text/css" href="jsmind/style/jsmind.css"/>

<!-- 引入jsmind的核心js文件 -->
<script type="text/javascript" src="jsmind/js/jsmind.js"></script>

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. Vue コンポーネントを作成します:

Vue では、マインド マップをホストする Vue コンポーネントを作成する必要があります。マインドマップのステータスを管理します。まず、Vue コンポーネントを作成し、jsmind を初期化します。

<template>
  <div ref="jsmindContainer"></div>
</template>

<script>
export default {
  mounted() {
    // 创建jsmind实例
    const mind = {
      "meta": {
        "name": "jsMind",
        "version": "0.4.6"
      },
      "format": "node_tree",
      "data": {
        "id": "root",
        "topic": "Root",
        "expanded": true,
        "children": [
          {
            "id": "node1",
            "topic": "Node 1"
          },
          {
            "id": "node2",
            "topic": "Node 2"
          }
        ]
      }
    };

    const options = {}; // 可选项，如设置主题等

    // 初始化jsmind
    const jsmindContainer = this.$refs.jsmindContainer;
    const jm = new jsMind(jsmindContainer, options);
    jm.show(mind);
  }
}
</script>

上記のコードでは、import キーワードを使用して jsMind クラスを導入しました。 mounted ライフサイクル フックでは、jsmind インスタンスを作成し、マインド マップ データ (mind) と構成 (必要に応じて options) を初期化します。次に、jm.show(mind) を呼び出してマインド マップを表示します。

3. ノード チェック ボックスの追加:

マインド マップのノード チェック ボックスを実装するには、まず jm インスタンスを構成する必要があります。追加 チェックボックスオプション。次に、mind データの各ノードに checkbox 属性を追加し、それを true または false に設定して、ノードのチェックボックスを表示します。

<script>
export default {
  mounted() {
    const mind = {
      // ...
      "data": {
        "id": "root",
        "topic": "Root",
        "expanded": true,
        "children": [
          {
            "id": "node1",
            "topic": "Node 1",
            "checkbox": true
          },
          {
            "id": "node2",
            "topic": "Node 2",
            "checkbox": false
          }
        ]
      }
    };

    const options = {
      "checkbox": true
    };

    // ...
  }
}
</script>

checkbox 属性を追加し、true または false に設定することで、各ノードのチェックボックスを表示するかどうかを制御できます。

4. 選択状態の管理:

マインドマップノードの選択状態を管理するには、jsmindが提供するAPIを利用して操作する必要があります。 Vue コンポーネントでは、change イベントをチェック ボックスにバインドすることで、ノードの選択されたステータスの変化をリッスンできます。

<script>
export default {
  mounted() {
    const jsmindContainer = this.$refs.jsmindContainer;
    const jm = new jsMind(jsmindContainer);

    jm.add_event_listener((event, data) => {
      if (event === 'check_change') {
        const node = data.evt.target.closest('.jmnode');
        const nodeId = node.getAttribute('nodeid');

        const isChecked = jm.get_node_checkbox_checked(nodeId);
        
        // 处理节点选中状态变化
        // ...

      }
    });
  }
}
</script>

上記のコードでは、jsmind インスタンスにイベント リスナーを追加し、ノードのチェックボックスの状態が変化したときに check_change イベントをトリガーしました。 get_node_checkbox_checked メソッドを使用して、ノードの選択されたステータスを取得できます。

ノードのチェックボックスの変更をリッスンすることで、選択されたさまざまな状態に対して論理処理を実行できます。たとえば、ノードのスタイルを変更したり、選択されたステータスを保存したりすることで、ノードの選択されたステータスを管理できます。

概要:
この記事では、Vue と jsmind を使用して、ノードのチェック ボックスとマインド マップの選択状態の管理を実装する方法を紹介します。 jsmind インスタンスの checkbox オプションを構成し、データ内の各ノードに checkbox 属性を追加することで、ノードのチェックボックスを表示または非表示にすることができます。ノードのチェックボックスの変更をリッスンすることで、ノードの選択されたステータスを管理し、対応する論理処理を実行できます。

上記は、Vue と jsmind を使用してマインド マップのノードのチェックボックスと選択状態を管理する方法の紹介です。 Vue と jsmind を使用すると、マインド マッピング アプリケーションを開発する際に、より便利で柔軟になります。この記事に関してご質問やご提案がございましたら、ディスカッションのためにメッセージを残してください。

以上がVue と jsmind を通じてノードのチェックボックスとマインド マップの選択状態を管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。