You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.7 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

目录

  1. 基本用法
  2. 选项
  3. 界面操控

jsMind 对象

jsMind 提供了对思维导图进行操控的一系列 API这些 API 都是基于 jsMind 对象处理的,一般情况下可以使用下面的代码获取 jsMind 对象:

/*
方法1
    创建思维导图时即可获得 jsMind 对象
*/
var jm = new jsMind(options);

/*
方法2
    当前页面已存在一个思维导图时可直接获得此 jsMind 对象
    当在一个页面里创建了多个 jsMind 时,此方法获得的是最后创建的那个对象
*/
var jm = jsMind.current;

3.1. 显示思维导图

使用 jm.show(mind) 方法即可显示思维导图了,具体的用法请参见 1.1. 基本框架

3.2. 查找节点

获取根节点 : 使用 jm.get_root() 即可获取当前思维导图的根节点。

根据 id 查找节点 : 使用 jm.get_node(nodeid) 方法即可根据 id 查找当前思维导图中指定的节点,如果查找不到则返回 null

获取选中的节点 : 使用 jm.get_selected_node() 方法即可获取当前选中的节点,如果没有选中的节点则返回 null

查找相邻的节点 : 使用 jm.find_node_before(node|nodeid)find_node_after(node|nodeid) 即可获取指定的节点的上一个或下一个节点,如果没有上一个或下一个,则返回 null

获取父节点 : 使用 node.parent 即可获取父节点,根节点的父节点为 null`。

获取子节点集合 : 使用 node.children 即可获取子节点的集合。

Tips

思维导图是由多个节点和节点之间的连线组成的,一个思维导图有一个根节点,根节点外围可以有多个子节点,子节点还可以有多个子节点。每个节点包含以下的多个属性:

node {
    id,        //  : string                    节点id
    index,     //  : integer                   节点序号
    topic,     //  : string                    节点主题
    isroot,    //  : boolean                   指示该节点是否为根节点
    parent,    //  : node                      该节点的父节点,根节点的父节目为 null ,但请不要根据此属性判断该节点是否为根节点
    direction, //  : enum(left,center,right)   该节点的分布位置
    children,  //  : array of node             该节点的子节点组合
    expanded,  //  : boolean                   该节点的下级节点是否展开
    data,      //  : object{string,object}     该节点的其它附加数据
}

3.3. 操作节点

选中节点 : 使用 `jm.select_node(node) 方法选中指定的节点。

收起子节点 : 使用 jm.collapse_node(node|nodeid) 方法可收起该节点的子节点。

展开子节点 : 使用 jm.expand_node(node|nodeid) 方法可展开该节点的子节点。

收起或展开子节点 : 使用 jm.toggle_node(node|nodeid) 方法可自动展开或收起子节点。

展开全部子节点 : 使用 jm.expand_all() 方法可展开全部子节点。

展开至层级 : 使用 jm.expand_to_depth(depth) 方法可展开到指定层级。

移动节点 : 使用 jm.move_node(node|nodeid,beforeid) 方法可将该节点移动到 beforeid 节点之前,可将 beforeid 设为 _first__last可将该节点移动到相邻节点的最前或最后。

启用编辑 : 使用 jm.enable_edit() 方法可启用对当前思维导图的编辑功能。

禁止编辑 : 使用 jm.disable_edit() 方法可禁止对当前思维导图进行编辑。

编辑节点 : 使用 jm.begin_edit(node|nodeid) 方法可以将该节点调整为编辑状态。

停止编辑 : 使用 jm.end_edit() 方法可以将该节点调整为只读状态。

3.4. 编辑节点

添加节点 : 使用 jm.add_node(parent_node, nodeid, topic, data) 方法可添加一个节点。

在指定位置前插入节点 : 使用 jm.insert_node_before(node_before, nodeid, topic, data) 方法可在 node_before 节点前插入节点。

在指定位置后插入节点 : 使用 jm.insert_node_after(node_after, nodeid, topic, data) 方法可在 node_after 节点后插入节点。

删除节点 : 使用 jm.remove_node(node|nodeid) 方法可删除指定的节点及其所有的子节点。

更新节点 : 使用 jm.update_node(nodeid, topic) 方法可更新指定节点的 topic其它属性由于不在界面上显示可以直接修改对应 node 的属性。

3.5. 设置样式

设置主题 : 使用 jm.set_theme(theme) 方法可设置当前思维导图的主题。

设置背景色/前景色 : 使用 jm.set_node_color(nodeid, bgcolor, fgcolor) 方法可设置指定节点的背景色与前景色。

设置字体 : 使用 jm.set_node_font_style(nodeid, size, weight, style) 方法可设置指定节点的字体。

设置背景图片 : 使用 jm.set_node_background_image(nodeid, image, width, height) 方法可设置指定节点的背景图片。

3.6. 获取数据

获取元数据 : 使用 jm.get_meta() 方法可获取当前思维导图的元数据。

获取数据 : 使用 jm.get_data(data_format) 方法可获取当前思维导图的指定格式的数据文本。

3.7. 其它操作

清除节点的选中 : 使用 jm.select_clear() 方法可以清除当前的选中状态。

判断节点是否可见 : 使用 jm.is_node_visible(node) 方法可以判断此节点是否显示。

版权声明

禁止转载、禁止演绎。

jsMind 项目仍在不断升级变化,版本更新时会同时更新对应的文档。为避免给使用者带来困惑,在没有得到书面许可前,禁止转载本文档,同时禁止对本文档进行任何形式的更改。