JSmind在节点添加table

Vue项目里面使用jsmind.js插件来制作思维导图页面完成需求 vue项目使用jsmind来实现web的思维树图功能页面。 阅读详情

官网

1.开启支持选项

options = {
   support_html : true,    // 是否支持节点里的HTML元素
   }

2.添加节点

{"id":"table", "parentid":"abc","topic":"<table><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>", "width": "300", "height": "100"},

3.结果
在这里插入图片描述

其他:
1.jsMind通过鼠标拖拽的方式调整节点位置

2.关闭所有节点

   var jm = null;
    function load_jsmind(){
        var mind = mymind;
        var options = {
            container:'jsmind_container',// [必选] 容器的ID,或者为容器的对象
            editable:true,               // [可选] 是否启用编辑
            theme:'primary'  ,            // [可选] 主题
            support_html : true,    // 是否支持节点里的HTML元素 
                                    //含义为允许在节点的标题中使用 HTML 代码,如果你愿意,你甚至可以在节点标题里插入一个表格<table>。如果你希望标题中只有纯文本,请将该参数设为 false 
        }

        jm = jsMind.show(options,mind);
        jm.add_node("sub2","sub23", "new node", {"background-color":"red"});
        jm.set_node_color('sub21', 'green', '#ccc');
    }
然后在外新增函数
    // 节点关闭操作
      function collapse_all(){
          console.log(1111111);
        jm.collapse_all();
    }

或直接

    function load_jsmind(){
        var mind = mymind;
        var options = {
            container:'jsmind_container',// [必选] 容器的ID,或者为容器的对象
            editable:true,               // [可选] 是否启用编辑
            theme:'primary'  ,            // [可选] 主题
            support_html : true,    // 是否支持节点里的HTML元素 
                                    //含义为允许在节点的标题中使用 HTML 代码,如果你愿意,你甚至可以在节点标题里插入一个表格<table>。如果你希望标题中只有纯文本,请将该参数设为 false 
        }

       var  jm = jsMind.show(options,mind);
        jm.add_node("sub2","sub23", "new node", {"background-color":"red"});
        jm.set_node_color('sub21', 'green', '#ccc');
        jm.collapse_all();
    }

添加一个表单试试效果:

{"id":"form", "parentid":"**","topic":"<form>First name:<br><input type='text' name='firstname' value='Mickey'><br><br><input type='submit' value='Submit'></form> ","width": "300", "height": "100"},
在vue中使用jsmind组织架构或思维导图 在项目中遇到组织架构或思维导图的需求,选的技术是 jsmind 官方文档给的示例,有需要的可以参考:示例 先来看看效果图: 尝试了两种类型:第一张截图是普通菜单类型,第二张截图可以进行右键菜单操作。最终选用了普通菜单类型。 jsmind 可以导入 jm 文件并渲染出来,也可以对编辑后的文件进行保存,也可以下载编辑好的思维导图,可以展开指定层级节点,修改主题,以及对节点进行增删改查等操作。 演示: 接下来如何使用: 安装 npm i jsmind // 或者 yarn add jsmind 普通菜单代 阅读详情

相关推荐

A股量化实战:用Python回测动量因子策略(附聚宽完整代码)

本文详细介绍了如何在A股市场使用Python和聚宽平台,实战回测一个动量因子量化交易策略。从环境搭建、数据获取到完整的策略代码实现与回测分析,手把手教你验证“强者恒强”的投资逻辑,并提供参数优化与实战避坑指南,助力量化新手迈出第一步。

weixin_29264201的博客 969

jsmind源码初探

先把项目跑起 在<script>里面引入 jsmind.js<link>里面引入样式 <link type="text/css" rel="stylesheet" href="../style/jsmind.css" /> <script type="text/javascript" src="../js/jsmind.js"></script> <script type="text/javascript"...

weixin_44968614的博客 1359

实战指南:在UE5中高效集成Entt(ECS)框架

本文提供了一份在虚幻引擎5中高效集成Entt ECS框架的实战指南。针对UE5项目在处理大规模动态实体时的性能瓶颈,详细讲解了如何通过数据驱动的ECS架构进行优化。内容包括前期环境准备、核心构建步骤、创建首个ECS子系统以及与UE原生系统的数据同步技巧,旨在帮助开发者快速掌握集成方法,提升游戏逻辑的执行效率。

weixin_29002209的博客 158

vue-JsMind思维导图实现(包含鼠标右键自定义菜单)

项目需要 思维导图这个功能,暂时还不知道具体需要什么功能,就自己先搞了一下,简单实现节点添加 编辑 删除 拖拽 及下载导图等功能,还有鼠标右键点击节点出现自定义菜单的功能,看了好多的自己以及其他人写的,发现很多都是有缺失的,不能拿来直接使用,下面我总结了一下,可以直接复制使用。 按钮事件 或者 鼠标右键按钮事件 可二选一选用,废话不多说 直接上代码 <template> <div class="brain_content"> <div clas..

hao9101111的博客 7386

深入解析Zynq Ultrascale+ RF Data Converter中的PLL配置与时钟管理

本文深入解析了Zynq Ultrascale+ RF Data Converter中PLL配置与时钟管理的核心原理与实践。文章将RFDC时钟系统比作交响乐团,详细阐述了PLL作为指挥的关键作用,以及系统时钟、Tile时钟、参考时钟与采样时钟的层级关系。重点剖析了PLL配置参数(如VCO频率、分频器设置)的计算方法与稳定性考量,并提供了从IP配置使能顺序到多Tile同步、DRP访问等常见问题的实战避坑指南与调试技巧,帮助工程师构建稳定的射频信号处理基石。

7up55的博客 449

译码器Multisim电路仿真汇总——硬件工程师笔记

本文详细介绍了74LS139D和74LS138D两种TTL译码器的功能特点及应用。74LS139D是2线-4线译码器,具有低电平有效输出和使能控制功能,常用于地址译码和数据分配。74LS138D是3线-8线译码器,通过3位输入实现8路输出控制,广泛应用于微处理器系统。文中提供了两种芯片的引脚说明、真值表和典型应用电路,并附有硬件工程师笔试面试相关资源链接。这些基础知识对数字电路设计和硬件工程师面试准备具有重要参考价值。

XU157303764的博客 1260

基于Vue2和jsmind.js实现思维导图

使用Vue2和jsmind.js实现思维导图,包括放大、缩小、添加、修改和删除等基本功能,以及使用jsmind.menu实现右键点击显示菜单。 1 参考文档 注意:vue-jsmind是在jsmind.js基础上进行了封装,本文用的是jsmind不是vue-jsmind;jsmind.menu.js不是jsmind.js自带的,是其他大神开发的。 1.1 参考网址 实现基本功能使用jsmind.js即可,不需要jsmind.menu.js 开源项目地址: http://hizzgdev.githu

make_progress的博客 7360

基于STM32LXXX的模数转换芯片ADC(CMS24AD2001)驱动C程序设计

/ 电压 = (原始值 / 2^23) * Vref (注意:24位有符号数范围为 -2^23 到 2^23-1)//---------------- 硬件端口映射 (请根据实际电路修改) ----------------ADC_SCLK_HIGH();- PGA 放大倍数可选:1、2、4、8、16、32、64、128、256;//---------------- 宏定义操作 -------------------//---------------- 函数声明 -------------------

myron6688的博客 160

警务大数据实战:从数据可视化到精准布控的SpringBoot+JsMind实现

本文详细介绍了基于SpringBoot+JsMind的警务大数据精准布控系统设计与实现。通过三层架构设计,结合数据可视化技术,将海量警务数据转化为直观决策依据,显著提升警务人员工作效率。系统涵盖数据查询优化、安全防护、性能调优等关键环节,为警务实战提供可靠技术支撑。

weixin_30787531的博客 282

数据仓库从明细到汇总:DWD与DWS层建模实战指南

DWS层的“主题”是指业务分析的核心场景,通常分为“用户主题、商品主题、订单主题、营销主题”等。主题的定义需紧密结合业务需求,避免“为了汇总而汇总”。例如,电商平台的核心业务需求包括“用户活跃度分析”“商品销售情况分析”“订单转化分析”,对应的DWS层主题即可定义为“用户主题汇总表”“商品主题汇总表”“订单主题汇总表”。主题定义时需注意“粒度适中”——汇总粒度既不能过细(否则与DWD层重复,失去汇总意义),也不能过粗(否则无法满足细分分析需求)。

2401_83088008的博客 644

黑猫带你学eMMC协议第26篇:eMMC的硬件复位操作(H/W reset)

本文依据eMMC JEDEC5.1及个人工作经验整理而成,如有错误请留言。 文章为个人辛苦整理,付费内容,禁止私自转载。 文章所在专栏:《黑猫带你学:eMMC协议详解》 1 概述 什么是硬件复位? 硬件复位就是使用一个特殊硬件信号(这个信号在RST_n这根实实在在的物理线路上传输)将emmc复位到pre-idle state,而不需要使用cmd0或者power cycle讲emmc复位到pre-idle state。 如何进行硬件复位? 1、设置RST_n_FUNCTION [162]为1,使emm.

黑猫奥利奥的博客 6316

Spring Boot 2.x + LayUI 警务布控系统:3层架构实现嫌疑人列表与日志可视化

本文详细介绍了基于Spring Boot 2.x和LayUI的警务布控系统实现方案,重点解析了三层架构在嫌疑人管理与行为分析中的应用。通过精准布控技术,系统实现了嫌疑人列表与日志的可视化展示,提升了警务信息化建设的效率与准确性。

cique2620的博客 361

Far planner代码系列(2)

graph_decoder系列(2) 承接上文 我们接着来看decoder_node.cpp的代码部分 void GraphDecoder::Init() { /* initialize subscriber and publisher */ //graph_sub_ 订阅节点/robot_vgraph 其类型是visibility_graph_msg/Graph的消息 graph_sub_ = nh.subscribe("/robot_vgrap...

博客 1533

JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild

顾名思义,自定义也就是自己创建一个,通过JS生成节点或者属性,而不是在html里写的。setAttribute(name, value):设置/添加元素节点的属性,有则设置,无则添加;获取元素节点的属性;removeAttribute:清除属性;...

weixin_49602426的博客 3426

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

JSMInd实现动态思维导图的保存和展示

JSMInd实现动态思维导图的保存和展示 前言:最近公司要求java微服务架构中某一个页面做成动态表格的形式,可以手动增加列这种,但是领导希望能够做成思维导图更好,也是能够实时的动态添加数据,保存数据,查看数据。其他同事做列转行,我进行调研,最终选择JSMind插件实现。 第一步: 新建springboot项目,引入对应的js文件jsmind.js、jsmind.draggable.js、jsmind.css、jquery-3.5.1.min.js。引入依赖(根据自己需求取舍,我这将项目里的都拿过来了)

weixin_42074606的博客 3331

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Javascript-API-DOM-全选反选、Tab栏切换案例、节点的操作、自定义属性的操作、

排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先干掉其他人,再设置自己 <button>按钮1</button> <button>按钮2</button> <button&gt...

qq_39206750的博客 1897

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

思维导图插件--jsMind的使用

方法可自动展开或收起子节点。

qq_43680785的博客 4078

vue使用jsMind(思维导图)

jsMind是一个显示/编辑思维导图的纯javascript类库,其基于html5的canvas进行设计。我们使用它可能需要在网页上单纯的使用这种图样的效果,而其他交互却是自定义的,我这边选择的是jsMind与网上的一个(右键菜单)。jsmind.menu.js中寻找到定义menu的地方,增加custom自定义属性注自定义的东西肯定需要自定义一个类型或者唯一性的key,让代码知道我点击的是哪一个,所以还需要处理点击事件。寻找对应点击事件与.在里面增加key属性。即和。...

肖晗的博客 1万+

vue使用jsMind思维导图类库

效果展现 一、安装 npm install vue-jsmind 二、在main.js中引入 import jm from 'vue-jsmind' Vue.use(jm) if (window.jsMind) { console.log('wind') Vue.prototype.jsMind = window.jsMind } 三、使用 <template> <div> <div class="header"> <div st

一个天蝎座的程序猿 9374

js 点击节点,显示节点结构

window.document.addEventListener('click',function(){ var node = window.event.target,arr = []; while(node.parentNode){ arr.push((node.id &amp;&amp; '#' + node.id) || (node.className &amp;&amp; '.' ...

也许是前端的博客 2658

求左叶子树之和

package com.huike; public class TreeNode { int val;//节点值 TreeNode left;//左节点 TreeNode right;//右节点 //构造方法对节点初始化 TreeNode(int x) { val = x; } TreeNode(){ } public Tr.

lixiansen1511的博客 626

使用Jsmind实现前端流程图功能

使用jsmind实现流程图功能

yinzisang的博客 6819

在vue中使用jsmind生成思维导图

前景: 项目中有涉及到多层级的数据结构,思维导图的方式更方便查看数据的关系。这是简单的思维导图生成,增删改查的操作这里不需要。

深渊那支花的博客 3204

vue+jsmind实现思维导图加入按钮

jsmind库的简单应用

m0_57057282的博客 3600

vue项目中使用思维导图jsmind

其中, require('jsmind/js/jsmind.draggable-node.js')有时用require('jsmind/js/jsmind.draggable.js'),如果引入时路径错误,在node_modules中找到相应文件夹看一下文件名字是否对应正确。以上所述只是实现了思维导图的展示和展开收起功能,若想要了解更多功能请查看。

deciduous_leaves的博客 5889
上一篇: 随机过程:齐次泊松过程的定义
下一篇: 通向实在之路暂记000:如果深层的原理不具备一定的精度,则世界将毫无秩序可言
FakeOccupational
博客等级 码龄6年 2万+粉丝 1727原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值