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