Comment gérer les cases à cocher des nœuds et les cartes d'états d'esprit sélectionnées via Vue et jsmind ?

Comment gérer les cases à cocher des nœuds et les cartes d'états d'esprit sélectionnés via Vue et jsmind ?

Introduction :
Dans la vie quotidienne et au travail, les cartes mentales sont souvent utilisées pour organiser et afficher diverses informations. Avec le développement continu du développement Web, il est devenu de plus en plus pratique de mettre en œuvre une carte mentale interactive via Vue et jsmind. Cet article expliquera comment utiliser Vue et jsmind pour gérer les cases à cocher des nœuds et les états d'esprit sélectionnés.

1. Installez et introduisez jsmind et Vue :

Tout d'abord, installez jsmind et Vue dans votre projet. Il peut être installé et introduit via npm ou en introduisant directement des fichiers js. Dans votre fichier HTML, ajoutez l'introduction suivante :

<!-- 引入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. Créer un composant Vue :

Dans Vue, nous devons créer un composant Vue pour héberger la carte mentale et gérer l'état de la carte mentale. Tout d'abord, créez un composant Vue et initialisez 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>

Dans le code ci-dessus, nous avons introduit la classe jsMind via le mot-clé import. Dans le hook de cycle de vie monté, nous créons une instance jsmind et initialisons les données de la carte mentale (mind) et la configuration (options< /code>). Ensuite, affichez la carte mentale en appelant <code>jm.show(mind). 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

Ajouter une case à cocher de nœud :
🎜Pour implémenter la case à cocher de nœud de la carte mentale, nous devons d'abord ajouter dans la configuration de la case à cocher de l'instance <code>jm . Ensuite, vous pouvez ajouter l'attribut checkbox à chaque nœud dans les données mind et le définir sur true ou false. à Cocher la case indiquant s'il faut afficher le nœud. 🎜rrreee🎜En ajoutant l'attribut checkbox et en le définissant sur true ou false, nous pouvons contrôler si la case à cocher de chaque nœud est affichée. 🎜
🎜Gérer le statut sélectionné : 🎜🎜🎜Pour gérer le statut sélectionné des nœuds de la carte mentale, nous devons utiliser l'API fournie par jsmind pour fonctionner. Dans le composant Vue, vous pouvez écouter les changements dans l'état sélectionné du nœud en liant l'événement change à la case à cocher. 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un écouteur d'événement à l'instance jsmind et déclenché l'événement check_change lorsque l'état de la case à cocher du nœud change. Nous pouvons utiliser la méthode get_node_checkbox_checked pour obtenir l'état sélectionné du nœud. 🎜🎜En écoutant les modifications dans les cases à cocher des nœuds, nous pouvons effectuer un traitement logique pour différents états sélectionnés. Par exemple, nous pouvons gérer le statut sélectionné des nœuds en modifiant le style du nœud, en stockant le statut sélectionné, etc. 🎜🎜Résumé : 🎜Cet article présente comment implémenter la gestion des cases à cocher des nœuds et des cartes d'états d'esprit sélectionnés via Vue et jsmind. En configurant l'option checkbox de l'instance jsmind et en ajoutant l'attribut checkbox à chaque nœud dans les données, nous pouvons afficher et masquer la case à cocher du nœud. En écoutant les modifications dans la case à cocher du nœud, nous pouvons gérer l'état sélectionné du nœud et effectuer le traitement logique correspondant. 🎜🎜Ce qui précède est une introduction sur la façon de gérer les cases à cocher des nœuds et les cartes d'états d'esprit sélectionnées via Vue et jsmind. J'espère que cela vous sera utile. L'utilisation de Vue et jsmind peut nous rendre plus pratiques et plus flexibles lors du développement d'applications de cartographie mentale. Si vous avez des questions ou des suggestions concernant cet article, veuillez laisser un message pour en discuter. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!