动态表单
做着玩的 asp + jquery：
Global.asa：
<Script language="VBScript" RunAt=Server> Sub Application_onStart() Application("Connectstring")="Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;pwd=abinxm;Initial Catalog=mytest1;Data Source=127.0.0.1" End Sub </script>
config.asp：
1 <%@ codepage=65001%> 2 <!--#include file="jsonParser.asp"--> 3 <% 4 ' on error resume next 5 Response.Charset="utf-8" 6 dim actionV 7 actionV=request.QueryString("action") 8 if actionV="saveData" then 9 Dim jsonData,jsonDataLen,jsonDataLen2 10 Set jsonData = parseToJson(request.Form) 11 jsonDataLen = jsonData.root.length 12 If jsonDataLen = 0 Then 13 Response.write "empty" 14 Response.End() 15 End if 16 Dim SQLStr,UserRS,hConn 17 Set hConn = CreateObject("ADODB.Connection") 18 hConn.Open application("Connectstring") 19 SQLStr = "delete from T_EleContent" 20 hConn.Execute(SQLStr) 21 SQLStr = "delete from T_FormContent" 22 hConn.Execute(SQLStr) 23 jsonDataLen = jsonDataLen - 1 24 Dim counter,counter2,eleLabel,eleType,eleName,EID,detailV,detailT 25 For counter = 0 To jsonDataLen 26 eleLabel = jsonData.root.get(counter).l 27 eleType = jsonData.root.get(counter).t 28 eleName = jsonData.root.get(counter).n 29 eleLabel = Replace(eleLabel,"'","''") 30 eleName = Replace(eleName,"'","''") 31 SQLStr = "insert into T_FormContent(LabelText,EleType,FormEleName) values('" 32 SQLStr = SQLStr & eleLabel & "','" 33 SQLStr = SQLStr & eleType & "','" 34 SQLStr = SQLStr & eleName & "')" 35 hConn.Execute(SQLStr) 36 SQLStr = "select @@identity as eid" 37 Set UserRS = hConn.Execute(SQLStr) 38 if UserRS.EOF and UserRS.BOF then 39 SQLStr = "delete from T_EleContent" 40 hConn.Execute(SQLStr) 41 SQLStr = "delete from T_FormContent" 42 hConn.Execute(SQLStr) 43 UserRS.close 44 Set UserRS = Nothing 45 hConn.Close() 46 Set hConn = Nothing 47 Response.write "error" 48 Response.End() 49 else 50 EID = UserRS.Fields("eid").value 51 end if 52 if eleType = "checkbox" or eleType = "select" or eleType = "radio" then 53 jsonDataLen2 = jsonData.root.get(counter).d.length 54 jsonDataLen2 = jsonDataLen2 - 1 55 For counter2 = 0 To jsonDataLen2 56 detailV = jsonData.root.get(counter).d.get(counter2).v 57 detailT = jsonData.root.get(counter).d.get(counter2).x 58 detailV = Replace(detailV,"'","''") 59 detailT = Replace(detailT,"'","''") 60 SQLStr = "insert into T_EleContent(EID,ContentText,ContentVal) values('" 61 SQLStr = SQLStr & EID & "','" 62 SQLStr = SQLStr & detailT & "','" 63 SQLStr = SQLStr & detailV & "')" 64 hConn.Execute(SQLStr) 65 Next 66 end if 67 Next 68 UserRS.close 69 Set UserRS = Nothing 70 hConn.Close() 71 Set hConn = Nothing 72 Response.write "succ" 73 Response.End() 74 end if 75 %> 76 77 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 78 <html> 79 <head> 80 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 81 <title>动态表单配置页</title> 82 <style type="text/css"> 83 body{margin:0;padding:0;font-size:16px;} 84 #inputDiv{margin-top:5px;margin-bottom:5px;margin-right:5px;} 85 #formTable{width:98%;margin-left:5px;text-align:center;font-size:14px;} 86 .titleTr{font-weight:bold;text-align:center;} 87 .delBtn{color:red;} 88 .detialDiv{float:left;text-align:left;clear:both;} 89 .contentTable{float:left;display:block;clear:both;border-color:blue;width:98%;margin-left:3px;margin-bottom:3px;} 90 </style> 91 <script type="text/javascript" language="javascript" src="./jquery.js" ></script> 92 <script type="text/javascript" language="javascript" > 93 function addNewRow(){ 94 var vIndex = $("#formTable tr[class='IROW']").size(); 95 var newTr = $("<tr class='IROW' ><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 96 newTr.find("td:first").html(vIndex+1); 97 $("#formTable").append(newTr); 98 return newTr; 99 } 100 function delCurRow(obj){$(obj).parent().parent().remove();} 101 function delRow(obj){ 102 delCurRow(obj); 103 $("#formTable").find("tr[class='IROW']").each(function(i){$(this).find("td:eq(0)").html(i+1);}); 104 } 105 function delEleDetail(obj,ctlType,ctlText,ctlVal){ 106 if(ctlType=='checkbox' || ctlType=='radio'){ 107 $(obj).parents("tr[class='IROW']:first").children("td:eq(4)").find("input[type='"+ctlType+"']").each(function(){ 108 if( $(this).attr('value')==ctlVal && $(this).parent().find('span:first').html()==ctlText ){ 109 $(this).parent().parent().remove(); 110 return false; 111 } 112 }); 113 }else if(ctlType=='select'){ 114 $(obj).parents("tr[class='IROW']:first").children("td:eq(4)").find("select option").each(function(){ 115 if( $(this).html()==ctlText && $(this).attr('value')==ctlVal ){ 116 $(this).remove(); 117 return false; 118 } 119 }); 120 } 121 delCurRow(obj); 122 } 123 function createDetialAddHtml(ctlType,ctlName){ 124 var htmlV1 = "<span>文本:</span><input type='text' style='width:100px;' value='' name='ctlText' />"; 125 htmlV1 += "<span>值:</span><input type='text' style='width:100px;' value='' name='ctrlVal' />"; 126 htmlV1 += "<input type='button' value='增加' style='width:50px;' onclick='addDetail(this,\""+ctlName+"\",\""+ctlType+"\")' />"; 127 htmlV1 += "<input type='hidden' value='"+ctlName+"' name='ctlNameHide' />"; 128 htmlV1 += "<input type='hidden' value='"+ctlType+"' name='ctlTypeHide' />"; 129 return htmlV1; 130 } 131 function addNewEle(){ 132 var labelInput = $.trim($("#labelInput").val()); 133 if( labelInput == "" ){alert('请输入表单标题');$("#labelInput").focus();return;} 134 var ctlName = $.trim($("#ctlName").val()); 135 if( ctlName == "" ){alert('请输入表单名称');$("#ctlName").focus();return;} 136 if( $(document).find('[name="'+ctlName+'"]').size() > 0 || $(document).find('[name="ctlNameHide"][value="'+ctlName+'"]').size()>0 ) 137 {alert('已存在同名表单元素!');return;} 138 var eleType = $("#eleType").val(); 139 var newTr = addNewRow(); 140 newTr.children("td:eq(1)").html($("#eleType option:selected").html()); 141 newTr.children("td:eq(2)").html(ctlName); 142 if( eleType == 'checkbox' || eleType == 'select' || eleType == 'radio' ){ 143 newTr.children("td:eq(3)").html("<div class='detialDiv'>" + createDetialAddHtml(eleType,ctlName) + "<input type='hidden' value='"+labelInput+"' name='ctlLabelHide' /></div><table class='contentTable' border='1' ></table>" ); 144 }else{ 145 newTr.children("td:eq(3)").html("<div class='detialDiv' ><input type='hidden' value='"+ctlName+"' name='ctlNameHide' /><input type='hidden' value='"+eleType+"' name='ctlTypeHide' /><input type='hidden' value='"+labelInput+"' name='ctlLabelHide' /></div>"); 146 } 147 if( eleType == 'select' ){ 148 newTr.children("td:eq(4)").html("<div class='detialDiv' ><table><tr><td><span>"+labelInput+":</span></td><td><select name='"+ctlName+"' id='"+ctlName+"' style='min-width:200px;' ></select></td></tr></table></div>"); 149 }else if( eleType == 'checkbox' || eleType == 'radio' ){ 150 newTr.children("td:eq(4)").html("<div class='detialDiv' ><table><tr><td ><span>"+labelInput+":</span></td></tr></table></div>"); 151 }else if( eleType == 'text' ){ 152 newTr.children("td:eq(4)").html("<div class='detialDiv' ><table><tr><td ><span>"+labelInput+":</span><input type='text' value='' name='"+ctlName+"' /></td></tr></table></div>"); 153 }else if( eleType == 'textarea' ){ 154 newTr.children("td:eq(4)").html("<div class='detialDiv' ><table><tr><td ><span>"+labelInput+":</span><textarea rows='3' cols='30' name='"+ctlName+"' ></textarea></td></tr></table></div>"); 155 } 156 newTr.children("td:eq(5)").html("<a href='#' onclick='delRow(this);return false;' class='delBtn' >删除</a>"); 157 } 158 function addDetail(obj,ctlName,ctlType){ 159 var curDiv = $(obj).parent(); 160 var ctlText = curDiv.find("input[name='ctlText']:first"); 161 var ctrlVal = curDiv.find("input[name='ctrlVal']:first"); 162 var ctlTextV = $.trim( ctlText.val() ); 163 var ctrlValV = $.trim( ctrlVal.val() ); 164 if(ctlTextV==""){alert('请输入'+ctlType+'的文本');ctlText.focus();return;} 165 if(ctrlValV==""){alert('请输入'+ctlType+'的值');ctrlVal.focus();return;} 166 var curTable = curDiv.parent().find("table:first"); 167 if( ctlType == 'checkbox' || ctlType == 'radio' || ctlType == 'select' ){ 168 var tmpTr = $("<tr><td></td><td></td><td></td></tr>"); 169 tmpTr.find("td:eq(0)").html("文本:"+ctlTextV); 170 tmpTr.find("td:eq(1)").html("值:"+ctrlValV); 171 tmpTr.find("td:eq(2)").html("<a href='#' onclick='delEleDetail(this,\""+ctlType+"\",\""+ctlTextV+"\",\""+ctrlValV+"\");return false;' class='delBtn' >删除</a>"); 172 curTable.append(tmpTr) 173 var htmlViewCtl = curDiv.parent().parent().children("td:eq(4)"); 174 if(ctlType == 'checkbox'){ 175 htmlViewCtl.find("table:first").append("<tr><td><input type='checkbox' value='" + ctrlValV + "' /><span>" + ctlTextV + "</span></td></tr>"); 176 }else if(ctlType == 'radio'){ 177 htmlViewCtl.find("table:first").append("<tr><td><input type='radio' value='" + ctrlValV + "' /><span>" + ctlTextV + "</span></td></tr>"); 178 }else if(ctlType == 'select'){ 179 htmlViewCtl.find("select:first").append("<option value='" + ctrlValV + "'>" + ctlTextV + "</option>") 180 } 181 } 182 } 183 function saveForm(){ 184 var jsonData = ''; 185 var hasErr = false; 186 var errMsg = ''; 187 $("#formTable tr[class='IROW']").each(function(){ 188 var ctlNameHide = $.trim( $(this).find("input[type='hidden'][name='ctlNameHide']:first").val() ); 189 var ctlTypeHide = $.trim( $(this).find("input[type='hidden'][name='ctlTypeHide']:first").val() ); 190 var ctlLabelHide = $.trim( $(this).find("input[type='hidden'][name='ctlLabelHide']:first").val() ); 191 var tmpData ='{"t":"' + ctlTypeHide + '","n":"' + ctlNameHide + '","l":"' + ctlLabelHide + '"' ; 192 if( ctlTypeHide == 'textarea' || ctlTypeHide == 'text' ){ 193 tmpData += "}" 194 }else if( ctlTypeHide == 'checkbox' || ctlTypeHide == 'radio' || ctlTypeHide == 'select' ){ 195 tmpData += ',"d":[' 196 if( ctlTypeHide == 'select' ){ 197 var optionNum = 0; 198 var dataString = ''; 199 $(this).children("td:eq(4)").find("select option").each(function(){ 200 optionNum++; 201 dataString += '{"x":"' + $(this).html() + '","v":"' + $(this).attr('value') + '"},'; 202 }); 203 if( optionNum==0 ){ 204 errMsg='下拉框控件无内容，请输入内容!'; 205 $(this).find("input[type='text'][name='ctlText']:first").focus(); 206 hasErr=true; 207 return false; 208 } 209 dataString = dataString.substr(0,dataString.length-1); 210 tmpData = tmpData + dataString; 211 }else{ 212 var optionNum = 0; 213 var dataString = ''; 214 $(this).children("td:eq(4)").find("input[type='" + ctlTypeHide + "']").each(function(){ 215 optionNum++; 216 dataString += '{"x":"' + $(this).parent().children("span:first").html() + '","v":"' + $(this).attr('value') + '"},'; 217 }); 218 if( optionNum==0 ){ 219 errMsg = ctlTypeHide + '控件无内容，请输入内容!'; 220 $(this).find("input[type='text'][name='ctlText']:first").focus(); 221 hasErr=true; 222 return false; 223 } 224 dataString = dataString.substr(0,dataString.length-1); 225 tmpData = tmpData + dataString; 226 } 227 tmpData += "]}" 228 } 229 jsonData = jsonData + tmpData + "," 230 }); 231 if(hasErr==true){alert(errMsg);return;} 232 if(jsonData==''){alert('无表单元素可保存');return;} 233 else{jsonData = jsonData.substr(0,jsonData.length-1);} 234 jsonData = '{"root":[' + jsonData + ']}'; 235 //alert(jsonData); 236 $.ajax({ 237 url:"config.asp?action=saveData", 238 type: "POST", 239 data:jsonData, 240 dataType:'text', 241 success:function(msg){ 242 if(msg=='succ'){ 243 alert('表单保存成功!'); 244 }else{ 245 //alert(msg); 246 alert('表单保存失败!'); 247 } 248 }, 249 error:function(){ 250 alert('提交失败!'); 251 } 252 }); 253 } 254 </script> 255 </head> 256 <body> 257 <div id="inputDiv" > 258 <span>表单标题:</span> 259 <input type="text" value="" id="labelInput" maxlength="20" /> 260 <span>表单名称:</span> 261 <input type="text" value="" id="ctlName" maxlength="20" /> 262 <select id="eleType" > 263 <option value="text" >文本框</option> 264 <option value="textarea" >区域文本框</option> 265 <option value="radio" >单选框</option> 266 <option value="checkbox" >复选框</option> 267 <option value="select" >下拉框</option> 268 </select> 269 <input type="button" value="新增" onclick="addNewEle()" /> 270 <input type="button" value="保存" onclick="saveForm()" style="margin-left:100px;background-color:blue;color:#fff;" /> 271 </div> 272 <hr/> 273 <div> 274 <table id="formTable" border="1" > 275 <tr class="titleTr" > 276 <td style="width:60px;min-width:60px;" >序号</td> 277 <td style="width:80px;min-width:80px;" >控件类型</td> 278 <td style="width:200px;min-width:200px;" >控件名称</td> 279 <td>控件数据</td> 280 <td>控件预览</td> 281 <td style="width:60px;min-width:60px;" >操作</td> 282 </tr> 283 </table> 284 </div> 285 </body> 286 </html>
jsonParser.asp：
1 <script language="javascript" runat="server"> 2 Array.prototype.get = function(prop) 3 { 4 return this[prop]; 5 } 6 function parseToJson(json_data) 7 { 8 eval("var o=" + json_data); 9 return (o); 10 11 } 12 </script>
form.asp：
1 <%@ codepage=65001%> 2 <!--#include file="jsonParser.asp"--> 3 <% 4 ' on error resume next 5 Response.Charset="utf-8" 6 Dim SQLStr,UserRS,hConn,UserRS2 7 Set hConn = CreateObject("ADODB.Connection") 8 hConn.Open application("Connectstring") 9 10 dim actionV 11 actionV=request.QueryString("action") 12 if actionV="saveData" then 13 dim subEleNum,iTmpIndex,formEle 14 subEleNum = Request.Form.Count 15 %> 16 <center> 17 <table border="1" > 18 <tr><td colspan="2" ><center><strong>表单提交结果</strong></center></td></tr> 19 <% 20 for iTmpIndex = 1 to subEleNum 21 %> 22 <tr><td><%=Request.Form.key(iTmpIndex)%>:</td><td><%=Request.Form.item(iTmpIndex)%></td></tr> 23 <% 24 next 25 %> 26 </table> 27 </center> 28 <% 29 Response.End() 30 end if 31 'submit 32 %> 33 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 34 <html> 35 <head> 36 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 37 <title>表单内容</title> 38 <style type="text/css"> 39 body{margin:0;padding:0;text-align:center;} 40 .mainDiv{width:800px;margin:0 auto;margin-top:20px;} 41 .mainTable{width:98%;} 42 .firstTr{height:50px;font-weight:bold;text-align:center;line-height:46px} 43 .lastTr{height:50px;font-weight:bold;text-align:center;} 44 #subBtn{height:30px;font-size:15px;font-weight:bold;} 45 </style> 46 <script type="text/javascript" language="javascript" src="./jquery.js" ></script> 47 <script type="text/javascript" language="javascript" > 48 49 </script> 50 </head> 51 <body> 52 <form id="subForm" name="subForm" method="post" action="form.asp?action=saveData" > 53 <div class="mainDiv" > 54 <table border="1" class="mainTable" > 55 <tr class="firstTr"><td colspan="2">用户表单</td></tr> 56 <% 57 Dim EID,LabelText,EleType,FormEleName,ContentText,ContentVal 58 SQLStr = "select EID,LabelText,EleType,FormEleName from T_FormContent order by EID" 59 Set UserRS = hConn.Execute(SQLStr) 60 IF Not UserRS.EOF THEN 61 do while not UserRS.EOF 62 EID = UserRS.Fields("eid").value 63 LabelText = UserRS.Fields("LabelText").value 64 EleType = UserRS.Fields("EleType").value 65 FormEleName = UserRS.Fields("FormEleName").value 66 %> 67 <tr ><td><strong><%=LabelText%>:</strong></td><td> 68 <% 69 if EleType = "checkbox" or EleType = "select" or EleType = "radio" then 70 if EleType = "select" Then 71 %> 72 <select name="<%=FormEleName%>" id="<%=FormEleName%>" > 73 <% 74 end if 75 SQLStr = "select EVID,ContentText,ContentVal from T_EleContent where EID = '" & EID & "' order by EVID " 76 Set UserRS2 = hConn.Execute(SQLStr) 77 do while not UserRS2.EOF 78 ContentText = UserRS2.Fields("ContentText").value 79 ContentVal = UserRS2.Fields("ContentVal").value 80 if EleType = "select" Then 81 %> 82 <option value="<%=ContentVal%>"><%=ContentText%></option> 83 <% 84 else 85 %> 86 <input type="<%=EleType%>" value="<%=ContentVal%>" name="<%=FormEleName%>" id="<%=FormEleName%>" /><span><%=ContentText%></span><br/> 87 <% 88 end if 89 UserRS2.MoveNext 90 Loop 91 if EleType = "select" Then 92 %> 93 </select> 94 <% 95 end if 96 end if 97 if EleType = "text" then 98 %> 99 <input type="text" value="" name="<%=FormEleName%>" id="<%=FormEleName%>" /> 100 <% 101 end if 102 if EleType = "textarea" then 103 %> 104 <textarea rows="3" cols="30" name="<%=FormEleName%>" id="<%=FormEleName%>" ></textarea> 105 <% 106 end if 107 UserRS.MoveNext 108 %> 109 </td></tr> 110 <% 111 Loop 112 End If 113 %> 114 <tr class="lastTr" ><td colspan="2"><input type="submit" value="提交" id="subBtn" /></td></tr> 115 </table> 116 </div> 117 </form> 118 </body> 119 </html> 120 <% 121 hConn.Close() 122 Set hConn = Nothing 123 %>