在浏览器页面，选中图片(可多选) 》单击删除按钮。
重点是， 本数据库表TabHeBeiTianQi中 存在 同一id，对应的picLocalPath字段 存储了多张图片，图片地址用 逗号隔开
HeBeiTianQi.jsp页面
<head>
<link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<span hidden="hidden" id="inputRealNameVal" type="text" value="${sessionScope.loginUser.realName}" ></span><!-- 获取后台登录名 -->
<input type="hidden" id="inputRealNameVal" value="${sessionScope.loginUser.realName}"><!-- 获取后台登录名 -->
<button id="btn_delete" type="button" class="btn btn-default" style="display: none" state="1">
<span class="glyphicon glyphicon-ok" aria-hidden="true" ></span>删除
</button><!-- 删除弹窗 -->
<div class="modal fade" id="mdl_deleteConfirm">
<div class="modal-dialog" style="width:350px">
<div class="modal-content" style="border-radius:0px">
<div class="modal-header" style="background:#1a3d5c;padding:7px;">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close" style="color:#fff">×</button>
<h4 class="modal-title" style="font-size:14px;color:#fff;">河北天气删除 </h4>
</div>
<div class="modal-body" style="height:50px;">
<div style="display:inline-block;width:100%">
<label style="float:left;margin-right:5px">鉴定人</label>
<input type="text" id="UserName2" style="width:146px" value='${sessionScope.loginUser.realName}' >
</div>
</div>
<div class="modal-footer">
<button type="button" id="btn_deleteConfirm" class="btn btn-primary">确认</button>
<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>
</div>
</div>
</div>
</div><script src="static/js/jquery-1.10.1.min.js"></script>
<script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="static/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>
<script src="static/js/HeBeiTianQi.js"></script>
</body>
HeBeiTianQi.js文件
$(function(){
//方式1.1 删除选中的图片
$("#btn_delete").click(function(){
if (totalCheckId.length == 0) {
layer.alert('请先选择!', {icon: 0});
return;
}
$('#mdl_deleteConfirm').modal({
show : true,
backdrop : 'static'
});
});
//方式1.2 删除 手动填写删除鉴定人员
$("#btn_deleteConfirm").click(function(){
var user = document.getElementById("UserName2").value;//删除人
if(user==''||user==undefined){
layer.alert('请填写删除鉴定人员姓名！', {icon: 0});
return;
}
var id = totalCheckId.substr(0,totalCheckId.length-1);
var idArr=id.split(",");
var idStr=idArr.join("','");
var idParam="("+"'"+idStr+"'"+")";
var thisPicLocalPathArr=getCheckedImgObjIdAndUrl();
var thisPicLocalPathStr = JSON.stringify(thisPicLocalPathArr);
$.ajax({
url: 'HeBeiTianQi/HeBeiTianQiDelete.data',
type:'post',
dataType:'json',
//参数：所有选中图片ID，所有选中图片url
data:{
idParam: idParam,
thisPicLocalPathStr:thisPicLocalPathStr,
authenticatePeople: $("#UserName2").val()
},
success:function(backResult) {
$('#mdl_deleteConfirm').modal('hide');
layer.alert(backResult.msg, {icon: 0});
reqHeBeiTianQiList(CurrentPageHeBeiTianQi);
}
});
document.getElementById("allSelect").checked = false;
$("#btn_cancel").click();
});//方式2.1删除选中的图片,方式2.2填写 "自动获取到的 登录名"
$("#btn_delete").click(function(){
if (totalCheckId.length == 0) {
layer.alert('请先选择!', {icon: 0});
return;
}
layer.prompt({title: '请填写筛选人员姓名',value:$("#inputRealNameVal").attr("value")},function(val, index){
if(val==''||val==undefined){
layer.alert('筛选人员姓名不能为空！', {icon: 0});
return;
}
var id = totalCheckId.substr(0,totalCheckId.length-1);
//var idArr=id.split(",");
var thisPicLocalPathArr=getCheckedImgObjIdAndUrl();
var thisPicLocalPathStr = JSON.stringify(thisPicLocalPathArr);
$.ajax({
url: 'HeBeiTianQi/HeBeiTianQiDelete.data',
type:'post',
dataType:'json',
//参数：所有选中图片ID，所有选中图片url
data:{
idParam: id,
thisPicLocalPathStr:thisPicLocalPathStr,
authenticatePeople: $("#UserName2").val()
},
success:function(backResult) {
layer.alert(backResult.msg, {icon: 0});
reqHeBeiTianQiList(CurrentPageHeBeiTianQi);
}
});
document.getElementById("allSelect").checked = false;
$("#btn_cancel").click();
layer.close(index);
});
});
})/**
* 获取选中图片的id 和 url，返回数组对象[{id:idVal,url:urlVal}];可通过JSON.stringify(res),将返回结果转化为字符串
* @returns {Array}
*/
function getCheckedImgObjIdAndUrl(){
var checkImgUrl=[];
$(".row li .graphic-collection").each(function(index,element){
var isCheck =$(element).find(".ticker").is(":hidden");
if(!isCheck){
var obj={};
var idVal=$(element).find("input[name='iid']").val();
var url=$(element).find("a img").attr("src");
var fileServicePath=G.fileServicePath;
obj.id=idVal;
obj.url=url.substring(fileServicePath.length);
checkImgUrl.push(obj);
}
});
return checkImgUrl;
}
HeBeiTianQiController.java
/**
* 河北天气删除
* @param idParam 删除图片的id，多个用，隔开
* @param thisPicLocalPathStr 图片路径，举例数据格式为[{"id":"429","url":"54.jpg"},{"id":"426","url":"23.jpg"}]
* @param authenticatePeople 筛选人员姓名
* @return
*/
@RequestMapping("/HeBeiTianQiDelete.data")
@ResponseBody
public String HeBeiTianQiDelete(String idParam,String thisPicLocalPathStr,String authenticatePeople) {
String backResult= heBeiTianQiService.HeBeiTianQiDelete(idParam,thisPicLocalPathStr,authenticatePeople);
return backResult;
}
HeBeiTianQiService .java
public interface HeBeiTianQiService {
String HeBeiTianQiDelete(String IdParam,String ThisPicLocalPathStr,String AuthenticatePeople);
}
HeBeiTianQiServiceImpl .java
//删除选中图片
@Override
public String HeBeiTianQiDelete(String IdParam,String ThisPicLocalPathStr,String AuthenticatePeople) {
int[] success = heBeiTianQiDaoImpl.HeBeiTianQiDelete(IdParam,ThisPicLocalPathStr,AuthenticatePeople);
if(success == null){
return BackMsgDTO.errorMsg("您未选中要删除的图片").toString();
}
if(success[2] > 0){
return BackMsgDTO.okMsg(success[1] + "张图片删除成功！" + success[2] + "张图片删除失败！").toString();
}else{
return BackMsgDTO.okMsg(success[1] + "张图片删除成功！").toString();
}
}
HeBeiTianQiDaoImpl.java
/**
* 河北天气删除 选中图片
*/
public int[] HeBeiTianQiDelete(String IdParam, String ThisPicLocalPathStr,String AuthenticatePeople) {
if(StringUtil.isEmpty(IdParam)){
return null;
}
String sql = "select id,picLocalPath from TabHeBeiTianQi where id in ("+IdParam+")";
String picLocalPathStr=this.getJsonStrBySql(sql);
int[] result=new int[3];//定义一个长度为3的int型数组
int sucessCount=0;
int falseCount=0;
int oneResult=0;
try {
JSONArray jsonArray = new JSONArray(picLocalPathStr);
JSONArray thisJsonArray = new JSONArray(ThisPicLocalPathStr);
for(int i=0 ; i < jsonArray.length() ;i++){
//将json数组转换成json对象
JSONObject jsonObject = jsonArray.getJSONObject(i);//JSONObject jsonObject = (JSONObject) jsonArray.get(i);
String idVal = jsonObject.getString("id");//id这里是列名称，获取json对象中列名为id的值
String picLocalPathVal = jsonObject.getString("picLocalPath");
String[] picLocalPathValArr = picLocalPathVal.split(",");
String ResultPicLocalPathValStr = null ;
List<String> oneList = Arrays.asList(picLocalPathValArr);// 将数组转换为list集合
List<String> arrayList = new ArrayList<String>(oneList);// 转换为ArrayLsit调用相关的remove方法
for(int j=0 ; j < thisJsonArray.length() ;j++){
JSONObject thisJsonObject = thisJsonArray.getJSONObject(j);
String thisIdVal = thisJsonObject.getString("id");
String thisPicLocalPathVal = thisJsonObject.getString("url"); //实际获取的字符串中只有1个url
//String[] thisPicLocalPathValArr = thisPicLocalPathVal.split(",");// 不需要分割 ,因为实际传来字符串中只有1个url
if(thisIdVal.equals(idVal)){// 这里不能用idVal==thisIdVal ,因为会根据id清空
arrayList.remove(thisPicLocalPathVal);
/*for(int m=0;m<thisPicLocalPathValArr.length;m++){
arrayList.remove(thisPicLocalPathValArr[m]);
}*/
// 控制台输出演示---- 数组列表
/*for (String str1 : arrayList) {
System.out.println(str1 + ",");
}*/
// ArrayList转成String数组["","",""]
String[] array = arrayList.toArray(new String[0]);
/*for (int n = 0; n < array.length; n++) {
System.out.println("array--> " + array[n]);
}*/
// 方式一将String数组["","",""]转换成String",,"
ResultPicLocalPathValStr= StringUtil.formatStringArrToString(array);
// 方式二将String数组["","",""]转换成String"[,,]"
//ResultPicLocalPathValStr = Arrays.toString(array);
// String格式转换：将String"[,,]"转换成String",,"
//参考 https://zhidao.baidu.com/question/136765761398462045.html
//将字符串转换成json对象
/*JSONObject ResultPicLocalPathVal=new JSONObject();
ResultPicLocalPathVal.put("picLocalPath", ResultPicLocalPathValStr);*/
StringBuffer sqlDelete = new StringBuffer();
String nowDate = TimeUtil.getCurrentDate("yyyy-MM-dd HH:mm:ss");
sqlDelete.append("update TabHeBeiTianQi set picLocalPath= ?,AuthenticateDate = ?,AuthenticatePeople=? where ID = ?");
oneResult= this.executeBySql(sqlDelete.toString(),new Object[]{ResultPicLocalPathValStr,nowDate,AuthenticatePeople,idVal});
if (oneResult>0){
sucessCount=sucessCount+oneResult;//执行成功个数
}else{
falseCount=thisJsonArray.length()-sucessCount;
}
}
}
}
result[0]=oneResult;
result[1]=sucessCount;
result[2]=falseCount;
} catch (JSONException e) {
e.printStackTrace();
}
return result;
}