根据Json串生成Html(一)
来源:互联网 发布:淘宝卖家寄恐怖东西 编辑:程序博客网 时间:2024/05/17 10:25
文章说明:这是我的第一篇博客,介绍了根据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;
}
非常感谢各位抽空看完。如果有任何意见或建议,请留言。
转载请指明出处 张*权。
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 根据Json串生成Html(一)
- Jquery根据JSON生成Table
- 根据json生成对应属性
- json生成html
- C#根据html生成PDF
- jquery 根据json 二维数组生成table
- 根据Json快速生成C#类
- Gson根据json字符串生成map对象
- 根据JSON数据,自动生成Table
- Android根据Json直接生成JavaBean
- 根据JSON数据,自动生成Table
- 根据json生成建表语句
- 自动根据json字符串生成javabean类
- Android Studio根据Json自动生成JavaBean
- golang: 根据json生成go源文件
- 根据HTML模块文件,生成THML文件
- 根据模板动态生成html页面
- C#根据模板动态生成html页面
- 打补丁报错Opatch error : "Unable to lock Central Inventory
- 获取免费域名——用“花生壳”绑定IP
- 关于撰写简历及面试注意事项
- CentOS 5.5上安装配置oracle 11g R2
- google地图上固定的点添加marker标记
- 根据Json串生成Html(一)
- tomcat 发布应用
- DS18B20温度传感器测温显示在数码管上(29.9℃)
- java操作excel
- Ajax异步执行导致javascrip读取结果失败解决办法
- 全球移动互联网大会高德正能量:寻人信息平台已上线 雅安救援行动进行时
- 配置网络&更改主机名
- google map上实现通过点击地图任意点进行标记并形成多边形
- HDU1302:The Snail