快捷導(dǎo)航

根據(jù)json字符串生成Html的一種方式

更新時(shí)間：2013年01月09日 17:55:09 作者：

本文介紹了根據(jù)Json串生成Html的一種方式（只是簡(jiǎn)單實(shí)現(xiàn)了文本框，密碼框，下拉框）感興趣的朋友可以了解下

文章說(shuō)明：
本文介紹了根據(jù)Json串生成Html的一種方式（只是簡(jiǎn)單實(shí)現(xiàn)了文本框，密碼框，下拉框）。只是覺(jué)得好玩才這樣做，如果覺(jué)得沒(méi)有任何價(jià)值，請(qǐng)忽略。不足指出希望各位大牛指點(diǎn)。后續(xù)將根據(jù)各位的指點(diǎn)繼續(xù)完善。

功能說(shuō)明：

在左側(cè)輸入框中輸入Json串，點(diǎn)擊執(zhí)行時(shí)根據(jù)輸入的Json串在右側(cè)展示區(qū)顯示出相應(yīng)的Html（使用Jquery1.4.4）
HTML：

復(fù)制代碼代碼如下:

 
<table style="width:100%; "> 
<col width="200px;" /> 
<tr> 
<td>Json輸入框</td> 
<td>展示區(qū)</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="執(zhí)行" /> 
</td> 
</tr> 
</table> 

JS代碼:

復(fù)制代碼代碼如下:

 
$(document).ready(function () { 
　　$("#btnExec").click(function () { 
try{ 
var objList = eval($("#txtJson").val()); 
jsonToControl(objList); 
} 
catch(e){ 
alert("json格式錯(cuò)誤"); 
} 
}); 
}); 
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/>"); 
} 
}) 
} 
//設(shè)置控件的樣式 
function setAttritube(control, item) { 
if (item.width != null) { 
control.width(item.width); 
} 
//-------------------------------- 
// 其他樣式在這里加代碼 
//-------------------------------- 
return control; 
} 
//創(chuàng)建TextBox 
function createTextBox() { 
return $("<input type='textbox' />"); 
} 
//創(chuàng)建密碼框 
function createPassword() { 
return $("<input type='password'/>"); 
} 
//創(chuàng)建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; 
} 