jquery兑现可配置表单 _Web前端

jquery实现可配置表单
本例使用了jquery
同时加入了jquery ui 的sortable来进行排序（也仅使用了ui的该功能）（如不想引入jqueryui可直接删除相应事件绑定即可。）
<!DOCTYPE html PUBdivC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World jQuery!</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<style type=text/css>
			body{font-family:Verdana,宋体; font-size:12px;  margin:5px; padding:5px; }
			#sortable { margin: 0; padding: 0; width: 700px; align:center;}
			.tagView{width:100%;}
			.tagEdit{};
			.titleInput{width:150px;}
			.valueInput{width:200px;}
			.selectInput{width:100px;}
			
			.item-capital, .itemDiv .item-capital { border: 1px solid #cccccc; background-color: #f6f6f6; font-weight: bold; color: #1c94c4; outline: none;height:100%; }
			.itemDiv { border: 1px solid #dddddd; background: #eeeeee; color: #333333; height:100%; margin:5px; }
			
			.item-content{border-bottom:1px solid #cccccc;width:100%;height:25px;line-height:25px;}
			.item-content table{width:100%;}
			.item-content table tr{width:100%;}
			.item-content table td{white-space:nowrap;}
			
			.item-capital{width:100%;height:25px;line-height:25px;}
			.item-capital table{width:100%;}
			.item-capital table tr{width:100%;}
			.item-capital table td{white-space:nowrap;}
			
			.tdBtn{text-align:right;}
			.tdTitle{width:30%;}			
			.tdValue{white-space:nowrap;background-color:white;width:60%;}
			
			.perviewTable{background-color: #cccccc; color: #333333; height:20px; margin:5px; width:600px;borde:1px solid red;}
			.perviewCapital{background: #f6f6f6; font-weight: bold; color: #1c94c4;}
			.perviewCapital th{text-align:center; }
			.perviewTR{}
			.perviewTR .title{width:30%;text-align:right;background: #eeeeee; }
			.perviewTR .tag{width:70%;background-color:white;text-align:left;}
			
			#editTable legend{width:100%;}
			#editTable legend table{width:100%;}
			#editTable legend #title{width:5%;white-space:nowrap;}
			#editTable legend #line{width:95%;white-space:nowrap;}
			#editTable legend #btn{white-space:nowrap;}
		</style>
</head>
<body>
<div style="width:700px;">
<fieldset id=editTable>
	<legend>
		<table>
			<tr><td id=title>配置表单</td><td id=line><hr/></td><td id=btn><input id=addItem type=button value=添加大项 ><td></tr>
		</table>
	</legend>
<div  id=sortable>
<div class=itemDiv>
	<div class=item-capital >
		<table>
			<tr>
				<td class=tdTitle>
					<div class=capitalView style=display:none></div>
					<div class=capitalEdit >
					<input class=titleInput type=text value=标题 />
					</div>
				</td>
				<td class=tdBtn style=width:70%;text-align:right; >
					<input class=btnAddItem type=button value=添加 onclick=addContent(this) /><input class=btnAddItem type=button value=删除 onclick=deleteItem(this) />
				</td>
			</tr>
		</table>
	</div>
	<div class=item-content>
		<table><tr>
			<td class=tdTitle>
				<div class=capitalView style=display:none></div>
				<div class=capitalEdit >
					<input class=titleInput type=text value=小标题 />
				</div>
			</td>
			<td>&nbsp;:
			</td>
			<td class=tdValue>
				<div class=tagView style=display:none ></div>
				<div class=tagEdit >
					<select class=selectInput value=text>
						<option value=text>文本框</option>
						<option value=select>下拉框</option>
						<option value=textarea>文本域</option>
						<option value=radio>单选按钮</option>
						<option value=checkbox>多选按钮</option>
					</select>
					<input class=valueInput type=text value=预设值 /><input class=nullable type=checkbox value=nullable>必填</input>
				</div>
			</td>
			<td class=tdBtn style=text-align:right; >
				<input class=btnAddItem type=button value=删除 onclick=deleteContent(this) />
			</td>
		</tr></table>
	</div>
</div><!--end itemDiv-->
<div><!--end sortable-->
</fieldset>
<br/>
<center>
<form id="frm" action="" method="post">
	<input id="configStr" name="configStr" type="hidden">
	<input type=button value=预览 onclick="perview()">
	<input type=button id=subBut value=提交 >
</form>
</center>
<fieldset style="width:690px;text-align:center;">
	<legend>预览</legend>
	<div id=perview style=width:690px; >
		&nbsp;
	</div>
</fieldset>

</div>


<script type="text/javascript" >
	//自定义函数
	var item_Div = "<div class=itemDiv><div class=item-capital ><table><tr><td class=tdTitle><div class=capitalView style=display:none></div><div class=capitalEdit ><input class=titleInput type=text value=标题 /></div></td>";
	item_Div += "<td class=tdBtn style=w idth:70%;text-align:right; ><input class=btnAddItem type=button value=添加 onclick=addContent(this) /><input class=btnAddItem type=button value=删除 onclick=deleteItem(this) /></td></tr></table></div></div>";

	var item_content = "<div class=item-content><table><tr><td class=tdTitle><div class=capitalView style=display:none></div><div class=capitalEdit ><input class=titleInput type=text value=小标题 /></div></td><td>&nbsp;:</td>";
	item_content += "<td class=tdValue><div class=tagView style=display:none ></div><div class=tagEdit ><select class=selectInput value=text><option value=text>文本框</option><option value=select>下拉框</option><option value=textarea>文本域</option><option value=radio>单选按钮</option><option value=checkbox>多选按钮</option></select> <input class=valueInput type=text value=预设值 /><input class=nullable type=checkbox value=nullable>必填</input></div>";
	item_content += "</td><td class=tdBtn style=text-align:right; ><input class=btnAddItem type=button value=删除 onclick=deleteContent(this) /></td></tr></table></div>";
	
	function itemPerview(type,value,oDIV){
		oDIV.html(getTag(type,value));
	}
	//组装标签
	function getTag(type,value){
		var html="";
		var htmlOptions="";
		switch(type){
			case 'text':html="<input type='text' style='width:150px;' value="+value+">";break;
			case 'select':
				options=value.split(",");
				for(var i in options){
					htmlOptions+="<option value="+options[i]+" >"+options[i]+"</option>";	
				}
				html+="<select style='width:150px;' >";
				html+=htmlOptions;
				html+="</select>";
				break;
			case 'textarea':
				html="<textarea style='width:95%;' rows=5>"+value+"</textarea>";	
				break;
			case 'radio':
				options=value.split(",");
				for(var i in options){
					html+="<input type=radio name=r1 checked value="+options[i]+" >"+options[i]+"</input>";	
				}
				break;
			case 'checkbox':
				options=value.split(",");
				for(var i in options){
					html+="<input type=checkbox name=cb1 value="+options[i]+" >"+options[i]+"</input>";	
				}
				break;
		}
		return html;
	}
	//添加小项
	function addContent(obj){
		var jobj=$(obj);
		var oItemDiv = jobj.closest(".itemDiv");//找到最近的       closest找到顶层最近的
		oItemDiv.append(item_content);
	}
	//删除大项
	function deleteItem(obj){
		var jobj=$(obj);
		var oItemDiv = jobj.closest(".itemDiv");
		oItemDiv.attr('className','delete');
		oItemDiv.css('display','none');
	}
	//删除小项
	function deleteContent(obj){
		var jobj=$(obj);
		var oItemDiv = jobj.closest(".item-content");
		oItemDiv.attr('className','delete');
		oItemDiv.css('display','none');
	}
	//全局预览
	function perview(){
		var jsonStr = getJsonData();		//alert(jsonStr);
		var oJson = eval(jsonStr);//转化为json对象  		//alert(oJson[0].capital);
		createFormByJson(oJson);
	}
	//获取表单全部数据
	function getJsonData(){
		//json字符串示例：[{capital:'标题',items[{title:'小标题',type:'text',value:'预设值'},{},{}]},{},{}]
		var jsonStr = new String("[");
		var oItems = $("#sortable").children(".itemDiv");//children找子元素，find找后代
		oItems.each(function (index, domEle){
			var oItem = $(domEle);
			var oCapital = oItem.find(".item-capital");
			jsonStr+="{capital:'"+oCapital.find(".titleInput").val()+"',items:[";//写标题，开始一个大项
			var oContent = oItem.find(".item-content");
			oContent.each(function (index, domEle){ 
				//alert(domEle.find(".titleInput").val());
				var jobj = $(domEle);
				jsonStr+="{title:'"+jobj.find(".titleInput").val()+"',";//开始写一个小项
				jsonStr+="type:'"+jobj.find(".selectInput").val()+"',";
				jsonStr+="value:'"+jobj.find(".valueInput").val()+"',";
				jsonStr+="nullable:'"+jobj.find(".nullable").attr("checked")+"'},";//写完一个小项
			});
			if (oContent.length > 0) {
				jsonStr = jsonStr.substring(0,jsonStr.length-1);//去掉最后一个逗号	
			}
			jsonStr+="]},";//写完一个大项
		});
		jsonStr = jsonStr.substring(0,jsonStr.length-1);//去掉最后一个逗号
		jsonStr+="]";
		return(jsonStr);
	}
	//创建预览 通过json数据对象创建预览
	function createFormByJson(oJson){
		var html="";
		for(var i in oJson){
			html+="<table class=perviewTable  cellspacing=1><tr class=perviewCapital><th colspan=100>"+oJson[i].capital+"</th></tr>";
			for (var j in oJson[i].items){
				//oJson[i].items[j].title  oJson[i].items[j].type  oJson[i].items[j].value
				if (oJson[i].items[j].nullable=='false') {
					html+="<tr class=perviewTR><td class=title>"+oJson[i].items[j].title+":</td><td class=tag>"+getTag(oJson[i].items[j].type,oJson[i].items[j].value)+"</td></tr>";
				}else{
					html+="<tr class=perviewTR><td class=title>*"+oJson[i].items[j].title+":</td><td class=tag>"+getTag(oJson[i].items[j].type,oJson[i].items[j].value)+"</td></tr>";
				}
				
				
			}
			html+="</table>";
		}
		$("#perview").html(html);
		//$("#perview").dialog({ modal: true });
	}
	
	//事件绑定
	$(function() {
		//live绑定：应用到所有及新增的
		//切换到编辑状态
		$(".btnEdit").live('click',function(event){
			showEdit(this);
			event.stopPropagation();
		});
		//切换到预览状态
		$(".btnSubmit").live('click',function(event){
			showSubmit(this);
			event.stopPropagation();
		});		
		//添加大项	
		$("#addItem").click(function(event){
			$("#sortable").append(item_Div);
		})
		//提交表单配置数据
		$("#subBut").click(function(event){
			$("#configStr").val(getJsonData());
			$("#frm").submit();
		})
		//大项排序
		$("#sortable").sortable({opacity: '0.8',axis:'y'});
		//$("#sortable").disableSelection();
	});  
	
	//加载时执行的语句函数
	$(function() {
	});
</script>
</body>
</html>