• easyui多图片上传+预览切换+支持IE8


    引入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-----------------------------
  • 相关阅读:
    MySQL数据库8(四)数据表基本操作
    MYSQL 配置文件
    MySQL数据库8(三)数据库基本操作
    flink-connector-kafka consumer的topic分区分配源码
    kafka consumer assign 和 subscribe模式差异分析
    kafka 配置kerberos校验以及开启acl实践
    二路归并排序的java实现
    storm RollingTopWords 实时top-N计算任务窗口设计
    PriorityBlockingQueue优先队列的二叉堆实现
    堆排序算法的java实现
  • 原文地址:https://www.cnblogs.com/hooly/p/8040152.html
Copyright © 2020-2023  润新知