页面效果

最新推荐文章于 2023-04-11 23:00:00 发布
-phoenix
最新推荐文章于 2023-04-11 23:00:00 发布
阅读量215
点赞数
分类专栏： html/css/前端
本文链接：https://blog.csdn.net/m0_37462976/article/details/78225535
版权
html/css/前端专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<title>设置***</title>
<#include "../common/inc.ftl.html"/>
<!-- Bootstrap -->
<link href="${basePath}/CacheableResource/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${basePath}/CacheableResource/bootstrap/js/html5shiv.js"></script>
<script src="${basePath}/CacheableResource/bootstrap/js/respond.min.js"></script>
<script src="${basePath}/CacheableResource/js/jquery/jquery-form.js"></script>
<script src="${basePath}/CacheableResource/js/jquery/jquery.serializejson.js"></script>
<script type="text/javascript">
		$(function () {
			//移到右边
			$('#add').bind('click', function () {
				//获取选中的选项，删除并追加给对方
				$('#clauses option:selected').appendTo('#additivenotpass');
			});
			//双击选项
			$('#clauses').bind('dblclick', function () { //绑定双击事件
				//获取全部的选项,删除并追加给对方
				$("option:selected", this).appendTo('#additivenotpass'); //追加给对方
			});
			//移到左边
			$('#remove').bind('click', function () {				
				$('#additivenotpass option:selected').appendTo('#clauses');
				var clauseid = $('#mainType option:selected').attr("id");
					$.ajax({
					type: "post",
					async: false,
					url: "${basePath}/addititive/changeClause.do",
					data: "clauseid=" + clauseid,
					dataType: "json",
					success: function (data) {
					var clauses = $("#clauses");
					clauses.empty();
					jQuery.each(data.clauseList, function(i,clause){
						additivenotpass(clauses,clause);	
				    });
				},
				error: function () {
					alert("网络繁忙,请稍后再试");
				}
			})
			});
			
			//双击选项
			$('#additivenotpass').bind('dblclick', function () {
				$("option:selected", this).appendTo('#clauses'); //追加给对方
				var clauseid = $('#mainType option:selected').attr("id");
				$.ajax({
				type: "post",
				async: false,
				url: "${basePath}/addititive/changeClause.do",
				data: "clauseid=" + clauseid,
				dataType: "json",
				success: function (data) {
				var clauses = $("#clauses");
				clauses.empty();
				jQuery.each(data.clauseList, function(i,clause){
					additivenotpass(clauses,clause);	
			    });
			},
			error: function () {
				alert("网络繁忙,请稍后再试");
			}
		})
			});
		});
		function info_submit(){
			var orgid = ${orgid};
			var opts = document.getElementById("additivenotpass");
			for (var i = 0; opts.length > i; i++) {
				opts[i].selected = true;
			}
			console.log(opts)
			if(!opts.value) {
				alert("***条款不能设置为空！");
				return false;
			}
			$("#clauseSubmit").ajaxSubmit({
				data: {"orgid": orgid},
				success: function () {
					alert("设置成功");
					parent.zTreeOnDblClick();
				},
				error: function () {
					alert("网络繁忙,请稍后再试");
				}
			})
		}	
</script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-3">
		</div>
		<div class="col-md-6">
			<h3>选择不****条款</h3>
		</div>
		<div class="col-md-3">
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-5">
			<div style="float:left;">
				<h4 style="font-weight:bold;">可选条款</h4>
			</div>
			<div style="width:300px;">
				<select id="mainType" class="form-control" name="mainType" οnchange="mainTypeSelect(this)">
					<option id="0" value="0">国内条款</option>
					<option id="1" value="1">出口条款</option>
					<option id="2" value="2">进口条款</option>
				</select>
			</div>
			<div>
				<select multiple="multiple" id="clauses" class="form-control list-group" name="clauses" style="width:300px;height:340px;">
					<#list clauseList as clauseList>
						<option id="${clauseList.additionalriskid}" name="display" value="${clauseList.additionalriskid}">${clauseList.clausecname}</option>
					</#list>
				</select>
			</div>
		</div>
		<div class="col-md-2" style="margin-top: 100px;">
			<div>
				<button type="button" class="btn btn-primary" name="button" id="add">添 加>></button>
			</div>
			<div style="padding-top: 20px;">
				<button type="button" class="btn btn-danger" name="button" id="remove"><<删 除</button>
			</div>
			<div style="padding-top: 20px;">
				<button type="button" class="btn btn-success" name="button" id="complete" οnclick="info_submit()">提     交</button>
			</div>
		</div>
		<div class="col-md-5">
			<div>
				<h4 style="font-weight:bold;">已选条款</h4>
			</div>
			<div>
				<form id = "clauseSubmit" action="${basePath}/addititive/addititiveSubmit.do" method = "post">
					<select multiple="multiple" id="additivenotpass" class="form-control list-group" name="additivenotpass"  style="width:300px;height:375px;">
						<#if notPassCaluseName??>
							<#list notPassCaluseName as caluseName>
								<option id="${caluseName.additionalriskid}" name="caluseName" value="${caluseName.additionalriskid}">${caluseName.clausecname}</option>
							</#list>
						<#else>
						</#if> 
					</select>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
	function mainTypeSelect(t){
		//可选条款value值
		var clauseid = t.value;
		$.ajax({
			type: "post",
			async: false,
			url: "${basePath}/addititive/changeClause.do",
			data: "clauseid=" + clauseid,
			dataType: "json",
			success: function (data) {
				var clauses = $("#clauses");
				clauses.empty();
				jQuery.each(data.clauseList, function(i,clause){
					additivenotpass(clauses,clause);	
			    });
			},
			error: function () {
				alert("网络繁忙,请稍后再试");
			}
		})
	}
	
	function additivenotpass(clauses,clause){
		//已选择的条款与可选择的条款比较
		var selected = document.getElementById("additivenotpass");
		var options = selected.getElementsByTagName("option");
		if(options.length!=0){
			var clauseName = new Array();
			for(var i = 0; i<options.length; i++){
		        var optionss = options[i];
		        var option = optionss.id;
		        /* var additivenotpasss = option.nodeValue; */
		        clauseName[i] = option;
		    }
		    if(checkEqual(clauseName,clause)){
		    	clauses.append("<option value='"+clause.additionalriskid+"' id='"+clause.additionalriskid+"' name='"+clause.clausecname+"'>"+clause.clausecname+"</option>");
		    }
	    }else{
	    	clauses.append("<option value='"+clause.additionalriskid+"' id='"+clause.additionalriskid+"' name='"+clause.clausecname+"'>"+clause.clausecname+"</option>");
	    }
	}
	
	function checkEqual(clauseName,clause){
		var flag = true;
		for(var i = 0; i<clauseName.length; i++){
			if(clauseName[i] == clause.additionalriskid){
				flag = false;
				break;
			}
		}
		return flag;
	}
</script>
</body>
</html>