使用JQueryUI + FreeMarker 實現Div動態DIalog添加和刪除


<!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>
    <link rel="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>&nbsp;'
                    +'<span class="selectEle eleVAlignM">'
                    +'<select id="jType'+jTypeNum+'" class="eleVAlignM w200">'
                    +'<option value="">選擇出資方式</option>'
                    +'<option value="01">貨物</option>'
                    +'</select>'
                    +'</span>'+'&nbsp;&nbsp;'
                    +'<span class="titleText textS12 eleVAlignM">金額</span>'+'&nbsp;'
                    +'<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">
                    &nbsp;&nbsp;<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">
                    &nbsp;&nbsp;<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"/>&nbsp;
        <input id="" value="保存" onclick="saveDate()" class="commonBtn" type="button"/>&nbsp;
        <input id="" value="下一步" onclick="nextStep('/sdfer/namemanage/uploadApplicationInfo.html')" class="commonBtn" type="button"/>&nbsp;
    </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>&nbsp;<span class="selectEle eleVAlignM">
                    <select id="jType1" class="eleVAlignM w200">
                        <option value="">選擇出資方式</option>
                        <option valur="01">貨物</option>
                        <option valur="02">實物</option>
                        <option valur="03">知識產權</option>
                        <option valur="04">債權</option>
                        <option valur="05">高新技術成果</option>
                        <option valur="05">土地使用權</option>
                        <option valur="05">勞權</option>
                        <option valur="06">其他</option>
                    </select></span>&nbsp;&nbsp;<span class="titleText textS12 eleVAlignM">金額</span>&nbsp;<input id="jTypePrice1" name="jTypePrice1" class="textInput w120 eleRadius eleVAlignM" type="text">
            </div>
            <div id="insertFlag" class="eleContainer">
                <input id="" value="增加" onclick="insertJType()" class="commonBtn" type="button"/>
                <input id="" value="刪除" onclick="deleteJType()" class="commonBtn" type="button"/>
            </div>
        </div>
    </form>
</div>
<!--dialog-->
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章