html5 bootstrap的名单管理(重构之前）
来源：互联网 发布：朴有天 知乎 编辑：程序博客网 时间：2024/06/06 11:40
<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> 0 0
- html5 bootstrap的名单管理(重构之前）
- ReactNative重构之前的android项目
- 重构之前
- 6. 重构之前
- 名单管理的js代码
- 在rake cf：bootstrap之前的准备
- html5 bootstrap分页的应用
- 在main（）之前调用Bootstrap函数
- mhtml5.com举办的HTML5游戏大赛入围作品名单
- HTML5-bootstrap
- 扁平化后台管理 Bootstrap、HTML5、CSS3 Java
- 扁平化后台管理 Bootstrap、HTML5、CSS3 Java
- bootstrap风格的html5表单验证示例
- HTML5 -- 网页框架bootstrap的简单使用
- HTML5 -- 网页框架bootstrap的简单使用
- 最后一次登录CSDN是今年10月份之前的版主名单
- 吊销 BTChina 营业执照”后元旦之前可能相继落马的“影视下载”网站名单
- HTML5之自定义标签（之前都没用过这么6的技术）
- sublime text 2 编辑器错误合集
- Android学习路线指南
- 数据挖掘数据预处理之：异常值检测
- GTK、KDE、Gnome、XWindows 图形界面
- 【经典算法】:运动会问题
- html5 bootstrap的名单管理(重构之前）
- 每天学习十分钟9之工作笔记
- 关系型数据库管理系统简介
- 前端大牛得到的最佳职业生涯建议
- 利用AOP实现基于注解的参数检查
- CSS 漸變效果
- P2P-资金存管系统充值业务流程
- Activity的传值和生命周期
- 【经典算法】:皇帝的遗产
