使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除
2015-05-27 16:49
1086 查看
<!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> '
+'<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>
<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> <span class="titleText textS12 eleVAlignM">金额</span> <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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- 使用jquery实现表格的动态添加和删除
- jquery动态添加删除div 具体实现
- jQuery实现动态添加和删除一个div
- jQuery实现动态添加和删除一个div
- jQuery实现动态添加和删除一个div
- jquery动态添加删除div 具体实现
- jQuery实现动态添加和删除一个div
- jQuery动态添加删除select项(实现代码)
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）
- Android UI 之使用java代码实现动态添加LinearLayout(一)
- jQuery实现动态添加删除输入框
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 关于从后台传来的json数据，使用jquery动态展现所有的item，给每个item添加删除功能
- 使用jquery给指定的table动态添加一行、删除一行
- jquery实现table动态添加行、删除行以及行的上移和下移
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版