artDiaLog弹出插件

1 选自君南渠道云项目,参考代码 targetDate.jsp,targetDate.js,artDialog.jsp

2 artDiaLog封装

<%-- 引入artDialog --%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<link href="<%=resourceUrl%>/js/artDialog4.1.7/skins/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=resourceUrl%>/js/artDialog4.1.7/artDialog.js"></script>
<script type="text/javascript" src="<%=resourceUrl%>/js/artDialog4.1.7/plugins/iframeTools.js"></script>
<script type="text/javascript" src="<%=curUrl%>/resources/js/dk/common/json2.js"></script>
<style type="text/css">

</style>

<script>

/**
 *  弹出框
 * @param id 弹出框id
 * @param title 标题
 * @param lock 是否锁屏
 * @param opacity 透明度 默认0.3
 * @param width 宽度 640
 * @param height 高度 280
 * @param content 页面div id
 */
function openDataDialog(id,title,lock,opacity,width,height,content) {
    art.dialog({
        id: id,
        title: title,
        lock: lock,
        opacity: opacity,
        width: width,
        height: height,
        content: content
    }).show();
}

/**
* 弹出框 有是否确定按钮
* @param id 弹出框id
* @param title 标题
* @param lock 是否锁屏
* @param opacity 透明度 默认0.3
* @param width 宽度 640
* @param height 高度 280
* @param content 页面div id
* @param functionName 点击ok触发方法
* @param okValue ok按钮名称
* @param cancelValue 放弃按钮名称
 */
function openDataDialogIsOk(id,title,lock,opacity,width,height,content,functionName,okValue,cancelValue) {
    return art.dialog({
        id: id,
        title: title,
        lock: lock,
        opacity: opacity,
        width: width,
        height: height,
        content: content,
        ok: functionName,
        okVal: okValue,
        cancelVal:cancelValue,
        cancel: function () {
            art.dialog({id:id}).close();
            $(".info").hide();
        }
    }).show();
}

//弹出消息框dialog
function alertDialog(message){
    art.dialog.alert(message)
}

/**
* 弹出框  页面嵌入url页面
* @param url
* @param width
* @param height
* @param lock
* @param opacity
* @param id
* @param title
* @param okValue
* @param cancelValue
* @param functionName
 */
function urlDialog(url,width,height,lock,opacity,id,title,okValue,cancelValue,functionName){
    art.dialog.open(url, {
        id:id,
        title:title,
        width: width,
        height: height,
        lock: lock,
        opacity:opacity,
        okVal: okValue,
        ok: functionName,
        cancelVal:cancelValue,
        cancel: function () {
            art.dialog({id:id}).close()
        }
    });
}

/**
*  是否确定 操作
* @param content
* @param title
* @param okValue
* @param cancelValue
* @param functionName
 */
function artConfirm(content,title,okValue,cancelValue,functionName){
    art.dialog({
        content: content,
        title: title,
        okValue:okValue,
        cancelValue: cancelValue,
        id: 'delArt',
        lock: true,
        opacity: 0.3,
        width: 280,
        height: 100,
        ok: functionName,
        cancel: function(){
        }
    }).show();
}

function isConfirm(content,functionName){
    art.dialog.confirm(content, functionName,function () {
    });
}

/**
 * 针对审批流程待办中，操作成功后关闭弹出框
 * @param id
 * @param title
 * @param lock
 * @param opacity
 * @param width
 * @param height
 * @param content
 * @param functionName
 * @param okValue
 */
function alertCloseWindow(id,title,lock,opacity,width,height,content,functionName,okValue) {
    art.dialog({
        id: id,
        title: title,
        lock: lock,
        opacity:opacity,
        width: width,
        height: height,
        content: content,
        ok: functionName,
        okVal: okValue
    }).show();
}
/**
* 用户选择对话框
 */
function selectUsersDialog(options){
	if(!options) options={};
    if(!options.url) options.url=curUrl+"/common/configUser/index";
    if(!options.selectedUsers) options.selectedUsers=[];
    if(!options.ok) options.ok=function(){    	
    };
    if(!options.cancel) options.cancel=function(){
    	art.dialog({id:options.id}).close();
    };
    if(!options.width) options.width='82%';
    if(!options.height) options.height='75%';
    if(!options.lock) options.lock=true;
    if(!options.opacity) options.opacity=0.3;
    if(!options.id) options.id="user-"+Math.floor(Math.random()*1000);
    if(!options.title) options.title="用户选择";
    if(!options.okValue) options.okValue="确定";
    if(!options.cancelValue) options.cancelValue="取消";
    if(!options.isAuthority) options.isAuthority="";
    if(typeof(options.isCheckBox) == "undefined") options.isCheckBox=true;
    art.dialog.data('selectedUsers',JSON.stringify(options.selectedUsers));
    art.dialog.data('isCheckBox',options.isCheckBox);
    art.dialog.data('isAuthority',options.isAuthority);
    art.dialog.open(options.url, {
        id:options.id,
        title:options.title,
        width: options.width,
        height: options.height,
        lock: options.lock,
        opacity:options.opacity,
        okVal: options.okValue,
        ok: function(){
        	var rows = this.iframe.contentWindow.$("#datagrid-personnel-granding").datagrid("getRows");
        	options.ok(rows);
        },
        cancelVal:options.cancelValue,
        cancel:options.cancel
    });
}
</script>

3 使用

//弹出导入对话框
var dialog = "";
function importExcelDialog() {//title,content
    var okFunction = function () {//yes按钮
        return importExcel();
    };
    dialog = openDataDialogIsOk('importExcelDialog11', "Excel导入", true, 0.3, 'auto', 'auto', $("#importExcel")[0], okFunction, '提交', '取消');
}


//excel上传
function importExcel() {
    var fileName = $("#upload_file").val();
    if (fileName == null || "" == fileName) {
        alertDialog("请选择上传文件！");
        return false;
    } else if (fileName.indexOf(".xls") == -1) {
        alertDialog("上传文件格式必须是xls(Excel2003)！");
        return false
    }
    $.messager.progress();
    $('#importExcelForm').form('submit', {
        url: curUrl + '/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/importExcel',
        onSubmit: function () {
            return true;
        },
        success: function (data) {
            $.messager.progress('close');
            $("#upload_file").val("");
            dialog.close();//关闭窗口
            //alert("data="+data)
            var data = eval('(' + data + ')');
            var message = data.message;
            if (data.status == 1) { //导入成功,2秒后刷新页面
                setTimeout('window.location.href=curUrl+"/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/queryTargetDateList";', 2000); //上传后刷新页面，需要修改
            } else {
                //有时异常信息很多，需要滚动条
                message = '<div style="overflow-y: auto; overflow-x:hidden; width:400px;height:300px;"><img src="' + curUrl + '/resources/config/images/excelAddress.png"/><br>导入失败！<br>' + message + '</div>';//加上图片提示信息
            }
            openDataDialog("importExcelMessage", "提示信息", true, 0.3, "auto", "auto", message);
        },
        error: function () {
            alertDialog("网络传输错误，请重试");
        }
    });
    return true;
}

4 页面代码

<div id="importExcel" class="easyui-panel" style="display: none;width:500px">
    <form action="<%=curUrl%>/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/importExcel" method="post" id="importExcelForm" enctype="multipart/form-data" >
        <div style="height: 150px;">

            <table class="table2">
                <tbody>
                <tr><td colspan="2" height="30">(1)Excel模板　<a href="<%=curUrl%>/qdy/web/saleline/channellifecycle/channelsinfo/channelsinfo/downExcelModel" class="btn--md-primary">下载</a></td></tr>
                <tr>
                    <td width="20%"><label class="label_cs">(2)选择文件　</label></td>
                    <td width="75%"><input id="upload_file" name="file" type="file" class="inputxt" datatype="*"  nullmsg="全部文件" errormsg="文件不能为空"></td>
                    <!--
                    <td>
                      <div class="info">
                        <span class="Validform_checktip">名称不能为空</span>
                        <span class="dec"><s class="dec1">◆</s><s class="dec2">◆</s></span>
                      </div>
                    </td>
                    -->
                </tr>
                <tr>
                    <td colspan="2"><div id="uploadError" style="display: none;">数据校验中</div></td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

5 效果图