Javascript는 json_json을 통해 Dom 코드를 자동으로 생성합니다.
- WBOY원래의
- 2016-05-16 18:30:571113검색
json에서 html trio
원시 자료: json
코드 복사 코드는 다음과 같습니다.
var json ={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:[ "a2", "a3"],sub:[
{'li':{num:3,con:"콘텐츠 콘텐츠 콘텐츠",fn:{'click':function(){alert('나는 LiLi입니다 ')}} }}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{' li':{num:3,con:"2차 라운드",fn:{'click':function(){alert('나는 LiLi입니다')}}}}
]}
},
{
'스팬':{id:'q',con:"나는 스팬입니다"}
}
]}
}
id= id
className=class
num=루프 수
fn=바인딩 함수
con=요소 콘텐츠
sub = 하위 노드를 나타냅니다.
메인 요리: 메소드
코드 복사 코드는 다음과 같습니다.
JsonToHtml={
init:function(data ,parent){// jsonDB, 상위 요소
for(var attr in data){
if(data[attr]["id"]){var num=1}else{var num=data[attr ]["num"] ||1}//ID가 존재하는 경우 ID는 반복될 수 없으므로 루프의 기본값은 1입니다.
for(var j=0;j
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//반복할 때 상위 요소를 전달하고 그렇지 않은 경우 다음과 같이 본문에서 출력됩니다. default
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2]
switch(attr2){
case "id":
obj. id=_tempAttr;
break;
case "className ": //여러 클래스가 전달되도록 지원~ 더 간단하게~
if(_tempAttr.length && _tempAttr.pop){
for(var k =0;k<_tempAttr.length; k){
obj.className= obj.className " " _tempAttr[k] ;
}
}else{ obj.className =_tempAttr;}
break ;
case "sub": //sub가 있는 경우 노드가 재귀를 시작합니다.
for(var i=0;i<_tempAttr.length;i ){
_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i ],obj)
}
break
case "con"://새 하위 요소를 생성할 수 있는 콘텐츠 설정
obj.innerHTML=_tempAttr;
break;
case "num":
break
case "fn"://바인딩 방법
for(var fns in _tempAttr)
if (window.addEventListener) {
obj.addEventListener( fns, _tempAttr[fns], false)
} else {
if (window.attachEvent) {
obj.attachEvent( "on" fns, _tempAttr[fns]);
}
}
}
break;
default : //속성 설정
obj.setAttribute(attr2,_tempAttr);break ;
}
}
}
}
이것을 반환합니다.
}
}
JsonToHtml.init(json);
서빙
코드 복사 코드는 다음과 같습니다.
- 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠
- 🎜>
- 2라운드
- 2라운드
- 2라운드
주로 json 멤버를 순회하여 html 요소를 생성합니다. . 더 좋은 점은 num이 루프 수를 지정할 수 있고 더 적은 양의 코드를 작성할 수 있다는 것입니다. 구체적인 적용은 시나리오에 따라 다릅니다.
이것은 단지 작은 예일 뿐이므로 후속 조치를 기대합니다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.