快捷搜索:

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" > <ul id="flower1" > <li>内容内容内容</li> <li>内容内容内容</li> <li>内容内容内容</li> </ul>   <ul id="flower4" > <li>第2轮了</li> <li>第2轮了</li> <li>第2轮了</li> </ul>   <span id="q">我是span</span> <div> 主要还是通过递归和迭代来遍历json成员生成html元素 ,比较好的是num能制定循环次数可以少写很多代码.具体应用看场景了 这只是个小例子,期待后续!

本文源自: AG88环亚

您可能还会对下面的文章感兴趣: