布局器数据结构解析
xxxxxxxxxx本布局器支持两种数据结构的导入导出 html与rootNode的json。您在布局器的所有操作本质上都在操作json,每种html我们都可以转成json，也可以把json转html。熟练掌握json有助于您个性定制化出更多功能
视频地址： https://edu.csdn.net/course/play/10747/442708
1 调试查看
xxxxxxxxxx您可以在callback.js的save_html打印一下数据，然后拖拽好组件后 点击右上角保存按钮MagicalCallback.prototype.save_html = function (param) {console.log(param)}
1.1 html
xxxxxxxxxx<div class="layui-row"><div class="layui-col-md6"><input class="layui-input" type="text" autocomplete="off" /></div><div class="layui-col-md6"><input name="checkbox" title="复选框" type="checkbox" /></div></div>
1.2 rootNode
xxxxxxxxxx不要被吓坏了 因为这个json格式十分强大，我们布局器的任何操作 其实都在操作这个json 这是一个树形嵌套json我们在constant.js中的大部分配置都在此处体现，所以当您在使用api的时候，可以根据返回时node的数据来进行各种逻辑交互{"attributes":{"id":"","name":"","title":"","class":"root","style":""},"magicalCoder":{"identifier":"root","id":"Root","name":"Root","dragInto":true,"parentId":"","nodeType":1,"tagName":"div","textContent":"","showInNavigateTree":true,"focus":false,"copy":false,"paste":true,"duplicate":false,"canDelete":false,"assistZoom":false,"canZoom":false,"zoom":false,"tmpWrapTag":null,"assistAdd":false,"assistDuplicate":false,"assistDelete":false,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[{"attributes":{"id":"","name":"","title":"","class":"layui-row","style":""},"magicalCoder":{"identifier":"layui-row","id":"2","name":"行","dragInto":true,"parentId":"Root","nodeType":1,"tagName":"div","textContent":"","showInNavigateTree":true,"focus":false,"copy":true,"paste":false,"duplicate":true,"canDelete":true,"assistZoom":true,"canZoom":true,"zoom":false,"tmpWrapTag":null,"assistAdd":true,"assistDuplicate":true,"assistDelete":true,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[{"attributes":{"id":"","name":"","title":"","class":"layui-col-md6","style":""},"magicalCoder":{"identifier":"layui-col-md6","id":"3","name":"列","dragInto":true,"parentId":"2","nodeType":1,"tagName":"div","textContent":"","showInNavigateTree":true,"focus":false,"copy":true,"paste":true,"duplicate":true,"canDelete":true,"assistZoom":true,"canZoom":true,"zoom":false,"tmpWrapTag":null,"assistAdd":false,"assistDuplicate":true,"assistDelete":true,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[{"attributes":{"id":"","name":"","title":"","class":"layui-input","style":"","type":"text","autocomplete":"off"},"magicalCoder":{"identifier":"type=text","id":"4","name":"输入框","dragInto":false,"parentId":"3","nodeType":1,"tagName":"input","textContent":"","showInNavigateTree":true,"focus":false,"copy":true,"paste":false,"duplicate":true,"canDelete":true,"assistZoom":false,"canZoom":false,"zoom":false,"tmpWrapTag":null,"assistAdd":false,"assistDuplicate":false,"assistDelete":false,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[],"treeExtraName":{"attr":["id","name"],"text":false}}}],"onlyParents":["layui-row"]}},{"attributes":{"id":"","name":"","title":"","class":"layui-col-md6","style":""},"magicalCoder":{"identifier":"layui-col-md6","id":"5","name":"列","dragInto":true,"parentId":"2","nodeType":1,"tagName":"div","textContent":"","showInNavigateTree":true,"focus":false,"copy":true,"paste":true,"duplicate":true,"canDelete":true,"assistZoom":true,"canZoom":true,"zoom":false,"tmpWrapTag":null,"assistAdd":false,"assistDuplicate":true,"assistDelete":true,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[{"attributes":{"id":"","name":"checkbox","title":"复选框","class":"","style":"","type":"checkbox"},"magicalCoder":{"identifier":"type=checkbox","id":"6","name":"复选框","dragInto":false,"parentId":"5","nodeType":1,"tagName":"input","textContent":"","showInNavigateTree":true,"focus":false,"copy":true,"paste":false,"duplicate":true,"canDelete":true,"assistZoom":false,"canZoom":false,"zoom":false,"tmpWrapTag":"span","assistAdd":false,"assistDuplicate":false,"assistDelete":false,"error":false,"errorTitles":[],"errorCallback":null,"errorTooltip":false,"warn":false,"children":[],"primary":0,"treeExtraName":{"attr":["id","name","title"],"text":false},"duplicateAttr":["value"]}}],"onlyParents":["layui-row"]}}],"duplicateAttr":[],"onlyChildren":["layui-col-xs1","layui-col-xs2","layui-col-xs3","layui-col-xs4","layui-col-xs5","layui-col-xs6","layui-col-xs7","layui-col-xs8","layui-col-xs9","layui-col-xs10","layui-col-xs11","layui-col-xs12","layui-col-sm1","layui-col-sm2","layui-col-sm3","layui-col-sm4","layui-col-sm5","layui-col-sm6","layui-col-sm7","layui-col-sm8","layui-col-sm9","layui-col-sm10","layui-col-sm11","layui-col-sm12","layui-col-md1","layui-col-md2","layui-col-md3","layui-col-md4","layui-col-md5","layui-col-md6","layui-col-md7","layui-col-md8","layui-col-md9","layui-col-md10","layui-col-md11","layui-col-md12","layui-col-lg1","layui-col-lg2","layui-col-lg3","layui-col-lg4","layui-col-lg5","layui-col-lg6","layui-col-lg7","layui-col-lg8","layui-col-lg9","layui-col-lg10","layui-col-lg11","layui-col-lg12"],"addOneItems":[{"":[{"html":"<div class='layui-col-md6 layui-col-lg6'></div>","focus":false}]}]}}]}}
2 json数据解析
xxxxxxxxxxattributes:代表html标签的各种属性 比如class style 等等magicalCoder:代表跟我们constant.js配置的控制此组件行为的各类配置magicalCoder.children:[] 孩子节点
3 个性化数据筛选
xxxxxxxxxx了解此json数据之后，您可以利用树的遍历算法 从json中提取出感兴趣的数据信息lowcode/vip/html/lowcode/common/lowcode-util.js 里this.nodeUtil提供了很多遍历树的方式