layui自定义按钮样式并自定义回调方法

先上效果

封装打开layui窗口的方法

id：打开窗口的id、url：页面的url、title：窗口的标题、btns：按钮集合（示例： [‘submit’,‘save’]）

openBtnsLayerWindow: function (id, url, title, area,btns) {
        $.ajax({
            type: "get",
            url: url,
            complete: function (xhr, textStatus) {
                if (!title) {
                    title = '提示';
                }
                if (!area) {
                    area = ['600px', '450px'];
                }
                var btnArr = getBtnArr(btns);//自定义方法 获取按钮集合 
                var layui = {
                    type: 1,
                    title: title,
                    maxmin: true,
                    area: area,
                    id: id,
                    btn:btnArr,//这里将封装好的按钮集合，传入config中
                    btnAlign: 'c',
                    content:xhr.responseText
                };
                //重点：配置每个按钮的回调方法
                for(var i=0;i<btnArr.length;i++){
                    //取到函数名
                    var btn = $(btnArr[i]);
                    var funName = btn.attr('fun');
                    //layui配置按钮顺序从1开始所以要+1
                    layui['btn' + (i+1)] = btnCallBackFun(funName);//包装回调方法 
                }
                layer.open(layui)
            }
        });
    },

获取按钮集合方法

注：这边其实可以做成完全自定义，只要按需传入按钮名、方法名、按钮图标、按钮style的json格式数据即可、当然也可以直接使用layui的自带样式。

function getBtnArr(btns,isIframe){
    var btnArr = [];
    for(var i=0;i<btns.length;i++){
         switch (btns[i]){
             case "save":
             	//其中fun参数为需要调用的方法名
                 btnArr.push('<button fun="save(\'unAudited\')" type="button" class="btn btn-success btn-sm fa fa-check save readOnlyHide"> 保存</button>');
                 break;
             case "submit":
                 btnArr.push('<button fun="save(\'audited\')" type="button" class="btn btn-primary btn-sm fa fa-send readOnlyHide" > 提交</button>');
                 break;
             case "saveAsTemplet":
                 btnArr.push('<button fun="saveAsTemplet()" type="button" class="btn btn-info btn-sm fa fa-save"> 保存为模板</button>');
                 break;
             case "changeView":
                 btnArr.push('<button fun="changeView()" type="button" class="btn btn-primary btn-sm fa fa-exchange save" > 切换视图</button>');
                 break;
         }
    }
    //关闭按钮 目前没时间研究，所以iframe跟普通窗口使用两种关闭方法。
    var closeFun = "";
    if(isIframe){
        closeFun = "closeIframeView()";
    }else{
        closeFun = "closeLayerWindow()";
    }
    btnArr.push('<button fun=' + closeFun + ' type="button" class="btn btn-default btn-sm fa fa-remove"> 关闭</button>');
    return btnArr;
}

使按钮点击后调用页面方法

//按钮回调方法 如果是iframe，第二个参数传入true
function btnCallBackFun(funName,isIframe){
    return function(index, layero){
        if(isIframe){
            //iframe嵌套页面需要选中需要执行方法的iframe 再调用方法
            window[layero.find('iframe')[0]['name']].eval(funName)
        }else{
            //不是iframe 直接调用
            eval(funName)
        }
        return false;
    };
}