只是實現了前台頁面的動態表單的設計，並未實現后台綁定數據到數據庫等功能。技術使用到的為jquery和bootstrap。俗話說有圖有真相，先說下具體效果如下：
點擊添加一個面板容器：
容器添加成功：
實現的代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery-1.8.3.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <style type="text/css"> body{ background-color: rgba(0, 231, 68, 0.06); } /*隱藏的編輯面板屬性的樣式*/ .setPanel{ top:10%; margin-left: 20%; margin-right: 20%; position: absolute; border: solid 1px #000000; background-color: rgba(138, 174, 14, 0.5); display: none; } .setElement{ top:10%; margin-left: 20%; margin-right: 20%; position: absolute; border: solid 1px #000000; background-color: rgba(138, 174, 14, 0.5); display: none; } </style> <body> <div class="row"> <!--表單需要的原件區域開始--> <div id="labelContext" class="col-md-3"> <!-- 樣式選擇開始--> <ul class="nav nav-tabs"> <li value="0" role="presentation" class="active"><a href="#">列表</a></li> <li value="1" role="presentation"><a href="#">單行</a></li> </ul> <!-- 樣式選擇結束--> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">文本框</label> <div class="col-sm-8"> <input type="text" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">下拉框</label> <div class="col-sm-8"> <select class="form-control" > <option>-請選擇-</option> </select> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">日期框</label> <div class="col-sm-8"> <input type="date" class="form-control"/> </div> </div> <div class="form-group col-sm-12 text-right"> <label class="col-sm-4 control-label"></label> <div class="col-sm-8"> <input type="radio"/>單選框 </div> </div> <div class="form-group col-sm-12 text-right"> <label class="col-sm-4 control-label"></label> <div class="col-sm-8"> <input type="checkbox"/>多選框 </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">文本域</label> <div class="col-sm-8"> <textarea class="form-control" style="height: 100px; margin-top: 5px; resize: none;"></textarea> </div> </div> <!--添加標識name="panel"用於實現原件添加的作用域--> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right"></label> <div class="col-sm-8"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板</h3> </div> <div class="panel-body"></div> </div> </div> </div> <div class="form-group col-sm-12"> <label for="inputEmail3" class="col-sm-4 control-label text-right">郵件</label> <div class="col-sm-8"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group col-sm-12"> <label for="inputPassword3" class="col-sm-4 control-label text-right">密碼框</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </div> <!--表單需要的原件區域結束--> <!--表單的顯示區域開始--> <div id="formContext" class="col-md-9"> <form class="form-horizontal"> </form> </div> <!--表單的顯示區域結束--> </div> <!--表單的設置屬性區域開始--> <div id="setPanelAttr" class="setPanel"> <span class='glyphicon glyphicon-remove' style="float: right" aria-hidden='true'></span> <br/> <form class="form-horizontal"> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">ID</label> <div class="col-sm-8"> <input name="id" type="text" disabled="disabled" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">數據表名</label> <div class="col-sm-8"> <input name="table" type="text" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">面板名稱</label> <div class="col-sm-8"> <input name="name" type="text" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">排序</label> <div class="col-sm-8"> <input name="order" type="text" class="form-control" placeholder="預留字段，功能暫時沒有實現"/> </div> </div> </form> </div> <!--表單的設置屬性區域結束--> <!--Element元件設置屬性區域開始--> <div id="setElementAttr" class="setElement"> <span class='glyphicon glyphicon-remove' style="float: right" aria-hidden='true'></span> <br/> <form class="form-horizontal"> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">ID</label> <div class="col-sm-8"> <input name="id" type="text" disabled="disabled" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">對應字段</label> <div class="col-sm-8"> <input name="column" type="text" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">名稱</label> <div class="col-sm-8"> <input name="name" type="text" class="form-control"/> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">排序</label> <div class="col-sm-8"> <input name="order" type="text" class="form-control" placeholder="預留字段，功能暫時沒有實現"/> </div> </div> <div class="form-group col-sm-12 text-right"> <label class="col-sm-4 control-label"></label> <div class="col-sm-8"> <input name="required" type="checkbox"/>是否必填 </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-4 control-label text-right">數據源</label> <div class="col-sm-8"> <textarea name="dataSource" class="form-control" style="height: 100px; margin-top: 5px; resize: none;"></textarea> </div> </div> </form> </div> <!--Element元件設置屬性區域結束--> </body> <script type="text/javascript"> $(function(){ /*--------------------表單樣式選項觸發事件開始----------------*/ //全局樣式變量：0代表列表，1代表單行 var formStyle=0; $(".nav li").click(function () { $(".nav li").removeClass(); $(this).addClass("active"); //設置表單樣式的選項 formStyle=$(this).val(); }); /* ========表單樣式選項觸發事件結束========= */ //全局的原件作用域標識 var labelScope=null; //全局標識，當前有效的panel的id var globalPanelId=null; //全局存放Panel的數組 var panels=[]; //全局存放Element的數組 var elements=[]; /* -------設置點擊原件要添加的作用域開始---------*/ /* ==========設置點擊原件要添加的作用域結束===========*/ /* -----------控制原件區域內的內容點擊放到表單區域開始---------------*/ $("#labelContext .form-group").click(function(){ //將當前元素克隆處理 var label=$(this).clone(); //判斷是否為面板 var panelnum=$(this).find(".panel").size(); //表單容器中是否存在一個面板 var panelJudge=$("#formContext .panel").size(); if(!panelJudge){ if(!panelnum){alert("你必須添加一個面板"); return;} } //設置刪除圖標，用於刪除元件 var delIco=$("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"); //為刪除圖標bind刪除事件,刪除父級標簽 delIco.bind("click",function () { //獲取父級元素的id var id=$(this).parent().attr("id"); if(id!="undefined" && id!=null && id!=""){ //處理Panel的數組panels的函數delPanel(id) delPanel(id); //刪除Element元件時同時刪除elements數組中的信息 delElement(id); } $(this).parent().remove(); }); //設置設置圖標，用於觸發panel屬性編輯頁面，或div var setPanelIco=$("<span class='glyphicon glyphicon-wrench' aria-hidden='true'></span>"); //bind click 事件用於觸發屬性編輯div setPanelIco.bind("click",function () { //面板顯示 $("#setPanelAttr").css("display","block"); //面板的id屬性 var parentId=$(this).parent().attr("id"); //獲取下標值 var panelIndex=parentId.substr(5,parentId.length)-1; //將面板的屬性帶到設置屬性的div中 var panel=panels[panelIndex]; //在設置面板屬性的input中添加值 $("#setPanelAttr").find("input[name='id']").val(panel.id); $("#setPanelAttr").find("input[name='name']").val(panel.name); $("#setPanelAttr").find("input[name='table']").val(panel.table); $("#setPanelAttr").find("input[name='order']").val(panel.order); }); if(panelnum){ //對象化柵格化容器 var panelmd12=$("<div class='col-md-12'></div>"); //對面板進行處理,保證面板的顯示為class=col-md-12 label.find("label").remove(); label.find(".col-sm-8").removeClass(); /* 將元件放到表單的區域中*/ $("#formContext").find("form:first").append(panelmd12.append(label).click( function () { //將點擊的面板作為作用域,作用域為.panel-body的class屬性div labelScope=$(this).find(".panel-body"); //作用域標識 var span="<span id='labelScope' class='badge'>操作的面板</span>"; //通過span標簽顯示為作用域 $(".panel").find(".panel-heading").find("span").remove(); $(this).find(".panel-heading").prepend(span); //將當前有效的panelId賦值給全局變量globalPanelId globalPanelId=$(this).attr("id"); })); //創建panelId參數：添加的元件panelmd12 createPanelId(panelmd12); //觸發一次panel的單擊事件 panelmd12.trigger("click"); //添加刪除圖標 panelmd12.append(delIco); //添加設置圖標 panelmd12.append(setPanelIco); return; } //設置設置圖標，用於觸發Element編輯頁面，或div var setElementIco=$("<span class='glyphicon glyphicon-wrench' aria-hidden='true'></span>"); //bind click 事件用於觸發屬性編輯div setElementIco.bind("click",function () { //面板顯示 $("#setElementAttr").css("display","block"); //面板的id屬性 var parentId=$(this).parent().attr("id"); //獲取下標值 var panelIndex=parentId.substr(7,parentId.length)-1; //將面板的屬性帶到設置屬性的div中 var element=elements[panelIndex]; //在Element設置屬性的input中添加值 $("#setElementAttr").find("input[name='id']").val(element.Id); $("#setElementAttr").find("input[name='name']").val(element.name); $("#setElementAttr").find("input[name='column']").val(element.column); $("#setElementAttr").find("input[name='order']").val(element.order); $("#setElementAttr").find("input[name='required']").val(element.required); $("#setElementAttr").find("textarea[name='dataSource']").val(element.dataSource); }); //判斷是否為文本域 if(formStyle){ //創建柵格化容器 var md12=$("<div class='col-md-12'></div>"); //改變label選擇元件的柵格化布局 label.find(".col-sm-4").addClass("col-sm-2"); label.find(".col-sm-8").addClass("col-sm-10"); label.find(".col-sm-4").removeClass("col-sm-4"); label.find(".col-sm-8").removeClass("col-sm-8"); //消除微小的差距導致無法對齊的bug label.css("margin-left","-25px"); /* 將元件放到表單的區域中*/ labelScope.append(md12.append(label)); //創建element的ID和默認名稱 createElementId(md12); //添加刪除圖標 md12.append(delIco); //添加設置圖標 md12.append(setElementIco); return; } //創建柵格化容器 var md6=$("<div class='col-md-6'></div>"); /* 將元素方到表單的區域中*/ labelScope.append(md6.append(label)); //將刪除的圖標添加到創建柵格化容器 //創建element的ID和默認名稱 createElementId(md6); md6.append(delIco); //添加設置圖標 md6.append(setElementIco); }); /* =====================控制原件區域內的內容點擊放到表單區域結束=================*/ /* ------------生成panel的id屬性和Panel對象類開始--------------*/ //定義panel類 /* 參數說明：id：唯一標識； name：顯示名稱； table：對應的表； flow:對應的模板； order:顯示順序； context：panel中的元件json數據*/ function Panel(id,name,table,flow,order,context){ this.id=id; this.name=name; this.table=table; this.flow=flow; this.order=order; this.context=context; } //創建panelId參數：添加的元件panelmd12 function createPanelId(panelmd12) { //為數組長度基礎上默認+1，作為id和面板的區別數字 var panelsLength=panels.length+1; //設置面板的名字 panelmd12.find("h3").text("面板"+panelsLength); //panel添加成功后為panel指定唯一的id和設置相關默認屬性 panels.push(new Panel("panel"+panelsLength,"面板"+panelsLength,"","","","")); panelmd12.attr("id","panel"+panelsLength); } //處理Panel的數組panels function delPanel(id) { //判斷是否為panel if(id.substr(0,5)=="panel"){ //在數組中刪除panel信息，但保留占位 delete panels[id.substr(5,id.length)-1]; } } /* =============生成panel的id屬性結束================*/ /*---------------設置panel屬性div的關閉事件開始--------------------*/ //面板屬性設置div，在隱藏時同時將編輯的數據保存到panels數組中 $("#setPanelAttr .glyphicon-remove").click(function () { //隱藏屬性編輯div $(this).parent().css("display","none"); //獲取面板的id用於獲取Panel對象存放在panels數組中的下標 var panelId=$(this).parent().find("input[name='id']").val(); var panelIndex=panelId.substr(5,panelId.length)-1; //面板的新名稱 var panelName=$(this).parent().find("input[name='name']").val(); //將編輯好的值存放到panels數組中 panels[panelIndex]=new Panel($(this).parent().find("input[name='id']").val(), panelName, $(this).parent().find("input[name='table']").val(),"", $(this).parent().find("input[name='order']").val(),""); //改變面板顯示名稱 $("#"+panelId).find("h3").text(panelName); }); /* =========設置panel屬性div的關閉事件結束=============*/ /* ----------設置element屬性和element的id開始----------*/ /* Element是元件對象屬性有： panelId：對應面板的Id； Id：元件的id； column：對應數據庫字段； required：必填選項； dataSource：元件顯示的數據源；*/ function Element(panelId,Id,name,column,required,order,dataSource) { this.panelId=panelId; this.Id=Id; this.name=name; this.column=column; this.required=required; this.order=order; this.dataSource=dataSource; } //創建element的ID和默認名稱,md元件自身，labelScope元件所在的panel function createElementId(md) { //獲取elements數組的長度,在+1的基礎上作為元件的ID var elementLength=elements.length+1; md.attr("id","element"+elementLength); //將Element元件的信息添加到elements數組中 elements.push(new Element(globalPanelId,"element"+elementLength,"","","","","")); } //刪除Element元件時同時刪除elements數組中的信息 function delElement(id) { /*判斷是否為element*/ if(id.substr(0,7)=="element"){ //在elements數組中刪除Element信息，但保留占位 delete elements[id.substr(7,id.length)-1]; } } /*=======設置element屬性和element的id結束========*/ /* -------------設置Element編輯div的關閉事件開始--------------*/ //面板屬性設置div，在隱藏時同時將編輯的數據保存到elements數組中 $("#setElementAttr .glyphicon-remove").click(function () { //隱藏屬性編輯div $(this).parent().css("display","none"); //獲取Element的id用於獲取Element對象存放在elements數組中的下標 var elementId=$(this).parent().find("input[name='id']").val(); var elementIndex=elementId.substr(7,elementId.length)-1; //元件的新名稱 var elementName=$(this).parent().find("input[name='name']").val(); //將編輯好的值存放到elements數組中 elements[elementIndex]=new Element(globalPanelId,$(this).parent().find("input[name='id']").val(), elementName, $(this).parent().find("input[name='column']").val(), $(this).parent().find("input[name='required']").val(), $(this).parent().find("input[name='order']").val(), $(this).parent().find("textarea[name='dataSource']").val()); //改變元件顯示名稱 $("#"+elementId).find("h3").text(panelName); }); /* =============設置Element編輯div的關閉事件結束===================*/ }); </script> </html>