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 相关文章推荐
js的event详解。
Sep 06 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
react中使用swiper的具体方法
May 15 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
PHP中调用JAVA
2006/10/09 PHP
VFP与其他应用程序的集成
2006/10/09 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
表格 隔行换色升级版
2009/11/07 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
django之常用命令详解
2016/06/30 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python机器人运动范围问题的解答
2019/04/29 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
如何在python中执行另一个py文件
2020/04/30 Python
Servlet的生命周期
2013/08/25 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
管理标语大全
2014/06/24 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android