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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Vue + ts实现轮播插件的示例
Nov 10 Javascript
详解TypeScript中的类型保护
Apr 29 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教程 变量定义
2009/10/23 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP调用其他文件中的类
2018/04/02 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python设置环境变量的原因和方法
2019/06/24 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
污水厂厂长岗位职责
2014/01/04 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
合作投资意向书
2014/04/01 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年实验室工作总结
2014/12/03 职场文书
教师岗位职责范本
2015/04/02 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书