# 第3节 布局器数据结构解析

    本布局器支持两种数据结构的导入导出 html与rootNode的json。
    您在布局器的所有操作本质上都在操作json,
    每种html我们都可以转成json，也可以把json转html。

    熟练掌握json有助于您个性定制化出更多功能


## 3.1 调试查看

    您可以在callback.js的save_html打印一下数据，然后拖拽好组件后 点击右上角保存按钮
    MagicalCallback.prototype.save_html = function (html,rootNode,javascript) {
        console.log(html)
        console.log(rootNode)
    }

![](img/3调试查看数据.png)


### 3.1.1 html

    <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>

### 3.1.2 rootNode

    不要被吓坏了 因为这个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
                                    }
                                ]
                            }
                        ]
                    }
                }
            ]
        }
    }

## 3.2 json数据解析

    attributes:代表html标签的各种属性 比如class style 等等
    magicalCoder:代表跟我们constant.js配置的控制此组件行为的各类配置
    magicalCoder.children:[] 孩子节点

## 3,3 个性化数据筛选

    了解此json数据之后，您可以利用树的遍历算法 从json中提取出感兴趣的数据信息
    lowcode/vip/html/lowcode/common/lowcode-util.js 里this.nodeUtil提供了很多遍历树的方式

此为markdown文档，请使用Typora软件访问 或者支持markdown的软件皆可
