引入css和js:
<link href="${pageContext.request.contextPath}/plugin/dialog/dialog.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath}/plugin/dialog/dialog.js"></script>
代码:
<!--------------- 多图片+上下切换预览功能开始 -----Autohr:li_hao------------------> <div class="fitem item2" style="height:auto"> <label style="vertical-align:top">应用截图 </label> <span> <jsp:include page="/plugin/dialog/uploadManyImgs.jsp"> <jsp:param value="126" name="width"/> <jsp:param value="26" name="height"/> <jsp:param value="" name="assetId"/> <jsp:param value="setfileid" name="hiddenId"/> </jsp:include> </span> </div> <div style="display: block; 100%;"> <table id="assetTable"> <thead> <tr> <th data-options="field:'id',80,align:'center',sortable:true,formatter:imgformater">应用截图</th> <th data-options="field:'name',80,align:'center'">名称</th> <th data-options="field:'fileSize',80,align:'center'">文件大小(MB)</th> <!-- <th data-options="field:'createTimeString',180,align:'center'">上传日期</th> --> <!-- <th data-options="field:'createUserName',80,align:'center'">上传人</th> --> <th data-options="field:'createTimeString',80,align:'center',formatter:operformatter">删除</th> </tr> </thead> </table> <input type="hidden" id="appimgs" name="microAppEntity.appimgs" value="${microAppEntity.appimgs }"> </div> <div class="mask"></div> <div class="dialog"> <div> <div style="130px;height:25px;margin:0 auto; "> <img style='30px;height:30px;cursor:pointer;' onclick='toLeft()' src='${pageContext.request.contextPath}/plugin/dialog/images/left.png'> <img style='30px;height:30px;margin-left:60px;cursor:pointer;' onclick='toRight()' src='${pageContext.request.contextPath}/plugin/dialog/images/right.png'> </div> </div> <a href="javascript:void(0)" class="close" title="关闭" style="color:black;margin-bottom:20px;">关闭</a> <div class="dialog-content"> </div> </div> <input type="hidden" id="imgid_before" name="imgid_before"> <input type="hidden" id="imgid_after" name="imgid_after"> <input type="hidden" id="imgindex" name="imgindex"> <!--------------- 多图片+上下切换预览功能结束 -----Autohr:li_hao------------------>
js代码:
$(document).ready(function() { //-------------------------- 多图片+预览功能(table数据加载)开始 -----Autohr:li_hao----------------------------- getDataPagination("assetTable","",null,false); //修改页面加载图片列表 if($("#method").val() == 'modify'){ var array = $("#appimgs").val().split(","); if(array!="" && array!=null){ for(var i=0;i<array.length;i++){ var number = 0; $.post("${pageContext.request.contextPath }/assetmgr/asset_queryOne.do",{assetId:array[i]}, function(data,status){ var data = eval('(' + data + ')'); var obj = new Object(); obj.row = data; var size = Number(data.fileSize)/1024/1024; data.fileSize = size.toFixed(2); $('#assetTable').datagrid('insertRow',{index: number, row:data}); number++; }); } } } //-------------------------- 多图片+预览功能(table数据加载)结束 -----Autohr:li_hao----------------------------- }); //---------- 多图片+预览功能开始(弹出层:plugin/dialog) -----Autohr:li_hao----------------------------- function imgformater(value,row,index) { return "<img width=35 height=35 style='margin-top:4px;cursor:pointer;' onclick='showMask("+row.id+","+index+")' src='${pageContext.request.contextPath}/upload/upload_send.do?id="+row.id+"'>"; } //弹出层 function showMask(id,index){ imgidHandle(index); Dialog.open(450,450,'${pageContext.request.contextPath}/upload/upload_send.do?id='+id); } //上一张、下一张 function toLeftOrRight(id,index){ imgidHandle(index); $(".imgclass").attr('src','${pageContext.request.contextPath}/upload/upload_send.do?id='+id); } //上一张、下一张id处理逻辑 function imgidHandle(index){ var rows = $('#assetTable').datagrid('getData').rows; var imgid_before; var imgid_after if(index==0){ //第一张图片 if(rows.length==1){ //只有一张图片 imgid_before=""; imgid_after=""; }else{ imgid_before=""; imgid_after=rows[index+1].id; } }else if(index==rows.length-1){ //最后一张图片 imgid_before=rows[index-1].id; imgid_after=""; }else{ //中间 imgid_before=rows[index-1].id; imgid_after=rows[index+1].id; } $("#imgid_before").val(imgid_before); $("#imgid_after").val(imgid_after); $("#imgindex").val(index); } //上一张 function toLeft(){ var imgid_before = $("#imgid_before").val(); //上一张图片id var index_before = Number($("#imgindex").val())-Number(1); //上一行index if(imgid_before==""){ alert("已经是第一张图片了!") }else{ toLeftOrRight(imgid_before,index_before); } } //下一张 function toRight(){ var imgid_after = $("#imgid_after").val(); //下一张图片id var index_after = Number($("#imgindex").val())+Number(1); //下一行index if(imgid_after==""){ alert("已经最后一张图片了!") }else{ toLeftOrRight(imgid_after,index_after); } } function operformatter(value,row,index) { return "<a href=\"javascript:delAttach('"+ row.id +"')\">" + "删除" +"</a>"; } function delAttach(id){ var rows = $('#assetTable').datagrid('getData').rows; for ( var i = 0; i < rows.length; i++) { if(id == rows[i].id){ $('#assetTable').datagrid('deleteRow',i); } } } //---------- 多图片+预览功能结束(弹出层:plugin/dialog) -----Autohr:li_hao-----------------------------