jquery实现可配置表单
本例使用了jquery
同时加入了jquery ui 的sortable来进行排序（也仅使用了ui的该功能）（如不想引入jqueryui可直接删除相应事件绑定即可。）
同时加入了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> :
</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; >
</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> :</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>