Design of multi-stage frame module

In the process of designing the report, in order to ensure the function between the module is clear and simple. , a single div element can only be initialized to a data display element(what are data display elements, tables, tables, etc.)

But this also makes us need a powerful enough frame, come on a large div divided into several pieces, shown separately.

Is what I think of the outer box control and Management module, which I call Divmanager, which divides the window by adding new small div elements in the div.

What needs to be done is to determine the input to the module, which is the JSON data format, so that he can describe the information in sufficient detail.

Previously said a DIV defines the data as:

    {510}             

So if there are multiple layers, this should be the following:

{    510    Children: [        {             20             ,              (510             children:[...]}    )                           

Another problem here is that you need to navigate from the outside to each div, then you need to add an id attribute to each frame, and the ID can generate the GUID randomly at the time of the build.

{    id:ad71f2de        , +    , +, 510         children: [...]}

In addition, to consider the situation of multi-label, multi-label before a panel module, where the key problem is that the above is a div box corresponding to a children element, if it is a box to become multi-label, then the above method can not be used, because it can not be a single correspondence. So then there was a more extreme way, very yellow and violent.

{    id:ad71f2de,        510    ,father:        EAG93G17}

The above is a well-thought-out way to adapt to multi-tagging, and more easily add the underlying elements dynamically. And the above JSON object will be rendered as a box, if it is a panel, there are multiple boxes, then you need the following:

{    ID: [' ad71f2de ', ' 2dd71fae '],              ,    510,    Father:eag93g17}

So here it's all clear, we just have to tell if the ID is a value or an array, and if it is an array, use panel initialization.

You can think of the idea as a tree, and we'll push a node to the tree by specifying the upper node (father).

Next is the realization, roll to write code ....

The final effect is as follows

Design of multi-stage frame module