html 5 bootstrapのリスト管理(再構築前)
24060 ワード
<pre name="code" class="java"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><fmt:message key="title.fraud.blacklist"/></title>
<meta name="menu" content="fraud.blacklist" />
</head>
<body class="home">
<#include "../message.ftl"/>
<div class="panel panel-success ">
<div class="panel-heading"><h3 class="panel-title"> </h3></div>
</div>
<select id ="customerType" class="col-md-7 form-control">
<option value="1" selected="selected"> </option>
<option value="2" > </option>
</select>
<form action="queryBlacklist" method="get" class="well form-inline" id="blackListform" onsubmit="return checkForm(this)" >
<div class="row">
<div class="col-xs-4 form-group">
<label class="col-md-5 control-label"> </label>
<select id="status" name ="blackListType" class="col-md-7 form-control">
<option value="1" selected="selected"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
<option value="5"> </option>
</select>
</div>
<div id="div-idCardNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" id="idcard1" name="blackListValue" placeholder=" " autocomplete="off" onkeydown ="checkIdCard()" />
</div>
<div id="div-bankNumber" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" placeholder=" " autocomplete="off" />
</div>
<div id="div-mobileNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="phoneNumber1" type="text" placeholder=" " autocomplete="off" />
</div>
<div id="div-fixNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" placeholder=" " autocomplete="off"/>
</div>
<div id="div-companyName" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" placeholder=" " autocomplete="off"/>
<input id="customerblackType" name="customerblackType" value="1" />
</div>
<div class="col-xs-4 form-group">
<label class="col-md-5 control-label"> </label>
<select id="status" class="col-md-7 form-control">
<option value="" >----- ----</option>
<option value="1" selected="selected"> </option>
<option value="2"> </option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary"> </button>
</form>
<form action="queryBlacklist" method="get" class="well form-inline" id="grayListform">
<div class="row">
<div class="col-xs-4 form-group">
<label class="col-md-5 control-label"> </label>
<select id="status1" name ="blackListType" class="col-md-7 form-control">
<option value="1" selected="selected"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
<option value="5"> </option>
</select>
</div>
<div id="div-idCardNo1" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off" onkeydown ="checkIdCard()"/>
</div>
<div class="col-xs-4 form-group">
<label class="col-md-5 control-label"> </label>
<select id="status" class="col-md-7 form-control">
<option value="">----- ----</option>
<option value="1" selected="selected"> </option>
<option value="2"> </option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary"> </button>
</form>
<div class="row" >
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="insertBlack"> </button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<form action="addBlackList" method="get" class="well form-inline" >
<div class="col-xs-4 form-group">
<select id="status2" name ="blackListType" class="col-md-7 form-control">
<option value="1" selected="selected"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
<option value="5"> </option>
</select>
</div>
<div class="row">
<div id="div-idCardNo2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off" onkeydown ="checkIdCard()"/>
</div>
<div id="div-bankNumber2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackSource" placeholder=" " autocomplete="off"/>
</div>
<div id="div-mobileNo2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackReason" placeholder=" " autocomplete="off" />
</div>
<div id="div-fixNo2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="startDate" type="text" name="validFrom" placeholder=" " autocomplete="off"/>
</div>
<div id="div-companyName2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="endDate" type="text" name="validTo" placeholder=" " autocomplete="off"/>
</div>
<div id="div-companyName2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="comment1" placeholder=" " autocomplete="off"/>
</div>
<input id="customerblackType" name="customerblackType" value="1" style="display:none" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
</button>
<button type="submit" class="btn btn-primary">
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</form>
</div>
<div class="row" >
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1" id="insertGray"> </button>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<form action="queryBlacklist" method="get" class="well form-inline" id="blackListform">
<div class="row" >
<div id="div-idCardNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off" required onkeydown ="checkIdCard()"/>
</div>
<div id="div-bankNumber" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off"/>
</div>
<div id="div-mobileNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off"/>
</div>
<div id="div-fixNo" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off"/>
</div>
<div id="div-companyName" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" name="blackListValue" placeholder=" " autocomplete="off"/>
<!-- 2 -->
<input id="customerblackType" name="customerblackType" value="2" style="display:none"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
</button>
<button type="submit" class="btn btn-primary">
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</div>
<!-- ---->
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<#if customerBlacks?exists>
<#list customerBlacks as item>
<tr class="success">
<td id="td1">${item.id?if_exists}</td>
<td id="td2">${item.BlackListValue?if_exists}</td>
<td id="td3">${item.blackSource?if_exists}</td>
<td id="td4">${item.blackReason?if_exists}</td>
<td id="td6">${(item.validFrom?string("yyyy-MM-dd"))!} </td>
<td id="td7">${(item.validTo?string("yyyy-MM-dd"))!}</td>
<td id="td8">${item.state?if_exists}</td>
<td id="td9">${item.comment1?if_exists}</td>
<td><a href="javascript:void(0)" onclick="update(this);"> </a></td>
</tr>
</#list>
</#if>
</tbody>
</table>
<div class="modal fade" id="update" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="updateBlackList" method="get" class="well form-inline" id="blackListform">
<div class="row">
<div id="div-idCardNo3" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" id="IdTd" name="id" placeholder=" " autocomplete="off" required onchange="checkIdCard()" />
</div>
<div id="div-bankNumber2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" id="blackSourceTd" name="blackSource" placeholder=" " autocomplete="off" />
</div>
<div id="div-mobileNo2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" type="text" id="blackReasonTd" name="blackReason" placeholder=" " autocomplete="off" />
</div>
<div id="div-fixNo2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="startDate1" type="text" name="validFrom" placeholder=" " autocomplete="off" />
</div>
<div id="div-companyName2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="endDate1" type="text" name="validTo" placeholder=" " autocomplete="off" />
</div>
<div id="div-companyName2" class="col-xs-4 form-group">
<input class="col-md-7 form-control" id="comment2" type="text" name="comment1" placeholder=" " autocomplete="off" />
<input id="customerblackType1" name="customerblackType" value="1" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
</button>
<button type="submit" class="btn btn-primary">
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<#assign start = start!1/>
<#assign pageSize = pageSize!20/>
<#assign total = total!0/>
<#assign previous = start - pageSize/>
<#assign next = start + pageSize/>
<nav>
<ul class="pager">
<li <#if (previous <= 0)>class="disabled"</#if>><a <#if (previous <= 0)>class="disabled" onclick="javascript:return false;" </#if> role="button" href="?start=${previous}&pageSize=${pageSize}"> </a></li>
<li <#if (next > total)>class="disabled"</#if>><a <#if (next > total)>class="disabled" onclick="javascript:return false;" </#if> role="button" href="?start=${next}&pageSize=${pageSize}"> </a></li>
</ul>
</nav>
<script type="text/javascript">
function update(obj) {
var tds = $(obj).parent().parent().find('td');
$('#IdTd').val(tds.eq(0).text());
$('#blackListValueTd').val(tds.eq(1).text());
$('#blackSourceTd').val(tds.eq(2).text());
$('#blackReasonTd').val(tds.eq(3).text());
$('#startDate1').val(tds.eq(4).text());
$('#endDate1').val(tds.eq(5).text());
$('#comment2').val(tds.eq(7).text());
$('#update').modal('show');
}
//
function changeBlacklistStatus(val){
if(val == '1'){
$("#div-idCardNo").show();
$("#div-companyName").hide();
$("#div-mobileNo").hide();
$("#div-fixNo").hide();
$("#div-bankNumber").hide();
}else if (val == '2'){
$("#div-idCardNo").hide();
$("#div-companyName").hide();
$("#div-mobileNo").hide();
$("#div-fixNo").hide();
$("#div-bankNumber").show();
}else if (val == '3'){
$("#div-idCardNo").hide();
$("#div-companyName").hide();
$("#div-mobileNo").show();
$("#div-fixNo").hide();
$("#div-bankNumber").hide();
}else if (val == '4'){
$("#div-idCardNo").hide();
$("#div-companyName").hide();
$("#div-mobileNo").hide();
$("#div-fixNo").show();
$("#div-bankNumber").hide();
}else if (val == '5'){
$("#div-idCardNo").hide();
$("#div-companyName").show();
$("#div-mobileNo").hide();
$("#div-fixNo").hide();
$("#div-bankNumber").hide();
}
}
//
function changeBlacklistStatus1(val){
if(val == '1'){
$("#div-idCardNo1").show();
$("#div-companyName1").hide();
$("#div-mobileNo1").hide();
$("#div-fixNo1").hide();
$("#div-bankNumber1").hide();
}else if (val == '2'){
$("#div-idCardNo1").hide();
$("#div-companyName1").hide();
$("#div-mobileNo1").hide();
$("#div-fixNo1").hide();
$("#div-bankNumber1").show();
}else if (val == '3'){
$("#div-idCardNo1").hide();
$("#div-companyName1").hide();
$("#div-mobileNo1").show();
$("#div-fixNo1").hide();
$("#div-bankNumber1").hide();
}else if (val == '4'){
$("#div-idCardNo1").hide();
$("#div-companyName1").hide();
$("#div-mobileNo1").hide();
$("#div-fixNo1").show();
$("#div-bankNumber1").hide();
}else if (val == '5'){
$("#div-idCardNo1").hide();
$("#div-companyName1").show();
$("#div-mobileNo1").hide();
$("#div-fixNo1").hide();
$("#div-bankNumber1").hide();
}
}
//
function changeCustomerType(val){
if(val == '1'){
// ：
$("#grayListform").hide();
//
$("#blackListform").show();
//
$("#insertBlack").show();
$("#insertGray").hide();
}else if (val == '2'){
// ：
$("#grayListform").show();
//
$("#blackListform").hide();
//
$("#insertBlack").hide();
$("#insertGray").show();
}
}
function checkIdCard() {
var idcard = document.getElementById("idcard1");
var sIdCard=idcard.value.replace(/^\s+|\s+$/g,"");// ，
if (sIdCard.match(/^\d{14,17}(\d|X)$/gi)==null) {// 18 15 ， X
idcard.setCustomValidity(" ");
}
else
idcard.setCustomValidity('');
}
function checkPhoneNumber(){
var re=/^(13[0-9]{9})|(15[89][0-9]{8})$/;
if(!re.test(phoneNumber1.value)){
o.setCustomValidity(" 。");
// return false;
}
}
function checkForm(o){
var re=/^(13[0-9]{9})|(15[89][0-9]{8})$/;
if(!re.test(o.phoneNumber1.value)){
o.phoneNumber1.setCustomValidity(" 。");
return true;
}}
$(function(){
$('#startDate').datetimepicker({
format : 'yyyy/mm/dd',
autoclose: true,
todayBtn: true,
minView : 2
});
$('#endDate').datetimepicker({
format : 'yyyy/mm/dd',
autoclose: true,
todayBtn: true,
minView : 2
});
$('#startDate1').datetimepicker({
format : 'yyyy/mm/dd',
autoclose: true,
todayBtn: true,
minView : 2
});
$('#endDate1').datetimepicker({
format : 'yyyy/mm/dd',
autoclose: true,
todayBtn: true,
minView : 2
});
// /
document.getElementById("customerblackType").style.display="none";
document.getElementById("customerblackType1").style.display="none";
// ：
$("#grayListform").hide();
var status = $("#insertState").val();
//
$("#insertGray").hide();
var status = $("#status").val();
var status1 = $("#status1").val();
var customerType=$("#customerType").val();
changeBlacklistStatus(customerType);
changeBlacklistStatus(status);
changeBlacklistStatus1(status1);
$("#status").change(function(){
var val = $(this).val();
changeBlacklistStatus(val);
});
$("#status1").change(function(){
var val = $(this).val();
changeBlacklistStatus1(val);
});
$("#customerType").change(function(){
var val = $(this).val();
changeCustomerType(val);
});
});
</script>
</body>
</html>