最近制作一个上报页面感觉用到的功能点还挺多，今天有时间整理一下分享出来基本都是思路，有了思路，剩下的都好解决。
需求：用户上报一段json，然后可以用表格显示出json的层级关系，并且用户可以对每个节点添加描述。
刚刚拿到这个需求的时候第一个反应是 so easy，上手就做，直接入坑：
第一个坑
用户输入的json不确定格式，不确定层级数量，怎么确定层级关系呢，第一个反应就是写js递归呗，然后页面直接堆栈溢出。
自己摸索半天，让java开发同事40分钟解决了。
写了一个java类递归出来，还帮我判断了每个值的数据类型。（因为不是自己的劳动成果，这里不予公开）
第二个坑
调用自定义类。相关jar包引用不全面，浪费了我2个小时找错的原因。
第三个坑
用户输入了一个不是json格式的内容，自定义类直接报错。后来在文本域编辑结束后就直接判断了输入的是否是json格式，如果不是直接提示并情况文本域
第四个坑
split公式不能用在用户输入完成之后。因为那个时候页面已经初始化后，trtd都固定了，公式不能自动生成。
我的第一个思路是给拆成2个页面，用户先输入基本信息，然后补节点内容的时候在另外一个页面，实现了之后感觉操作比较繁琐，就冒出了第二个想法
把两个页面合并起来。因为split不能用，怎么动态生成单元格呢，我想过写append，但是看了一看控件的js放弃了。后来想起来用网页框，动态给网页框赋值，这样就可以实现了
第五个坑
网页框传递参数，url加参数不能用。post请求一般还不能用json，get请求限制长度。
试了各种方法，最后麻烦前端的同事给解决了，json.stringify
转格式之后用post传递
第六个坑
网页框引用的时候大小范围不好固定，长的话太长，有滚动条，短的话是太短，留白太多。而且给用户一看就知道是2个页面了，不美观，得让用户觉得是一个页面实现的。
我网页框引用的页面每行设置的是8毫米，我看了一下页面对应的是28像素，我根据传递的值计算了一下大概的json对象有多少个，然后乘28，还加上50像素，每次传递参数的时候动态修改一下网页框的高度。这样每次网页框生成的时候页面基本和内容相差不大。
第七个坑
点击提交的时候同时提交两个页面。怎么获取到网页框里面的按钮呢
网页框就是一个iframe
直接js获取iframe里面的控件就行了，window.frames["ifm"].document.getElementById("btnOk").click();
在主页面上的填报成功后事件里写调用网页框提交按钮的点击事件就好了，网页框的提交按钮隐藏。
|
