Wie implementiert man die Such- und Filterfunktionen von Mind Maps über Vue und jsmind?

Wie implementiert man die Such- und Filterfunktionen von Mind Maps über Vue und jsmind?

Mind Map ist ein häufig verwendetes Tool zum Aufzeichnen und Organisieren von Gedanken, das Menschen dabei helfen kann, die Beziehung zwischen Informationen klarer darzustellen und zu verstehen. Wenn jedoch eine große Anzahl von Knoten in der Mindmap vorhanden ist, wird es sehr schwierig, bestimmte Knoten zu finden. Um dieses Problem zu lösen, können wir Vue und jsmind kombinieren, um die Such- und Filterfunktionen der Mind Map zu implementieren und Benutzern dabei zu helfen, die erforderlichen Knoten schneller zu finden.

Im Folgenden stellen wir vor, wie Sie mit Vue und jsmind die Such- und Filterfunktionen von Mind Maps implementieren. Zuerst müssen wir Daten vorbereiten, die die Mindmap-Struktur enthalten, wie unten gezeigt:

const mindData = {
    "meta": {
        "name": "思维导图",
        "version": "0.2.0"
    },
    "format": "node_tree",
    "data": {
        "id": "root",
        "topic": "思维导图",
        "expanded": true,
        "children": [{
            "id": "1",
            "topic": "节点1",
            "expanded": true,
            "children": [{
                    "id": "1.1",
                    "topic": "子节点1.1",
                    "expanded": true,
                    "children": []
                },
                {
                    "id": "1.2",
                    "topic": "子节点1.2",
                    "expanded": true,
                    "children": []
                }
            ]
        }]
    }
};

Als nächstes müssen wir die jsmind-Bibliothek in die Vue-Instanz einführen und die Mindmap-Daten an die jsmind-Instanz übergeben, um das Mindmap-Bild zu rendern . Fügen Sie gleichzeitig Such- und Filtereingabefelder und Schaltflächen in der Vue-Vorlage hinzu:

<template>
  <div>
    <input v-model="searchText" type="text" placeholder="在思维导图中搜索" />
    <button @click="filterMinds">搜索</button>
    <div ref="jsmindContainer"></div>
  </div>
</template>

Definieren Sie dann im Vue-Skript relevante Daten und Funktionen, um die Such- und Filterfunktionen der Mind Map zu implementieren:

<script>
import jsMind from "jsmind";
import "jsmind/style/jsmind.css";

export default {
  data() {
    return {
      mind: null,
      searchText: ""
    };
  },
  mounted() {
    this.initMind();
  },
  methods: {
    initMind() {
      const container = this.$refs.jsmindContainer;

      this.mind = new jsMind({
          container,
          editable: false
      });
      
      this.mind.show(mindData);
    },
    filterMinds() {
      const nodes = mindData.data.children[0].children;

      for (let i = nodes.length - 1; i > -1; i--) {
          if (!nodes[i].topic.includes(this.searchText)) {
              nodes.splice(i, 1);
          }
      }

      this.mind.show(mindData);
    }
  }
};
</script>

Im obigen In Nachdem wir den Code eingegeben haben, initialisieren wir zunächst die Mindmap im gemounteten Lebenszyklus-Hook und rendern sie auf der Seite. Anschließend wird eine filterMinds-Funktion definiert, um die Knoten der Mind Map basierend auf Suchschlüsselwörtern zu filtern. Diese Funktion durchläuft die Knoten, um festzustellen, ob das Thema des Knotens das Suchschlüsselwort enthält. Wenn dies nicht der Fall ist, wird der Knoten aus dem Knotenarray gelöscht. Rufen Sie abschließend die Methode mind.show auf, um die Mindmap neu zu rendern.

Fügen Sie abschließend die obige Vue-Komponente zur Root-Vue-Instanz hinzu und fügen Sie die jsmind-Bibliothek in die Seite ein, um die Mindmap und das Suchfeld anzuzeigen. Benutzer können Schlüsselwörter in das Suchfeld eingeben und auf die Suchschaltfläche klicken. Die Mindmap-Knoten werden dann anhand der Schlüsselwörter gefiltert und die Mindmap wird neu gerendert. Auf diese Weise können Benutzer die benötigten Knoten schneller finden.

Das Obige ist eine Einführung in die Implementierung der Such- und Filterfunktionen von Mind Maps über Vue und jsmind. Hoffe das hilft!

Das obige ist der detaillierte Inhalt vonWie implementiert man die Such- und Filterfunktionen von Mind Maps über Vue und jsmind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!