Javascript 通过json自动生成Dom的代码


Posted in Javascript onApril 01, 2010

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能制定循环次数可以少写很多代码.具体应用看场景了
这只是个小例子,期待后续!
Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
JS location几个方法小姐
Jul 09 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
iScroll.js 使用方法参考
May 16 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 #Javascript
js 异步处理进度条
Apr 01 #Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 #Javascript
Cookie 小记
Apr 01 #Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 #Javascript
You might like
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python实现微信自动回复功能
2018/04/11 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
利用Python检测URL状态
2019/07/31 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
linux面试相关问题
2013/04/28 面试题
学校安全工作制度
2014/01/19 职场文书
回门宴父母答谢词
2014/01/26 职场文书
中学生班主任评语
2014/01/30 职场文书
ktv好的活动方案
2014/08/17 职场文书
土地租赁协议书
2015/01/29 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书