JSP modal dialog
<script type="text/javascript" src="<%=path %>/jsp/management/js/modalBox.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path %>/jsp/management/css/modalBox.css" media="screen" />
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Modal dialog</title>
<link rel="stylesheet" type="text/css" href="modalBox.css">
</head>
<body>
<! -- Trigger button -->
<button id="triggerBtn" >Modal dialog</button>
<! -- Modal box -->
<div id="myModal" class="modal" >
<div class="modal-content" style="width: 800px">
<div class="modal-header">
<h2>The head</h2>
<span id="closeBtn" class="close">x</span>
</div>
<div class="modal-body">
<p>This is a modal box!</p>
<p>If you like it, give it a thumbs up!</p>
<p>This is a modal box!</p>
<p>If you like it, give it a thumbs up!</p>
<p>This is a modal box!</p>
<p>If you like it, give it a thumbs up!</p>
<p>This is a modal box!</p>
<p>If you like it, give it a thumbs up!</p>
<p>This is a modal box!</p>
<p>If you like it, give it a thumbs up!</p>
</div>
<div class="modal-footer">
<h3>The tail</h3>
</div>
</div>
</div>
<script type="text/javascript" src="modalBox.js"></script>
</body>
</html>
Copy the code$(function() {
/* Create a modal box object */
var modalBox = {};
/* Get the modal box */
modalBox.modal = document.getElementById("myModal");
/* Get trigger button */
modalBox.triggerBtn = document.getElementById("triggerBtn");
/* Get the close button */
modalBox.closeBtn = document.getElementById("closeBtn");
/* The modal box displays */
modalBox.show = function() {
console.log(this.modal);
this.modal.style.display = "block";
}
/* The modal box closes */
modalBox.close = function() {
this.modal.style.display = "none";
}
/* When the user clicks on the area outside the modal box content, the modal box will also close */
modalBox.outsideClick = function() {
var modal = this.modal;
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none"; }}}/* Modal box initialization */
modalBox.init = function() {
var that = this;
this.triggerBtn.onclick = function() {
that.show();
}
this.closeBtn.onclick = function() {
that.close();
}
this.outsideClick(); } modalBox.init(); }) ();Copy the code
/* Modal box */
.modal {
display: none; /* Hide */ by default
position: fixed; /* Locate by browser */
z-index: 1; /* on top */
left: 0;
top: 0;
width: 120%; Full width / * * /
height: 100%; / * * /
overflow: auto; /* Allows scrolling */
background-color: rgba(0.0.0.0.4); /* Background color */
}
/* Modal box contents */
.modal-content {
display: flex; /* Use flexbox layout */
flex-direction: column; /* Vertical alignment */
position: relative;
background-color: #fefefe;
margin: 5% 650px auto; /* Horizontally centered 5% from the top */
padding: 20px;
border: 1px solid # 888;
width: 80%;
animation: topDown 0.4 s; /* Custom animation that appears from top to bottom of the modal box contents */
}
@keyframes topDown {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}}/* Modal box header */
.modal-header {
display: flex; /* Use flexbox layout */
flex-direction: row; /* Horizontal layout */
align-items: center; /* The content is vertically centered */
justify-content: space-between;
}
/* Close X style */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover {
color: black;
text-decoration: none;
cursor: pointer;
}
Copy the codeThe < % - <! -- Trigger button --> <! -- <button id="triggerBtn"</button> --> <! --> <div id="myModal" class="modal">
<div class="modal-content" style="width: 800px">
<div class="modal-header"> <h2> Please select product specifications </h2> <span id="closeBtn" class="close">×</span>
</div>
<!-- 规格模态框 -->
<form method="post" id="management-form">
<ul class="clearfix"</span><input name="name" id=name value="${ name }" type="text" class="span3" placeholder="Please enter...">
</li>
<li>
<a href="javascript:psida()" id="177-a"><img src="img/search.png"></a>
</li>
</ul>
</form>
<div class="modal-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th><img src="img/th-img.png"/> category </th> <th><img SRC ="img/th-img.png"/> Name </th> <th><img SRC ="img/th-img.png"/> Remarks </th> </tr> </thead> <tbody id ="171-id">
</tbody>
</div>
<div class="modal-footer">
</div>
</div>
</div>
--%>
$.each(data, function(i, v){
$("<tr><td>"+v.parameters+"</td><td>"+v.name+"</td><td>"+v.remark+"</td></tr>").appendTo(aaaa);
});
Copy the codeParent and child pages close and pass values
// Close the popover window
$.closeDialog();
art.dialog.opener.yap(id,name);// Call the parent page method to pass the value
/** * Add specifications popup window */
function fn(parameters) {
sessionStorage.setItem("parameters", parameters);
var url = "commodityParametersAction! selectCommodityParametersAndCommodityPage.action? parameters="+parameters;
$.dialog({
url : url,
title : 'Select product specifications'.width : 900.height : 500
});
}
Copy the codeSubmethod jumps to the page
1. The problem of jump new page < a href = "index.html" id = "AD - 15 - a" target = "_parent" > < p id = "AD - 16 p" > < / p > < / a > $(" # AD - 16 p "). The trigger (" click "); // The child tag drives the parent tag when the condition is not met;Copy the codeInto a json string
public static String jsonStr(Object str){
JSONObject jsonObj = JSONObject.fromObject(str);
return jsonObj.toString();
}
public static String jsonListStr(List list){
JSONArray jsonObj = JSONArray.fromObject(list);
return jsonObj.toString();
}
String jsonStr = Util.jsonListStr(oneList);/ / multiple
String jsonStr = Util.jsonStr(oneList);/ / a single
response.getWriter().print(jsonStr);
Copy the codeThe foreground gets the time format
function getTime() {
var myDate = new Date(a);var myYear = myDate.getFullYear(); // Get the full year (4 bits,1970-????)
var myMonth = myDate.getMonth() + 1; // Get the current month (0-11,0 for January)
var myToday = myDate.getDate(); // Get the current day (1-31)
var myDay = myDate.getDay(); // Get the current week X(0-6,0 for Sunday)
var myHour = myDate.getHours(); // Get the current hour (0-23)
var myMinute = myDate.getMinutes(); // Get the current minute (0-59)
var mySecond = myDate.getSeconds(); // Get the current number of seconds (0-59)
var nowTime;
nowTime = myYear + The '-' + fillZero(myMonth) + The '-' + fillZero(myToday) + ' ' + fillZero(myHour) + ':' +
fillZero(myMinute) + ':' + fillZero(mySecond) + ' ';
console.log(nowTime);
// $('#time').html(nowTime);
};
function fillZero(str) {
var realNum;
if (str < 10) {
realNum = '0' + str;
} else {
realNum = str;
}
return realNum;
}
Copy the codeControls the current row through a selector
// Input parent td, the first sibling td after TD, all children below TD, and select the first value
var bbb= $(val).parent().next().children().first().val();
Copy the codeYou can convert Ajax data into JSON strings
console.log(JSON.stringify(data));
Copy the codeThis method gets the front value
String param = commodityParametersVo.getParameters();
String[] params = param.split(",");
commodityParametersVo.setParameters(params[0]);
commodityParametersVo.setSortnumber(params[1]);
<select name="commodityParametersVo.parameters" datatype="s2-2" errormsg="Please select the data in the drop-down box." style="float: left"> <option >-- Please select --</option> <option value="Unit of commodity,1" <c:if test="${commodityParametersVo. The parameters = = 'commodity units'}">selected</c:if>> Commodity unit </option> <option value="Specification,2" <c:if test="${commodityParametersVo. The parameters = = 'commodity specifications'}">selected</c:if</option> </select>Copy the codeDetermine gender by ID number
// Determine gender by id number
function getSex(number) {
var sexStr = ' ';
if (number.length == 18) {
if ((Number(number.substring(number.length - 2,
number.length - 1))) % 2= =0) {
sexStr = 'woman';
} else {
sexStr = 'male'; }}document.getElementById("gender-input").value = sexStr;
}
Copy the codeIdentity util
package com.sdkj.util;
import org.apache.commons.lang.StringUtils;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
/ * * *@Description: util * for the id number@Author:
* @Date: Created in 11:26 2019-03-27
* @Modified By:
*/
public class IDCardUtil {
/** ** 15-digit ID number */
private static final Integer FIFTEEN_ID_CARD=15;
/** ** 18-digit id number */
private static final Integer EIGHTEEN_ID_CARD=18;
private static SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
/** * Get gender * based on id number@param IDCard
* @return* /
public static String getSex(String IDCard){
String sex ="";
if (StringUtils.isNotBlank(IDCard)){
//15 digit id number
if (IDCard.length() == FIFTEEN_ID_CARD){
if (Integer.parseInt(IDCard.substring(14.15)) % 2= =0) {
sex = "Female";
} else {
sex = "Male";
}
//18 id numbers
}else if(IDCard.length() == EIGHTEEN_ID_CARD){
// Determine the gender
if (Integer.parseInt(IDCard.substring(16).substring(0.1)) % 2= =0) {
sex = "Female";
} else {
sex = "Male"; }}}return sex;
}
/** * Get age * based on id number@param IDCard
* @return* /
public static Integer getAge(String IDCard){
Integer age = 0;
Date date = new Date();
if (StringUtils.isNotBlank(IDCard)&& isValid(IDCard)){
//15 digit id number
if (IDCard.length() == FIFTEEN_ID_CARD){
// The year on the id card (15-digit ID card is pre-1980)
String uyear = "19" + IDCard.substring(6.8);
// The month on the id card
String uyue = IDCard.substring(8.10);
// Current year
String fyear = format.format(date).substring(0.4);
// Current month
String fyue = format.format(date).substring(5.7);
if (Integer.parseInt(uyue) <= Integer.parseInt(fyue)) {
age = Integer.parseInt(fyear) - Integer.parseInt(uyear) + 1;
// The current user is not alive
} else {
age = Integer.parseInt(fyear) - Integer.parseInt(uyear);
}
//18 id numbers
}else if(IDCard.length() == EIGHTEEN_ID_CARD){
// The year on the id card
String year = IDCard.substring(6).substring(0.4);
// The month on the id card
String yue = IDCard.substring(10).substring(0.2);
// Current year
String fyear = format.format(date).substring(0.4);
// Current month
String fyue = format.format(date).substring(5.7);
// The current month is greater than the month of the user's birth
if (Integer.parseInt(yue) <= Integer.parseInt(fyue)) {
age = Integer.parseInt(fyear) - Integer.parseInt(year) + 1;
// The current user does not have a birthday yet
} else{ age = Integer.parseInt(fyear) - Integer.parseInt(year); }}}return age;
}
/** * Obtain birth date yyyy MM dd *@param IDCard
* @return* /
public static String getBirthday(String IDCard){
String birthday="";
String year="";
String month="";
String day="";
if (StringUtils.isNotBlank(IDCard)){
//15 digit id number
if (IDCard.length() == FIFTEEN_ID_CARD){
// The year on the id card (15-digit ID card is pre-1980)
year = "19" + IDCard.substring(6.8);
// The month on the id card
month = IDCard.substring(8.10);
// The date on the id card
day= IDCard.substring(10.12);
//18 id numbers
}else if(IDCard.length() == EIGHTEEN_ID_CARD){
// The year on the id card
year = IDCard.substring(6).substring(0.4);
// The month on the id card
month = IDCard.substring(10).substring(0.2);
// The date on the id card
day=IDCard.substring(12).substring(0.2);
}
birthday=year+"Year"+month+"Month"+day+"Day";
}
return birthday;
}
/** * id card verification *@paramId Number content *@returnWhether it is valid */
public static boolean isValid(String id){
Boolean validResult = true;
// The verification length can be 15 or 18
int len = id.length();
if(len ! = FIFTEEN_ID_CARD && len ! = EIGHTEEN_ID_CARD){ validResult =false;
}
// Check the birthday
if(! validDate(id)){ validResult =false;
}
return validResult;
}
/** ** Check birthday *@param id
* @return* /
private static boolean validDate(String id)
{
try
{
String birth = id.length() == 15 ? "19" + id.substring(6.12) : id.substring(6.14);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
Date birthDate = sdf.parse(birth);
if(! birth.equals(sdf.format(birthDate))){return false; }}catch (ParseException e)
{
return false;
}
return true; }}Copy the code/ / print
function print(){$("#printdivaa").jqprint({
debug: false.importCSS: true.printContainer: true.operaSupport: false
});
}
// Wrap the printed content
<div id='printdivaa'></div>
jquery.jqprint-0.3Let's bring in this JSCopy the codeJquery. Jqprint - 0.3
// -----------------------------------------------------------------------
// Eros Fratini - [email protected]
/ / jqprint 0.3
//
// - 19/06/2009 - some new implementations, added Opera support
// - 11/05/2009 - first sketch
//
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
/ / the requires jQuery 1.3 x
//
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------
(function($) {
var opt;
$.fn.jqprint = function (options) {
opt = $.extend({}, $.fn.jqprint.defaults, options);
var $element = (this instanceof jQuery) ? this : $(this);
if (opt.operaSupport && $.browser.opera)
{
var tab = window.open(""."jqPrint-preview");
tab.document.open();
var doc = tab.document;
}
else
{
var $iframe = $("");
if(! opt.debug) { $iframe.css({position: "absolute".width: "0px".height: "0px".left: "-600px".top: "-600px" }); }
$iframe.appendTo("body");
var doc = $iframe[0].contentWindow.document;
}
if (opt.importCSS)
{
if ($("link[media=print]").length > 0) {$("link[media=print]").each( function() {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
});
}
else{$("link").each( function() {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' / >"); }); }}if (opt.printContainer) { doc.write($element.outer()); }
else { $element.each( function() { doc.write($(this).html()); }); }
doc.close();
(opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if(tab) { tab.close(); }},1000);
}
$.fn.jqprint.defaults = {
debug: false.importCSS: true.printContainer: true.operaSupport: true
};
// Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
jQuery.fn.outer = function() {
return $($('<div></div>').html(this.clone())).html();
}
})(jQuery);
Copy the codeCheck the date
if(dataA ! =null&&!"".equals(dataA)) {
param = param + " and a.data >= '" + dataA + " 00:00:01'";
}
if(dataB ! =null&&!"".equals(dataB)) {
param = param + " and a.data <= '" + dataB + "23:59:59";
}
Copy the codeRemoves the last comma of array concatenation
String[] id = request.getParameterValues("id");
String ids = "";
for (int i = 0; i < id.length; i++) {
ids += "'"+ id[i] + "',";
}
// Find the last comma
int count = ids.lastIndexOf(",");
if(count! = -1){
ids = ids.substring(0,count)+ids.substring(count+1,ids.length());
Copy the codeConcatenate 1,1,1 foreground strings like ‘1’,’1′,’1′
function dc(){
var id = [];
$('input[name="selectFlag"]:checked').each(function(){
id.push($(this).val());
});
if(id.length==0){
alert('Please check first');
return id;
}
$('#listform').attr("action"."officeAction! dc.action? id="+id);
$('#listform').submit();
}
Copy the code//controller
String id = request.getParameter("id");
officeService.selectAllDC(id.split(","));
//impl
String sql = "select * from office where id in ('"+StringUtils.join(id,"', '") +"')";
Copy the codePass values can be escaped when using Appent
tr(\' '+id+'\')"
Copy the codeGo back to the previous page and refresh
/ / A page
window.addEventListener('pageshow'.function(event) {
if(event.persisted) { // Ios is valid, Android and PC are false every time
location.reload();
} else { / / ios excepted
if(sessionStorage.getItem('refresh') = = ='true') {
location.reload();
}
}
sessionStorage.removeItem('refresh');
});
// the B page is written inside the ajax of the modified jump
sessionStorage.setItem("refresh"."true");
window.history.go(-1);
Copy the codeTo upload pictures
vo
public class UploadFileVo {
private String cf_id;
private String c_id;
private String cf_name;
private String cf_url;
private String cf_type;
private String category;
private String stateid;//20191211 fcl
}
set/get
Copy the codemaps
// Do the following(cf_id,c_id,cf_name,cf_url <! --> <insert id="insertUploadFile" parameterClass="uploadFileVo">
insert
into
uploadfile
(cf_id,c_id,cf_name,cf_url)
values
(#cf_id#,#c_id#,#cf_name#,#cf_url#)</insert> <! --> <select ID="selectByUploadFileId" parameterClass="java.lang.String"
resultClass="uploadFileVo"> select * from uploadfile where c_id=#c_id# </select> <! -- delete --> <delete id="deleteUploadFileId" parameterClass="java.lang.String">
delete
from uploadfile where c_id=#c_id#
</delete>
Copy the codeserver/impl
/ / add
// Delete before add
/** * upload image **@paramUploadFileVo * Entity class *@return
* @throws Exception
*/
public void insertUploadFile(UploadFileVo uploadFileVo) throws Exception;
// You can query a collection
/** * Get details from the primary key **@paramId * primary key *@returnReturns a piece of data *@throws Exception
*/
public List selectByUploadFileId(String id) throws Exception;
/** * delete this message **@paramId * primary key *@returnReturns a piece of data *@throws Exception
*/
public void deleteUploadFileId(String id) throws Exception;
Copy the codeaction
// get the image information in the background
String[] fileName = request.getParameterValues("fileName");
String[] filePath = request.getParameterValues("filePath");
for (int i = 0; i < filePath.length; i++) {
uploadFileVo.setC_id(supplierVo.getId());
uploadFileVo.setCf_id(CommonFunc.getGUID());
uploadFileVo.setCf_name(fileName[i]);
uploadFileVo.setCf_url(filePath[i]);
uploadFileService.insertUploadFile(uploadFileVo);
}
Copy the code<tr> <th> Select the image :</th> < TD width="35%"><span onclick="addFileUpload()" class="btn btn-small btn-info" style="color:#FFFFFF; font-weight:bold;"> Add file </span> <table id="fileUploadTable" style="margin-top:8px;" class="table2">
<c:forEach var="m" items="${UploadFile}">
<tr id="${m.cf_id }">
<td>
<%-- <a href="http://<%=request.getServerName()%>:<%=request.getServerPort() %>/download/${m.cf_name }" target="_bank" style="color: black;">
${m.cf_name }
</a> --%>
<img id="img1" border=0 src="/download/${m.cf_name } " style="width: 250px; height:300px;"></img>
</td>
<%-- <td>
<input type="button" value="Delete" onclick="javascript:$(this).parent().parent().remove()" style="width:50px;"/>
<input type="hidden" name="fileName" value="${m.cf_name }"/>
<input type="hidden" name="filePath" value="${m.cf_url }"/>
<input type="hidden" name="fileType" value="${m.cf_type }"/>
</td> --%>
</tr>
</c:forEach>
</table>
</td>
</tr>
Copy the code var fileSum=1;
function addFileUpload(){
if(fileSum == 5){
$.alert("You can upload up to 5 files at a time!");
return;
}
fileSum = fileSum+1;
$('#fileUploadTable').append('< tr > < td width = "100 px" > < label > file name: < / label > < / td > < td > < input id = "myFile_'+fileSum+'" type="file" name="myFile_'+fileSum+'"/></td></tr>');
}
function addFileUpload(){
$.dialog({
id:'uploadFilesId'.url:'jsp/uploadFile.jsp'.title: 'Upload file'.width: 500.height: 200.data: {filePath:'D:/download/'}}); }var mytime='${mytime}';
function delFile(pf_id,btn){$("div[id="+pf_id+"]").remove();
}
function getChildData(data){
var json = $.parseJSON(data);
document.getElementById("fileUploadTable").innerHTML = ' ';
// document.getElementById("frzp").value = ''; z
// var obj = document.getelementById ("inputId");
// var inputParent = obj. ParentNode; // Get the parent object of the input
/ / inpuParent. RemoveChild (obj); // Delete it from the parent object of inpu
$("#img1").hide();
$(json.files).each(function(){$('#fileUploadTable').append(
"<input type='hidden' name='saomiaodate' value='"+mytime+"'/></br>"+
"<a href=http://<%=request.getServerName()%>:<%=request.getServerPort() %>/download/"+this.name+" target='_bank' class='input1' ><img src='/download/"+this.name+"' style='width: 250px; height:300px;' /></a><input type='hidden' value='"+this.name+"' name='fileName'/>"+
"<input type='hidden' name='filePath' value='"+this.realPath+"'/><input type='hidden' name='type' value='3'/> "); })}Copy the codeOracle String concatenation
substr((sum(xiaoji)-sum(jinhuoxiaoji))/sum(xiaoji),2.2)||'. '||substr((sum(xiaoji)-sum(jinhuoxiaoji))/sum(xiaoji),4.2) as lirunlv
Copy the codeFixed if the currently selected value is the same as the one passed from the back end
$.each(data, function(i, v){
if(v.riqi=='${riqi}'){
$("<option selected >"+v.riqi +"</option>").appendTo(riqiIpt);
}else{$("+v.riqi +"</option>").appendTo(riqiIpt); }});Copy the code