Wie verwalte ich Knoten-Kontrollkästchen und ausgewählte State-of-Mind-Maps über Vue und jsmind?

Wie verwalte ich Knoten-Kontrollkästchen und ausgewählte State-of-Mind-Maps über Vue und jsmind?

Einführung:
Im täglichen Leben und bei der Arbeit werden Mindmaps häufig verwendet, um verschiedene Informationen zu organisieren und anzuzeigen. Mit der kontinuierlichen Weiterentwicklung der Webentwicklung ist es immer bequemer geworden, eine interaktive Mindmap über Vue und jsmind zu implementieren. In diesem Artikel wird erläutert, wie Sie mit Vue und jsmind die Knoten-Kontrollkästchen und ausgewählte Mind-Zustandskarten verwalten.

1. Installieren und Einführung von jsmind und Vue:

Installieren Sie zunächst jsmind und Vue in Ihrem Projekt. Es kann über npm installiert und eingeführt werden oder js-Dateien direkt einführen. Fügen Sie in Ihrer HTML-Datei die folgende Einleitung hinzu:

<!-- 引入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. Erstellen Sie eine Vue-Komponente:

In Vue müssen wir eine Vue-Komponente erstellen, um die Mind Map zu hosten und den Status der Mind Map zu verwalten. Erstellen Sie zunächst eine Vue-Komponente und initialisieren Sie 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>

Im obigen Code haben wir die Klasse jsMind über das Schlüsselwort import eingeführt. Im mounted-Lebenszyklus-Hook erstellen wir eine jsmind-Instanz und initialisieren die Mindmap-Daten (mind) und die Konfiguration (options). Zeigen Sie dann die Mindmap an, indem Sie <code>jm.show(mind) aufrufen. import关键字引入了jsMind类。在mounted生命周期钩子中，我们创建了一个jsmind实例，并根据我们的需要初始化思维导图的数据(mind)和配置(options)。然后，通过调用jm.show(mind)来展示思维导图。

3. 添加节点复选框：

要实现思维导图的节点复选框，我们需要先在jm实例的配置中添加checkbox选项。然后，可以在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

Knoten-Kontrollkästchen hinzufügen:
🎜Um das Knoten-Kontrollkästchen der Mind Map zu implementieren, müssen wir zunächst in der Konfiguration des <code>jm-Instanz-Kontrollkästchens hinzufügen -Option. Anschließend können Sie das Attribut checkbox zu jedem Knoten in den mind-Daten hinzufügen und es auf true oder false setzen bis Kontrollkästchen, das angibt, ob der Knoten angezeigt werden soll. 🎜rrreee🎜Indem wir das Attribut checkbox hinzufügen und es auf true oder false setzen, können wir steuern, ob das Kontrollkästchen jedes Knotens angezeigt wird. 🎜
🎜Ausgewählten Status verwalten: 🎜🎜🎜Um den ausgewählten Status von Mind Map-Knoten zu verwalten, müssen wir für den Betrieb die von jsmind bereitgestellte API verwenden. In der Vue-Komponente können Sie Änderungen im ausgewählten Status des Knotens abhören, indem Sie das Ereignis change an das Kontrollkästchen binden. 🎜rrreee🎜Im obigen Code haben wir der jsmind-Instanz einen Ereignis-Listener hinzugefügt und das Ereignis check_change ausgelöst, wenn sich der Status des Knoten-Kontrollkästchens ändert. Wir können die Methode get_node_checkbox_checked verwenden, um den ausgewählten Status des Knotens abzurufen. 🎜🎜Durch das Abhören von Änderungen in Knoten-Kontrollkästchen können wir eine logische Verarbeitung für verschiedene ausgewählte Zustände durchführen. Beispielsweise können wir den ausgewählten Status von Knoten verwalten, indem wir den Stil des Knotens ändern, den ausgewählten Status speichern usw. 🎜🎜Zusammenfassung: 🎜In diesem Artikel wird erläutert, wie die Verwaltung von Knoten-Kontrollkästchen und ausgewählten Mind-Zustandskarten über Vue und jsmind implementiert wird. Durch Konfigurieren der Option checkbox der jsmind-Instanz und Hinzufügen des Attributs checkbox zu jedem Knoten in den Daten können wir das Knoten-Kontrollkästchen anzeigen und ausblenden. Indem wir Änderungen im Knoten-Kontrollkästchen abhören, können wir den ausgewählten Status des Knotens verwalten und eine entsprechende logische Verarbeitung durchführen. 🎜🎜Das Obige ist eine Einführung in die Verwaltung der Knoten-Kontrollkästchen und ausgewählter State-of-Mind-Maps über Vue und jsmind. Ich hoffe, es wird Ihnen hilfreich sein. Die Verwendung von Vue und jsmind kann uns bei der Entwicklung von Mind-Mapping-Anwendungen komfortabler und flexibler machen. Wenn Sie Fragen oder Anregungen zu diesem Artikel haben, hinterlassen Sie bitte eine Nachricht zur Diskussion. 🎜

Das obige ist der detaillierte Inhalt vonWie verwalte ich Knoten-Kontrollkästchen und ausgewählte State-of-Mind-Maps über Vue und jsmind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!