根據(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：
<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代碼:
$(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;
}
非常感謝各位抽空看完。如果有任何意見(jiàn)或建議，請(qǐng)留言。
本文介紹了根據(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;
}
非常感謝各位抽空看完。如果有任何意見(jiàn)或建議，請(qǐng)留言。
您可能感興趣的文章:
相關(guān)文章
javascript 強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)代碼
javascript 強(qiáng)制刷新頁(yè)面的代碼，大家經(jīng)常能用的到。2009-12-12
laypage+SpringMVC實(shí)現(xiàn)后端分頁(yè)
這篇文章主要為大家詳細(xì)介紹了laypage+SpringMVC實(shí)現(xiàn)后端分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)名器隨機(jī)色實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)名器隨機(jī)色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
小程序?qū)崿F(xiàn)人臉識(shí)別的項(xiàng)目實(shí)踐
人臉識(shí)別在現(xiàn)在很多地方都可以用的到,例如支付,解鎖等,本文就來(lái)介紹一下小程序?qū)崿F(xiàn)人臉識(shí)別,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文詳細(xì)介紹了JavaScript數(shù)組方法的分類和具體用法,涵蓋了數(shù)組的添加/刪除、查找/訪問(wèn)、遍歷、排序/反轉(zhuǎn)、轉(zhuǎn)換以及一些其他實(shí)用方法,每種方法都提供了簡(jiǎn)要的解釋和示例代碼,幫助讀者更好地理解和應(yīng)用這些方法,感興趣的朋友一起看看吧2025-03-03
JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
在我們的日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到數(shù)字與字符串轉(zhuǎn)換，檢查對(duì)象中是否存在對(duì)應(yīng)值，條件性操作對(duì)象數(shù)據(jù)，過(guò)濾數(shù)組中的錯(cuò)誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡2022-06-06
這篇文章主要為大家詳細(xì)介紹了js仿淘寶放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JS仿Windows開(kāi)機(jī)啟動(dòng)Loading進(jìn)度條的方法
這篇文章主要介紹了JS仿Windows開(kāi)機(jī)啟動(dòng)Loading進(jìn)度條的方法,實(shí)例分析了javascript操作html元素及對(duì)應(yīng)樣式實(shí)現(xiàn)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Javascript設(shè)計(jì)模式之發(fā)布訂閱模式
發(fā)布---訂閱模式又叫觀察者模式，它定義了對(duì)象間的一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，當(dāng)一個(gè)對(duì)象發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知2022-12-12