动态生成页面元素前台适配

我们都知道YANG文件，我们要根据动态生成的元素生成页面。页面支持container、list、leaflist、choice、leaf、input、switch、radio。
<div id="DynamicPage_title">
<div style="margin-top:10px;">
<span style="color:#999999;font-size:12px;">{{configuration}} > {{configurationDeviceGroup}} > {{networkPolicy}} > {{devicegroup}} > {{config}} > {{Netconf_TITLE}}</span>
</div>
</div>
<div class="DynamicPage_titleLineTop"></div>

<div id="layout">

</div>

<div class="dynamic_operation">
<eview:button id="buttonConfirm" type="default" tooltip=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.confirm')}}" text=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.confirm')}}" click='confirmClickHanddler'></eview:button>

<eview:button id="buttonCancel" type="default" cls="buttonCancelClass" tooltip=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.cancel')}}" text=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.cancel')}}" click='cancleClickHanddler'></eview:button>

<eview:button id="buttonClose" type="default" cls="buttonCloseClass" tooltip=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.close')}}" text=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.close')}}" click='closeClickHanddler' display=false></eview:button>

<eview:button id="buttonLoad" type="default" cls="buttonLoadClass" tooltip=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.load')}}" display=false text=" {{i18n.translate('ac.tenant.deviceGroup.DynamicPage.display.load')}}" click='loadClickHanddler'></eview:button>

</div>

.divHeight1 {
margin-top: 5px;
height: inherit;
}

.floatLeft {
float: left;
}

.radioName {
height: 25px;
line-height: 25px;
width: 200px;
}

.pointerClass {
cursor: pointer;
}

div[childrenBoxIndex] {
margin: 5px 30px;
border: 1px solid lightgray/#222/
;
}

.spaceSpit {
margin-left: 20px;
}

.btnApple_Outer {
background-color: rgb(238, 238, 238);
height: 16px;
width: 50px;
border-radius: 10px;
float: left;
cursor: pointer;
border: 1px solid #ccc;
margin-left: 20px;
}

.btnApple_Inner {
left: -1px;
color: rgb(187, 187, 187);
border: 1px solid #ccc;
height: 16px;
width: 30px;
background: white;
border-radius: 10px;
position: relative;
text-align: center;
cursor: pointer;
top: -1px;
font-family: "黑体"!important;
line-height: 18px;
font-size: 12px;
letter-spacing: 1px;
}

.ele_list,
.ele_leafList {
margin-top: 5px;
line-height: 30px;
}

div[singleid]>.nodeHead {
height: 30px;
}

div[singleid]>.nodeHead>.nodelabel {
float: left;
line-height: 30px;
}

div[singleid]>.nodeHead>.leafListlabel {
float: left;
line-height: 30px;
}

.dyPage_link {
cursor: pointer;
color: #009ae7;
}

.dyPage_link:hover {
color: #0088cc;
text-decoration: underline;
}

.btnApple_Outer.ON {
background-color: rgb(94, 204, 73);
border-color: rgb(94, 204, 73);
}

.btnApple_Inner.ON {
left: 19px;
color: rgb(94, 204, 73);
border-color: rgb(94, 204, 73)
}

.btnApple_Outer.OFF {
background-color: rgb(238, 238, 238);
border-color: rgb(204, 204, 204);
}

.btnApple_Inner.OFF {
left: -1px;
color: rgb(187, 187, 187);
border-color: rgb(204, 204, 204);
}

.dynamic_operation {
margin-top: 20px;
}

.buttonCancelClass,
.buttonLoadClass {
margin-left: 15px
}

.eview_Dlg_iframe {
z-index: 200!important;
}

margin-top: 10px;
color: #C7C7C7;

}

.DynamicPage_titleLine {
width: 818px;
border-width: 1px;
border-top-style: solid;
border-top-color: #d9d9d9;
margin-top: 9px;
margin-bottom: 15px;
position: relative;
top: 5px;
left: 5px;
}

.DynamicPage_titleLineTop {
width: 1157px;
border-width: 1px;
border-top-style: solid;
border-top-color: #d9d9d9;
margin-top: 9px;
margin-bottom: 8px;
}