根据json字符串生成Html的一种方式


Posted in Javascript onJanuary 09, 2013

文章说明
本文介绍了根据Json串生成Html的一种方式(只是简单实现了文本框,密码框,下拉框)。只是觉得好玩才这样做,如果觉得没有任何价值,请忽略。不足指出希望各位大牛指点。后续将根据各位的指点继续完善。

功能说明
根据json字符串生成Html的一种方式
在左侧输入框中输入Json串,点击执行时根据输入的Json串在右侧展示区显示出相应的Html(使用Jquery1.4.4)
HTML:

<table style="width:100%; "> 
<col width="200px;" /> 
<tr> 
<td>Json输入框</td> 
<td>展示区</td> 
</tr> 
<tr> 
<td> 
<textarea id="txtJson" rows="20" cols="50"> 
</textarea> 
</td> 
<td valign="top"> 
<div id="divShow"> 
</div> 
</td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input id="btnExec" type="button" value="执行" /> 
</td> 
</tr> 
</table>

JS代码:
$(document).ready(function () { 
$("#btnExec").click(function () { 
try{ 
var objList = eval($("#txtJson").val()); 
jsonToControl(objList); 
} 
catch(e){ 
alert("json格式错误"); 
} 
}); 
}); 
function jsonToControl(jsonObj) { 
$("#divShow").empty(); 
$.each(jsonObj, function (index, item) { 
var control = null; 
var title = $("<label />"); 
switch (item.type) { 
case "textbox": 
control = createTextBox(); 
break; 
case "select": 
control = createSelect(item); 
break; 
case "password": 
control = createPassword(); 
break; 
//------------------------------ 
// 其它控件在这里加代码 
//------------------------------ 
} 
if (item.title != null) { 
title.text(item.title); 
} 
if (control != null) { 
control = setAttritube(control, item); 
$("#divShow").append(title); 
$("#divShow").append(control); 
$("#divShow").append("<br/>"); 
} 
}) 
} 
//设置控件的样式 
function setAttritube(control, item) { 
if (item.width != null) { 
control.width(item.width); 
} 
//-------------------------------- 
// 其他样式在这里加代码 
//-------------------------------- 
return control; 
} 
//创建TextBox 
function createTextBox() { 
return $("<input type='textbox' />"); 
} 
//创建密码框 
function createPassword() { 
return $("<input type='password'/>"); 
} 
//创建Select 
function createSelect(item) { 
var c = $("<select></select>"); 
if(item.items != null ){ 
$.each(item.items,function(index,i){ 
$("<option value='"+i.key+"' checked='checked'>"+i.value+"</option>").appendTo(c); 
}) 
} 
return c; 
}

非常感谢各位抽空看完。如果有任何意见或建议,请留言。
Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 #Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 #Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 #Javascript
js去除重复字符串两种实现方法
Jan 09 #Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 #Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 #Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 #Javascript
You might like
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JS随机密码生成算法
2019/09/23 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python flask安装和命令详解
2019/04/02 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python实现ftp文件传输功能
2020/03/20 Python
python文件编写好后如何实践
2020/07/07 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
岗位廉政承诺书
2014/03/27 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
教师工作总结范文2014
2014/11/10 职场文书
党员个人总结自评
2015/02/14 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
党小组评议意见
2015/06/02 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL