使用JQueryUI + FreeMarker 實現Div動態DIalog新增和刪除
阿新 • • 發佈：2019-01-17
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" > <title>企業基本資訊</title> <linkrel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/css/style.css" /> <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/images/imagesUrl.css" /> <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/images/icon.css"/> <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/plugin/jquery-ui-1.11.4/jquery-ui.css"/> <script type="text/javascript" src="${requestContext.relativePath}/resources/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="${requestContext.relativePath}/resources/js/jquery.form.js"></script> <script type="text/javascript" src="${requestContext.relativePath}/resources/plugin/jquery-ui-1.11.4/jquery-ui.js"></script> <script src="${requestContext.relativePath}/resources/js/common.js"></script> <script type="text/javascript"> $(document).ready(function(){ /*回顯得值*/ $('#province').val("${(model.provincecode)!''}"); $('#city').val("${(model.citycode)!''}"); $('#county').val("${(model.countycode)!''}"); $('#province').selectmenu(); $('#city').selectmenu(); $('#county').selectmenu(); $('#share').selectmenu({ change:function () { var shareVal = $('#share').val(); var nonaturalPerson = $('#nonaturalPerson'); var naturalPerson = $('#naturalPerson'); if (shareVal === '01') {/*非自然人*/ nonaturalPerson.show(); naturalPerson.hide(); } else if (shareVal === '02') {/*自然人*/ nonaturalPerson.hide(); naturalPerson.show(); } else if (shareVal === '03') {/*自然人、非自然人*/ nonaturalPerson.show(); naturalPerson.show(); } else if(shareVal === ''){ naturalPerson.hide(); nonaturalPerson.hide(); } } }); commonDialog('nonaturalPerDialog',{ title:'非自然人股東新增', width:600, height:400, buttons:[{ id:'saveBtn', title:'儲存', click:function(){ } },{ id:'closeBtn', title:'關閉', click:function(){ closeDialog('nonaturalPerDialog'); } }] }); $('#jType1').selectmenu(); }); /*儲存資料*/ function saveDate(){ /*資料驗證*/ if(isEmpty('regMoney','註冊資本'))return; if(isEmpty('county','企業詳細地址'))return; if(isEmpty('businessScope','經營範圍'))return; } /*下一步*/ function nextStep(url){ window.location.href = url; } /*出資方式行號*/ var jTypeNum=1; /*出資方式新增*/ function insertJType(){ /*拼接html*/ jTypeNum++; var appendStr='<div class="eleContainer" lang="jType">' +'<span class="titleText textS12 eleVAlignM">方式</span> ' +'<span class="selectEle eleVAlignM">' +'<select id="jType'+jTypeNum+'" class="eleVAlignM w200">' +'<option value="">選擇出資方式</option>' +'<option value="01">貨物</option>' +'</select>' +'</span>'+' ' +'<span class="titleText textS12 eleVAlignM">金額</span>'+' ' +'<input id="jTypePrice'+jTypeNum+'" name="jTypePrice'+jTypeNum+'" class="textInput w120 eleRadius eleVAlignM" type="text">' +'</div>'; /*插入html到指定位置*/ $(appendStr).insertBefore('#insertFlag'); /*註冊jqueryui selectmenu*/ $('#jType'+jTypeNum).selectmenu(); } /*刪除行數*/ function deleteJType(){ var sum = $('[lang="jType"]').length;/*獲得行數*/ /*判斷行數的值是否小小於一*/ if(sum <= 1) commonAlert('提示','資料不能小於1行'); else $('[lang="jType"]:last').remove(); } </script> </head> <body> <div class="pageContainer"> <div class="eleContainer titleText textS16"> 名稱核准申請-有限責任公司 </div> <div class="eleContainer HLine"></div> <div class="eleContainer titleText textS14">註冊資本(人民幣)<span class="impSpan eleVAlignM">*</span></div> <div class="eleContainer"> <input id="regMoney" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">企業詳細地址<span class="impSpan eleVAlignM">*</span></div> <div class="eleContainer"> <select id="province" class="eleVAlignM w100"> <option value="">請選擇</option> <option value="01">廣東省</option> <option value="02">海南省</option> </select> <select id="city" class="eleVAlignM w100"> <option value="">請選擇</option> <option value="01">廣州市</option> <option value="02">韶關市</option> <option value="03">深圳市</option> <option value="04">珠海市</option> <option value="05">汕頭市</option> <option value="06">佛山市</option> <option value="07">江門市</option> <option value="08">湛江市</option> <option value="09">茂名市</option> <option value="10">肇慶市</option> <option value="11">惠州市</option> <option value="12">梅州市</option> <option value="13">汕尾市</option> <option value="14">河源市</option> <option value="15">陽江市</option> <option value="16">清遠市</option> <option value="17">東莞市</option> <option value="18">中山市</option> <option value="19">潮州市</option> <option value="20">揭陽市</option> <option value="21">雲浮市</option> </select> <select id="county" class="eleVAlignM w100"> <option value="">請選擇</option> <option value="01">荔灣區</option> <option value="02">越秀區</option> <option value="03">海珠區</option> <option value="04">天河區</option> <option value="05">白雲區</option> <option value="06">黃埔區</option> <option value="07">番禺區</option> <option value="08">花都區</option> <option value="09">南沙區</option> <option value="10">蘿崗區</option> <option value="11">增城區</option> <option value="12">從化市</option> </select> </div> <div class="eleContainer"> <input id="" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">經營範圍<span class="impSpan eleVAlignM">*</span></div> <div class="eleContainer"> <textarea id="businessScope" name="" class="textArea w400 eleRadius"></textarea> </div> <div class="eleContainer titleText textS14">投資者組成型別<span class="impSpan eleVAlignM">*</span></div> <div class="eleContainer"> <select id="share" class="eleVAlignM w400"> <option value="" selected>請選擇</option> <option value="01">只有非自然人股東</option> <option value="02">只有自然人股東</option> <option value="03">既有非自然人股東，又有自然人股東</option> </select> </div> <div id="nonaturalPerson" class="eleContainer eleHide"> <table class="layoutTable eleRadius" cellpadding="0" cellspacing="1" border="0"> <tr class="layoutTableHead"> <th colspan="7"> 非自然人股東資訊 </th> </tr> <tr> <td colspan="7"> <a onclick="openDialog('nonaturalPerDialog')" class="nav">新增非自然人股東</a> </td> </tr> <tr> <th>序號</th> <th>名稱</th> <th>證照名稱</th> <th>證照號碼</th> <th>認繳金額（萬元）</th> <th>出資百分比（%）</th> <th>操作</th> </tr> <tr> <th>1</th> <th>點點</th> <th>營業執照</th> <th>12345678</th> <th>100</th> <th>12</th> <th> <span class="commonIconClick icon-edit"></span> <span class="commonIconClick icon-remove"></span> </th> </tr> </table> </div> <div id="naturalPerson" class="eleContainer eleHide elePaddingBtm"> <table class="layoutTable eleRadius" cellpadding="0" cellspacing="1" border="0"> <tr class="layoutTableHead"> <th colspan="7"> 自然人股東資訊 </th> </tr> <tr> <td colspan="7"> <a onclick="openDialog('naturalPerDialog')" href="javascript:void(0)" class="nav">新增自然人股東</a> </td> </tr> <tr> <th>序號</th> <th>名稱</th> <th>證照名稱</th> <th>證照號碼</th> <th>認繳金額（萬元）</th> <th>出資百分比（%）</th> <th>操作</th> </tr> <tr> <th>1</th> <th>點點</th> <th>營業執照</th> <th>12345678</th> <th>100</th> <th>12</th> <th> <span class="commonIconClick icon-edit"></span> <span class="commonIconClick icon-remove"></span> </th> </tr> </table> </div> <div class="eleContainer eleAlignC"> <input id="" value="上一步" class="commonBtn" type="button"/> <input id="" value="儲存" onclick="saveDate()" class="commonBtn" type="button"/> <input id="" value="下一步" onclick="nextStep('/sdfer/namemanage/uploadApplicationInfo.html')" class="commonBtn" type="button"/> </div> </div> <!--dialog--> <div id="nonaturalPerDialog"> <form id="naturalPerForm"> <div class="ctrlContainer"> <div class="eleContainer titleText textS14">投資者性質</div> <div class="eleContainer"> <select id="naturalPerDialog" class="eleVAlignM w100"> <option value="">自然人</option> </select> </div> <div class="eleContainer titleText textS14">證件名稱<span class="impSpan">*</span></div> <div class="eleContainer"> <select id="taxCerType" class="eleVAlignM w400"> <option value="" selected>居民身份證</option> <option value="">居民身份證（港、澳、臺）</option> <option value="">軍官證</option> <option value="">警官證</option> <option value="">外國（地區）護照</option> </select> </div> <div class="eleContainer titleText textS14">證件名稱<span class="impSpan">*</span></div> <div class="eleContainer"> <input id="" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">姓名<span class="impSpan">*</span></div> <div class="eleContainer"> <input id="" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">聯絡電話<span class="impSpan">*</span></div> <div class="eleContainer"> <input id="" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">住所<span class="impSpan">*</span></div> <div class="eleContainer"> <input id="" name="" class="textInput w400 eleRadius" type="text"> </div> <div class="eleContainer titleText textS14">認繳方式<span class="impSpan">*</span></div> <div id="deleteFlag" class="eleContainer" lang="jType"> <span class="titleText textS12 eleVAlignM">方式</span> <span class="selectEle eleVAlignM"> <select id="jType1" class="eleVAlignM w200"> <option value="">選擇出資方式</option>