前言
前一段时间做需求的时候，需要用户是可以编辑一些数据，相当于一个表单。我第一反应是MongoDB的数据可视平台。用户可以通过可视化来操作数据。我就仿着写了一版，大概就是下面这个样子。
文章后面有源码地址
正文
有几个问题需要解决
- 如何可以接受任意数据结构。
- 如何进行
添加、修改、删除数据
接受任意的数据
常见的数据类型有几种
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- 数组（Array）
- 对象（Object）
想做到这几种数据类型随意组合编辑，使用递归就可以轻松解决，modal的内容都是通过Render函数渲染出来的，那么只要在恰当的时机再次调用就可以了
当一个值为数组或者对象时，就可以再次调用Render函数，这样就可以支持任意结构的数据 
如何进行添加、修改、删除数据
要解决这个问题我们首先要知道，我们渲染数据的结构是什么样子的。这是最原始的结构，我们现在要改变name的值应该是value.name=xxxxx
如果是下面这个结构要改变class中的name，应该是value.class.name=xxxx。
要是改变class中days中其中的一项，那应该是value.class.days[下标]=xxxx。
从这里可以知道，我们只要知道了keys队列那么我们就可以任意改变数据中的某一个值。
在递归渲染的时候，我们将上一层的keys队列往下带就可以了。这样在改变值的时候只要加上他在自己层级的key就可以了。 
在触发值修改时，只要根据keys队列我们就可以找到修改的值并进行修改。添加和删除都是一样的道理。 
结尾
感兴趣的可以去试试 仓库地址