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> :</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].valueif (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>