[转载]Javascript 通过json自动生成Dom小示例

baacloud免费翻墙vpn注册使用

[转载]Javascript 通过json自动生成Dom小示例 – 花吻道 – 博客园.

json转html 三重奏

原料: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’)}}}}
]}
},
{
‘span’:{id:’q’,con:”我是span”}
}
]}
}

id=id

className=class

num=循环次数

fn=绑定函数

con=元素内容

sub =代表有子节

主 菜:method

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,则循环默认为1,因为id不可重复
for(var j=0;j<num;j++){
var obj= document.createElement(attr);
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//递归时传入父元素,没有则默认从body输出
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case id:
obj.id=_tempAttr;
break;
case className: //支持多个class传入~简了点~
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: //如果有子节点则开始递归
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;
}
}
}
}
return this;
}
}

JsonToHtml.init(json); //初始化

上 菜

<div id=”flower” class=”a1″>
<ul id=”flower1″ class=”a2 a3″>
<li>内容内容内容</li>
<li>内容内容内容</li>
<li>内容内容内容</li>
</ul>
<ul id=”flower4″ class=”a2 a3″>
<li>第2轮了</li>
<li>第2轮了</li>
<li>第2轮了</li>
</ul>
<span id=”q”>我是span</span>
<div>

主 要还是通过递归和迭代来遍历json成员生成html元素 ,比较好的是num能制定循环次数可以少写很多代码.具体应用看场景了

这 只是个小例子,期待后续!

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏