对layui的动态表格以及弹出层进行js封装，简化代码

最新推荐文章于 2022-07-01 11:10:04 发布

不恋水的雨

最新推荐文章于 2022-07-01 11:10:04 发布

阅读量1.3k

点赞数 2

分类专栏： js layui 文章标签： js

本文链接：https://blog.csdn.net/qq_36635569/article/details/106354765

版权

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

layui

5 篇文章 0 订阅

订阅专栏

先看一下页面的效果：

页面中包含查询条件，以及操作按钮，如果用layui的js来写，一个页面还好，页面一多，代码就有大量重复，看上去也不够简洁，下面是使用自己封装的js代码写的表格初始化：

调用模板代码示例：

//这些参数是自定义的参数，也可以传入layui的table参数，也会生效
LAY_UTIL.loadTable({
        //table
        $select: "#table",
        //后台返回数据接口url
        url:'${basePath}/leave/getPageList',
        //直接绑定查询按钮，点击刷新表格，也可以调用LAY_UTIL.refreshTable("#table")来刷新
        queryBtn:'#search',
        //绑定工具栏
        toolbar: '#toolbarDemo',
        column: [[
            {type: 'checkbox'},
            {field: 'TITLE', title: '标题', width:150, sort: true},
            {field: 'REASON', title: '请假说明'},
            {field: 'LEAVE_DAYS', title: '请假天数',align:'center', width:180},
            {field: 'LEAVE_TIME', title: '请假开始日期',align:'center', width:180},
            {field: 'STATUS', title: '状态',align:'center', width:80,templet:function(d){
                var t = new Tag("span");
                if(d.STATUS == 1){
                    t.css("color","red").append("未提交");
                }else if(d.STATUS == 2){
                    t.css("color","orange").append("审批中");
                }else if(d.STATUS == 3){
                    t.css("color","green").append("审批通过");
                }else if(d.STATUS == 4){
                    t.css("color","gray").append("未通过");
                }else{
                    t.css("color","gray").append("未知状态");
                }
                return t.toString();
                }},
            {field: 'CREATE_TIME', title: '创建时间',align:'center', width:180},
            {fixed: 'right', title:'操作',align:'center', minWidth:200, toolbar: '#barDemo'}
        ]],
        //查询参数
        getQueryParameter: function(){
            return {
                status:$.trim($("#statusSearch").val()),
                reason:$.trim($("#reasonSearch").val()),
            };
        },
        //定义要绑定的行事件
        rowEvents:{
            "editLeave": editLeave,
            "deleteLeave": deleteLeave,
            "submitLeave": submitLeave,
        },
        //定义要绑定的toolbar事件
        toolbarEvents:{
            "addLeave":addLeave
        }
    });

<#assign basePath=request.contextPath>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>枚举配置</title>
    <#include "/common/header2.0.ftl" />
</head>
<body class="full">
<input type="hidden" value="${RequestParameters["id"]!}" id="iframe_id"/>
<div id="mainDiv" class="drea-full flex flex-lie" style="padding:10px;">
    <input id="addOrUpdate" type="hidden">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="complain_search">
            枚举类型:
            <div class="layui-input-inline">
                <input type="text" name="typeSearch" id="typeSearch" lay-verify="required"
                       placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            键值对:
            <div class="layui-input-inline">
                <input type="text" name="keySearch" id="keySearch" lay-verify="required"
                       placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <a id="search" class="layui-btn alertUI-skin-button">
                <i class="layui-icon">&#xe615;</i>
            </a>
        </form>
    </div>
    <table class="layui-hide" id="table" lay-filter="enumTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm alertUI-skin-button" lay-event="jumpToAdd"><i class="fa fa-plus icon-left"></i>新增</button>
        <button class="layui-btn layui-btn-sm alertUI-skin-button" lay-event="deleteMenu"><i class="fa fa-trash icon-left"></i>删除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs alertUI-skin-button" lay-event="jumpToEdit">修改</a>
</script>
</body>
<script>
    LAY_UTIL.loadTable({
        $select: "#table",
        url:'${basePath}/enum/getPageList',
        //查询按钮选择器
        queryBtn:'#search',
        toolbar: '#toolbarDemo'
        ,defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }],
        column: [[
            {type: 'checkbox'},
            {field: 'ENUM_TYPE', title: '枚举类型', width:150, sort: true},
            {field: 'TYPE_NAME', title: '类型名称', width:180, sort: true},
            {field: 'DOUBLE_KEY', title: '键值对',align:'center',
                templet:function(v){
                    return "<div style='text-align: left'>"+v.DOUBLE_KEY+"</div>";
                }},
            {fixed: 'right', title:'操作',align:'center', width:180, toolbar: '#barDemo'}
        ]],
        getQueryParameter: function(){
            return {
                typeSearch:$.trim($("#typeSearch").val()),
                keySearch:$.trim($("#keySearch").val()),
            };
        },
        rowEvents:{
            "jumpToEdit": jumpToEdit
        },
        toolbarEvents:{
            "jumpToAdd":jumpToAdd,
            "deleteMenu":deleteMenu
        }
    });

    function jumpToEdit(data){
        parent.addTbar({
            title : "修改枚举["+data.ENUM_TYPE+"]",
            url : "/enum/beforeUpdate?sec="+data.ENUM_TYPE,
            param : {parent_id:$("#iframe_id").val(),enum_type:data.ENUM_TYPE,type_name:data.TYPE_NAME},
        });
    }
    function jumpToAdd(){
        parent.addTbar({
            title : "新增枚举",
            url : "/enum/beforeAdd",
            param : {parent_id:$("#iframe_id").val()},
        });
    }
    function deleteMenu(data){
        var len=data.length;
        if(len>0){
            LAY_UTIL.confirmMessage("确定要删除吗！","提示",function(){
                var idList=[];
                for(var i=0;i<len;i++){
                    idList.push(data[i].ENUM_TYPE);
                }
                if(idList.length>0){
                    LAY_UTIL.blockAjax({
                        url:'/enum/deleteEnum',
                        data:{idList:JSON.stringify(idList)},
                        success:function(res){
                            if(res=="ok"){
                                LAY_UTIL.alertMessage("删除成功！",null,function(){
                                    LAY_UTIL.refreshTable('#table');
                                })
                            }else{
                                LAY_UTIL.alertMessage("删除失败！");
                            }
                        }
                    })
                }
            });

        }else{
            LAY_UTIL.alertMessage("请选择要删除的枚举！");
        }
    }

</script>
</html>

<#assign basePath=request.contextPath>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>参数配置</title>
    <#include "/common/header2.0.ftl" />
</head>
<body class="drea-full">
<div id="mainDiv" class="drea-full flex flex-lie" style="padding:10px;">
    <#--<blockquote class="layui-elem-quote news_search">

    </blockquote>-->
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="complain_search">
            模块名:
            <div class="layui-input-inline">
                <input type="text" name="moduleSearch" id="moduleSearch" lay-verify="required"
                       placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            参数名:
            <div class="layui-input-inline">
                <input type="text" name="nameSearch" id="nameSearch" lay-verify="required"
                       placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <a id="search" class="layui-btn alertUI-skin-button">
                <i class="layui-icon">&#xe615;</i>
            </a>
        </form>
    </div>
    <table class="layui-hide" id="table" lay-filter="settingTable"></table>
</div>
<div style="display: none" id="addDiv">
    <form id="addForm">
        <table class="table table-bordered">
            <tr>
                <td style="text-align:right">模块名</td>
                <td><input type="text" name="module" id="module" value="" readonly class="form-control input-sm" maxlength="6" />
                    <input type="hidden" id="encrypt" name="encrypt" value="0"/></td>
            </tr>
            <tr>
                <td style="text-align:right">参数名</td>
                <td><input type="text" name="name" id="name" value="" readonly class="form-control input-sm"  maxlength="18"/></td>
            </tr>
            <tr><td style="text-align:right">参数值</td>
                <td><input type="text" name="value" id="value" value="" class="form-control input-sm" maxlength="100" />
                    <input type="password" style="display: none" name="value_2" id="value_2" value="" class="form-control input-sm" maxlength="100" /></td>
            </tr>
            <tr>
                <td style="text-align:right">描述</td>
                <td><textarea type="text" name="description" rel="5" id="description" value="" class="form-control input-sm" maxlength="100"></textarea></td>
            </tr>
        </table>
    </form>
    <#--<button type="button" class="btn btn-primary btn-sm" onclick="saveSetting()"><i class="fa fa-save icon-left"></i>保存</button>
    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">关闭</button>-->
</div>
</body>
<#--<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm alertUI-skin-button" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm alertUI-skin-button" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm alertUI-skin-button" lay-event="isAll">验证是否全选</button>
    </div>
</script>-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs alertUI-skin-button" lay-event="edit">修改</a>
</script>
<script>
    LAY_UTIL.loadTable({
        $select: "#table",
        url:'${basePath}/setting/getPageList',
        queryBtn:'#search',
        toolbar: '#toolbarDemo'
        ,defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }],
        column: [[
            {type: 'checkbox'},
            {field: 'MODULE', title: '模块名', width:150, sort: true},
            {field: 'NAME', title: '参数名', width:180, sort: true},
            {field: 'VALUE', title: '参数值', width:180},
            {field: 'DESCRIPTION', title: '描述'},
            {fixed: 'right', title:'操作',align:'center', width:180, toolbar: '#barDemo'}
        ]],
        getQueryParameter: function(){
            return {
                name:$.trim($("#nameSearch").val()),
                module:$.trim($("#moduleSearch").val()),
            };
        },
        rowEvents:{
            "edit": editSetting
        },
        toolbarEvents:{
            "getCheckData":function(rows,isAll){
                console.log(rows);
            },
            "getCheckLength":function(rows,isAll){
                console.log(rows.length);
            },
            "isAll":function(rows,isAll){
                console.log(isAll);
            },
        }
    });
    function addSetting(){
        LAY_UTIL.alertUI({
            id: 'aaa',
            $select: '#addDiv',
            title: '新增参数',
            width:'360px',
            height:'400px',
            btns:[
                {"保存":saveSetting},
            ]
        })
    }
    function saveSetting(index,o){
        var name=$.trim($("#name").val());
        var module=$.trim($("#module").val());
        if(isNull(module)){
            alertMessage("模块不能为空！");
            return;
        }
        if(isNull(name)){
            alertMessage("参数名不能为空！");
            return;
        }
        LAY_UTIL.blockAjax({
            url:"${basePath}/setting/saveSetting",
            method:"post",
            data:$("#addForm").serialize(),
            success:function(res){
                if(res=="ok"){
                    LAY_UTIL.closeUI(index);
                    LAY_UTIL.alertMessage("保存成功！","提示",function(){
                        LAY_UTIL.refreshTable('#table');
                    });

                }else{
                    LAY_UTIL.alertMessage(res,"警告");
                }
            }
        })
    }
    function editSetting(data){
        LAY_UTIL.alertUI({
            id: 'aaa',
            $select: '#addDiv',
            title: '修改参数',
            width:'360px',
            height:'400px',
            btns:[
                {"保存":saveSetting},
            ],
            /*rowData: data.data,
            data中的key与form表单中的dom元素id进行映射，实现打开弹窗自动填充，无特殊逻辑时可以使用；有特殊逻辑时使用下面的beforeAlert手动设置值
            domMapping: {'MODULE':'module','NAME':'name','VALUE':'value','DESCRIPTION':'description'},*/
            beforeAlert: function(){
                $("#module").val(data.MODULE);
                $("#name").val(data.NAME);
                $("#value").val(data.VALUE);
                if(data.ENCRYPT == 1){
                    $("#value_2").val(data.REAL_VALUE);
                }
                $("#description").val(data.DESCRIPTION);
                $("#value_2").hide();
                $("#value").hide();
                if(data.ENCRYPT == 1){
                    $("#encrypt").val(1);
                    $("#value_2").show();
                }else{
                    $("#encrypt").val(0);
                    $("#value").show();
                }
            }
        })
    }

</script>
</html>

这样的代码阅读起来也非常清晰，封装的代码也非常简单，依赖jquery，如下：

var LAY_UTIL = {};
LAY_UTIL.lay_table = {};
/**
 * 表格默认配置
 * @type {{request: {limitName: string, pageName: string}, methods: string, page: boolean, limits: number[], height: number}}
 */
LAY_UTIL.tableDefaultSetting = {
    height: 450,
    page: true,
    methods:"post",
    limits:[10,20,50,100,200,300],
    request:{
        pageName: 'pageNum',
        limitName: 'pageSize'
    },
};
/**
 * 初始化一个表格
 * @param oldSet
 */
LAY_UTIL.loadTable = function(oldSet){
    var id = "table_"+new Date().getTime();
    //表格的jquery选择器表达式
    var $select = oldSet.$select;
    var $obj;
    if(($obj = $($select+"")).length === 0){
        return;
    }
    //拷贝表格默认配置
    var set = JSON.parse(JSON.stringify(LAY_UTIL.tableDefaultSetting));
    for(var k in oldSet){
        set[k] = oldSet[k];
    }
    //通过table的lay-filter属性绑定各种事件
    var layFilter = $obj.attr("lay-filter");

    var column = set.column;
    //获得表格查询参数的方法
    var getQueryParameter = set.getQueryParameter;
    //获取查询参数，如果是函数，调用函数
    var queryParameter = getQueryParameter;
    if($.isFunction(getQueryParameter)){
        queryParameter = getQueryParameter();
    }
    //查询按钮绑定事件
    var queryBtn = set.queryBtn;
    set.id = id;
    var rowEvents = set.rowEvents;
    var toolbarEvents = set.toolbarEvents;

    set.elem=$select;
    set.cols=column;
    set.where = queryParameter;
    //定义表格加载失败的回调事件
    set.error = function(e){
        showRequestError(e);
    };
    layui.use('table', function(){
        layui.table.render(set);
        //绑定操作按钮事件
        if(layFilter != null && layFilter.length > 0){
            if(rowEvents !== undefined){
                //绑定行操作按钮事件
                layui.table.on('tool('+layFilter+')', function(obj){
                    //var data = obj.data;
                    for(var eventName in rowEvents){
                        var func = rowEvents[eventName];
                        if(obj.event === eventName && $.isFunction(func)){
                            func(obj.data);
                            break;
                        }
                    }
                });
            }
            if(toolbarEvents !== undefined){
                //绑定工具栏按钮事件
                layui.table.on('toolbar('+layFilter+')', function(obj){
                    //var data = obj.data;
                    //获取选中的数据
                    var checkStatus = layui.table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    for(var eventName in toolbarEvents){
                        var func = toolbarEvents[eventName];
                        if(obj.event === eventName && $.isFunction(func)){
                            func(data,checkStatus.isAll);
                            break;
                        }
                    }
                });
            }


        }

    });
    //保存表格配置
    LAY_UTIL.lay_table[$select] = set;
    var $queryBtn ;
    if(queryBtn !== undefined && ($queryBtn = $(queryBtn+"")).length > 0){
        $queryBtn.bind('click',function(){
            LAY_UTIL.refreshTable($select);
        });
    }

};
/**
 * 刷新表格
 * @param $select
 */
LAY_UTIL.refreshTable = function($select){
    var set = LAY_UTIL.lay_table[$select];
    if(set === undefined){
        return;
    }
    var getQueryParameter = set.getQueryParameter;
    var queryParameter = getQueryParameter;
    //获取查询参数
    if($.isFunction(getQueryParameter)){
        queryParameter = getQueryParameter();
    }
    var id =set.id;
    layui.table.reload(id,{
        url: set.url,
        request:{
            pageName: 'pageNum',
            limitName: 'pageSize'
        },
        where: queryParameter,
        page: {
            //返回第一页
            curr: 1
        }
    });
};
//启用layer弹出层
layui.use('layer');
/**
 * 自定义弹出提示框
 * @param content   内容
 * @param title     标题
 * @param func      回调
 */
LAY_UTIL.alertMessage = function(content,title,func){
    var id = "id_"+new Date().getTime();
    //var a1 = {'info':'black','warn':'yellow','error':'red'};
    //var a2 = {'info':'提示','warn':'警告','error':'错误'};
    title = StringUtil.nvl(title,'提示');
    content = StringUtil.nvl(content,"");
    var contentTag = new Tag("div").attr('class','alert-title');
    contentTag.append(content);
    var index = layui.layer.open({
        //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        type: 1,
        id: id,
        //自定义皮肤
        skin:'alertUI-skin',
        title: "<div class='alert-content'>"+title+"</div>",
        area: ["360px", "160px"],
        content: contentTag.toString(),
        btn: ['确定'],
        success: function(layero, index){

        },cancel:function(){
            if($.isFunction(func)){
                func();
            }
        },btn1:function(){
            if($.isFunction(func)){
                func();
            }
            layui.layer.close(index);
        }
    });
};
/**
 * 弹出一个带表单的弹窗
 * @param set
 * @returns {s.index}
 */
LAY_UTIL.alertUI = function(set){
    if(set === undefined){
        set = {};
    }
    var id = set.id;
    if(StringUtil.isEmpty(id)){
        id = "id_"+new Date().getTime();
    }
    var title = StringUtil.nvl(set.title,'提示');
    var width = StringUtil.nvl(set.width,'360px');
    var height = StringUtil.nvl(set.height,'460px');
    //支持传入一组数据
    var rowData = set.rowData;
    //上述数据data中的key与form表单中的dom元素id进行映射，实现打开弹窗自动填充，无特殊逻辑时可以使用
    var formIds = set.domMapping;
    //弹窗前的执行
    var beforeAlert = set.beforeAlert;
    //弹窗目标
    var $select = set.$select;
    var target;
    if(StringUtil.isEmpty($select) || (target = $($select)).length === 0){
        return;
    }
    //按钮组的事件绑定
    var btns = set.btns;
    var btnArray = [];
    var callbackMap = {};
    if(btns !== undefined){
        for(var i=0;i<btns.length;i++){
            var btnObj = btns[i];
            for(var n in btnObj){
                btnArray.push(n);
                callbackMap['btn'+(i+1)] = btnObj[n];
                break;
            }
        }
    }
    var fst = {
        type: 1,
        id: id,
        skin:'alertUI-skin',
        title: "<div class='alert-content'>"+title+"</div>",
        area: [width, height],
        content: target
    };
    //添加取消按钮
    btnArray.push("取消");
    callbackMap['btn'+(btnArray.length+1)] = function(index,o){
        layui.layer.close(index);
    };
    fst.btn = btnArray;
    for(var na in callbackMap){
        fst[na] = callbackMap[na];
    }
    var form = target.find("form").eq(0);
    if(form != null && form.length > 0){
        //重置form表单
        form.reset_form();
        if(formIds !== undefined && rowData !== undefined){
            for(var cn in formIds){
                var columnName = cn;
                var domId = formIds[cn];
                form.find("#"+domId).eq(0).val(StringUtil.nvl(rowData[columnName],''));
            }
        }
    }
    if($.isFunction(beforeAlert)){
        beforeAlert();
    }
    return layui.layer.open(fst);
};
/**
 * 弹出一个确认框
 * @param content   内容
 * @param title     标题
 * @param funOK     确定回调
 * @param funcNo    取消回调
 */
LAY_UTIL.confirmMessage = function(content,title,funOK,funcNo){
    var id = "id_"+new Date().getTime();
    title = StringUtil.nvl(title,'提示');
    content = StringUtil.nvl(content,"确定要执行此操作吗？");
    var contentTag = new Tag("div").attr('class','alert-title');
    contentTag.append(content);
    layui.layer.confirm(content, {
        id: id,
        skin:'alertUI-skin',
        title: "<div class='alert-content'>"+title+"</div>",
        area: ["300px", "160px"],
        btn: ['确定', '取消'],
        btn1: function(index, layero){
            if($.isFunction(funOK)){
                funOK();
            }
            layui.layer.close(index);
        },
        btn2: function(index, layero){
            if($.isFunction(funcNo)){
                funcNo();
            }
        }
    });
};
/**
 * 显示遮罩
 * @returns {*}
 */
LAY_UTIL.showMask = function(){
    return layui.layer.load(1, {
        shade: [0.3, '#fff']
    });
};
/**
 * 根据索引关闭layui的弹出层
 * @param index 索引
 */
LAY_UTIL.closeUI = function(index){
    layui.layer.close(index);
};
/**
 * 带遮罩的ajax请求
 * @param sett
 */
LAY_UTIL.blockAjax = function(sett){
    if (sett) {
        var root = window.getRootPath();

        if(StringUtil.isEmpty(root)){
            root = "/";
        }
        var url = sett.url;
        if(url.indexOf("/") !== 0){
            url = "/" + url;
        }

        if(!StringUtil.startWidth(url,root)){

            url = root+url;
        }
        sett.url = url;
        if(sett.needSync===true){
            sett.async=false;
        }else{
            sett.async=true;
        }
        if(sett.error===undefined){
            sett.error = function(e, textStatus){
                showRequestError(e);
            }
        }
        var index = LAY_UTIL.showMask();
        sett.complete = function () {
            //关闭遮罩
            LAY_UTIL.closeUI(index);
        };

        $.ajax(sett);

    }
};
function showRequestError(e){
    if(e.readyState === 0){
        //alertMessage("连接失败！","错误");
        window.showDreaTip("连接失败！","danger");
    }else if(e.readyState !== 4){
        //alertMessage("请求失败！","错误");
        window.showDreaTip("请求失败！","danger");
    }else{
        if(e.status === 400){
            //alertMessage("请求不合法！","错误");
            window.showDreaTip("错误状态码：400","danger");
        }else if(e.status === 404){
            //alertMessage("请求的路径不存在！","错误");
            window.showDreaTip("错误状态码：404","danger");
        }else if(e.status === 500){
            //alertMessage("服务器发生错误！","错误");
            window.showDreaTip("错误状态码：500","danger");
        }else{
            //alertMessage("请求失败！","错误");
            window.showDreaTip("请求失败！","danger");
        }
    }
}

插件使用的自定义样式：


.alertUI-skin .layui-layer-btn1{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn0{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn2{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn3{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn4{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn5{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-btn6{
	border-color: #337ab7!important;
	background-color: #337ab7!important;
	color: #fff!important;
}
.alertUI-skin .layui-layer-title{
	background:#337ab7!important;
	color:white!important;
	border-top-left-radius: 2px!important;
	border-top-right-radius: 2px!important;
	border-bottom-left-radius: 8px!important;
	border-bottom-right-radius: 8px!important;
}
.alertUI-skin .layui-layer-page{
	border-radius: 8px!important;
}
.alertUI-skin .alert-title{
	width:100%;height:100%;padding:2px 12px;
}
.alertUI-skin .alert-content{
	width:100%;height:100%;font-weight: bold;
}
.alertUI-skin .layui-layer-btn-{
	padding:5px 15px 8px 15px!important;
}

.fload-plugin{position: relative;top:50%;left:0;width:9px;height:0;}
.fload-plugin> div{
	background:#337ab7 /*background: #1E9FFF*/;
}
.fload-plugin> div:hover{background: #437ab7/*#499ab7*/;}

button.alertUI-skin-button{background: #337ab7!important;}
a.alertUI-skin-button{background: #337ab7!important;}
.layui-this{background: #337ab7!important;}
.layui-this>a{background: #337ab7!important;}
.layui-nav-bar{background: #337ab7!important;}
em.layui-laypage-em{background: #337ab7!important;}
.layui-laypage>a:hover{color: #337ab7!important;}
.layui-form-checked>i{border-color: #337ab7!important;background-color: #337ab7!important;color: #fff!important;}

input[type=text]:hover{border-color: #337ab7!important;}
input[type=text]:focus{border-color: #337ab7!important;}
input[type=password]:hover{border-color: #337ab7!important;}
input[type=password]:focus{border-color: #337ab7!important;}
area:hover{border-color: #337ab7!important;}
area:focus{border-color: #337ab7!important;}

#contextmenu>li>a:hover{background-color: #337ab7!important;color:white;}

.tbar-content .selected-tbar{background:#337ab7;color:white!important;}
.tbar-content .selected-tbar i{color:white!important;}
.tbar-content .tabr-item:hover{background:#337ab7;color:white!important;}


span[lay-sort='desc']>i.layui-table-sort-desc{border-top-color:#337ab7!important;}
span[lay-sort='asc']>i.layui-table-sort-asc{border-bottom-color:#337ab7!important;}

上述代码用到了部分自定义函数，参考链接：

StringUtil：https://blog.csdn.net/qq_36635569/article/details/106398341

layui表格error回调：https://blog.csdn.net/qq_36635569/article/details/106399179

window.showDreaTip：https://blog.csdn.net/qq_36635569/article/details/106398806

不恋水的雨

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
对layui的动态表格以及弹出层进行js封装，简化代码

先看一下页面的效果：页面中包含查询条件，以及操作按钮，下面是使用自己封装的js代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.
复制链接

扫一扫