给新窗口自定义按钮(基于layui)

弹窗的三个按钮
在这里插入图片描述

查看详情按钮

<div class="btn-group-sm" id="toolbar" role="group">
    <a class="btn btn-primary single disabled" onclick="audit()" shiro:hasPermission="loan:loan:audit">
        <i class="fa fa-edit"></i> 查看详情
    </a>
    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="loan:loan:export">
        <i class="fa fa-download"></i> 导出
    </a>
</div>

js方法

// 弹出层指定参数选项
function openOptions(options) {
    var _url = $.common.isEmpty(options.url) ? "/404.html" : options.url;
    var _title = $.common.isEmpty(options.title) ? "系统窗口" : options.title;
    var _width = $.common.isEmpty(options.width) ? "800" : options.width;
    var _height = $.common.isEmpty(options.height) ? ($(window).height() - 50) : options.height;
    var _btn = ['<i class="fa fa-check"></i> 确认','<i class="fa fa-close"></i> 关闭'];
    if ($.common.isEmpty(options.yes)) {
        options.yes = function(index, layero) {
            options.callBack(index, layero);
        }
    }
    if ($.common.isEmpty(options.btn2)) {
        options.btn2 = function(index, layero) {
            options.callBack2(index, layero);
            // 这里加return false,可能是调用js文件的原因,使拒绝的confirm出现时,会自动关闭弹出层
            return false;
        }
    }
    var btnCallback = {};
    if(options.btn instanceof Array){
        for (var i = 0, len = options.btn.length; i < len; i++) {
            var btn = options["btn" + (i + 1)];
            if (btn) {
                btnCallback["btn" + (i + 1)] = btn;
            }
        }
    }
    var index = layer.open({
        type: 2,
        maxmin: $.common.isEmpty(options.maxmin) ? true : options.maxmin,
        shade: 0.3,
        title: _title,
        fix: false,
        area: [_width + 'px', _height + 'px'],
        content: _url,
        shadeClose: $.common.isEmpty(options.shadeClose) ? true : options.shadeClose,
        skin: options.skin,
        btn: $.common.isEmpty(options.btn) ? _btn : options.btn,
        yes: options.yes,
        btn2: options.btn2,
        cancel: function () {
            return true;
        }
    },btnCallback);
}

// 点击查看详情调用此方法
function audit() {
    var id = $.table.selectColumns("id");
    var auditState = $.table.selectColumns("auditState");
    var url = prefix + '/audit/' + id;
    if(auditState == 0) {
        var btn = ['<i class="fa fa-check"></i> 通过', '<i class="fa fa-close"></i> 拒绝', '关闭'];
        var options = {
            title: '订单详情',
            width: "900",
            height: "600",
            url: url,
            btn: btn,
            callBack: pass,
            callBack2: refuse
        };
        this.openOptions(options);
    } else {
        var btn = ['关闭'];
        var options = {
            title: '订单详情',
            width: "900",
            height: "600",
            url: url,
            btn: btn,
            callBack: closeWindow
        };
        this.openOptions(options);
    }
}
// 通过调用此方法
function pass(index, layero) {
    var res = window["layui-layer-iframe" + index].callbackdata();
    $.modal.confirm("确定要通过此次审核吗?",function () {
        var config = {
            url: prefix + "/audit",
            type: "post",
            dataType: "json",
            data: {
                "id":res.id,
                "auditState":1,
                "remark":res.remark
            },
            beforeSend: function () {
                $.modal.loading("正在处理中,请稍后...");
                $.modal.disable();
            },
            success: function(result) {
                $.modal.close(index);
                $.operate.successCallback(result);
            }
        };
        $.ajax(config);
    });
}
// 拒绝调用此方法
function refuse(index, layero) {
    var res = window["layui-layer-iframe" + index].callbackdata();
    $.modal.confirm("确定要拒绝此次审核吗?",function () {
        var config = {
            url: prefix + "/audit",
            type: "post",
            dataType: "json",
            data: {
                "id":res.id,
                "auditState":2,
                "remark":res.remark
            },
            beforeSend: function () {
                $.modal.loading("正在处理中,请稍后...");
                $.modal.disable();
            },
            success: function(result) {
                $.modal.close(index);
                $.operate.successCallback(result);
            }
        };
        $.ajax(config);
    });
}
// 关闭弹窗
function closeWindow(index, layero) {
    $.modal.close(index);
}
var res = window["layui-layer-iframe" + index].callbackdata();
这行代码中‘callbackdata’是弹出层里面定义的函数

以下代码为弹出层的JavaScript代码,定义了函数callbackdata 用来返回值给调用弹出层的页面。

var callbackdata = function () {
    var data = {
        "id": $("#id").val(),
        "remark":$("#remark").val()
    };
    return data;
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值