react-mind
react-mind is a JavaScript library for building mind, not only in react, also in angular, any web framwork
- what: react-mind only for building mind for react user
start
npm install react-mind
Examples
We have several examples Here is the first one to get you started:
; var mind = "meta": "name":"demo" "author":"792300489@qq.com" "version":"0.2" "format":"node_tree" "data":"id":"root""topic":"mind""children": "id":"easy""topic":"Easy""direction":"left""expanded":false"children": "id":"easy1""topic":"Easy to show" "id":"easy2""topic":"Easy to edit" "id":"easy3""topic":"Easy to store" "id":"easy4""topic":"Easy to embed""children": "id":"easy41""topic":"Easy to show" "id":"easy42""topic":"Easy to edit" "id":"easy43""topic":"Easy to store" "id":"open44""topic":"BSD License""children": "id":"open441""topic":"on GitHub" "id":"open442""topic":"BSD License" "id":"easy45""topic":"Easy to embed" "id":"open""topic":"Open Source""direction":"right""children": "id":"open1""topic":"on GitHub" "id":"open2""topic":"BSD License""children": "id":"open21""topic":"on GitHub" "id":"open22""topic":"BSD License""children": "id":"open221""topic":"on GitHub" "id":"open222""topic":"BSD License" "id":"powerful""topic":"Powerful""direction":"right""expanded":false"children": "id":"powerful1""topic":"Base on Javascript" "id":"powerful2""topic":"Base on HTML5" "id":"powerful3""topic":"Depends on you""expanded":false"children": "id":"powerful31""topic":"Base on Javascript" "id":"powerful32""topic":"Base on HTML5" "id":"powerful33""topic":"Depends on you" "id":"other""topic":"test node""direction":"left""children": "id":"other1""topic":"I'm from ajax" "id":"other2""topic":"I can do everything" ;var options = container:'mind_container' editable:true theme:'primary'var mind = Mind;
data
format
node_tree
代表是树形的结构node_array
代表数组的结构;
expanded
:
判断是否展开
direction
:
判断该节点是在左侧还是右侧;
options
editable
是否可以编辑,true为可以,false为不可以;
theme
皮肤
API
mind.get_data()
获取数据
mind.set_readonly()
设置为只读
mind.add_node("sub2","sub23", "new node", {"background-color":"red"});
增加节点
mind.set_node_color('sub21', 'green', '#ccc');
设置节点颜色
TODO
- 实现组织结构图,实现鱼骨图等多种效果,用字段
type
控制 --> 已经实现组织结构图,鱼骨图还未实现; - 添加在渲染前,渲染后,展开,收起等事件的回调函数;
- 完善内部的事件系统;
- 有什么想法的可以联系 792300489@qq.com;
Installation
React-mind is available as the react-mind
package on npm.
Contributing
this rope base on https://github.com/hizzgdev/jsmind @hizzgdev
License
React-mind is BSD licensed. We also provide an additional patent grant.
React-mind documentation is Creative Commons licensed.
Examples provided in this repository and in the documentation are separately licensed.