layui table模板

 这是个是全部的jsp 页面:


<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<html>
<link rel="icon" href="../../../static/images/favicon.png">
<title>会员列表</title>
<link type="text/css" rel="stylesheet" href="../../../static/layui/css/layui.css">
<style type="text/css">
    body {
        height: 100%;
        width: 100%;
        /*overflow: hidden;*/
        background-size: cover;
        margin: 0 auto;
    }

    .body_bg {
        /*height: 1000px;;*/
        text-align: center;
        display: block;
        padding-left: 15px;
        padding-right: 15px;
    }

    .t_title {
        height: 65px;
        font-size: 20px;
        display: block;
        /*padding: 10px;*/
        text-align: left;
    }

    .t_test {
        background-color: white;
        width: 100%;

    }

    .table_scroll {
        height: 505px;
        overflow-y: auto;
    }

    td {
        font-size: 12px !important;
    }

    .layui-form-checkbox span {
        height: 30px;
    }

    .layui-field-title {
        border-top: 1px solid white;
    }

    table {
        width: 100% !important;
    }

</style>
<body>
<div class="body_bg">
    <!--标题-->
    <div class="t_title">
        <fieldset class="layui-elem-field layui-field-title">
            <blockquote class="layui-elem-quote">
                <legend>会员列表</legend>
            </blockquote>
        </fieldset>
    </div>
    <div class="t_test">
        <!--搜索  按钮-->
        <div class="layui-form-item">
            <!--按钮-->
            <div style="padding-bottom: 10px; width:100%;height:40px">
               <%-- <div class="layui-input-inline" style="width: 149px">
                    <button class="layui-btn" id="addLeaguerInfoCustom ">
                        <i class="layui-icon" style="font-size: 20px; ">&#xe608;</i> 添加自定义会员
                    </button>
                </div>--%>
                <div class="layui-input-inline" style="width: 147px;">
                    <button class="layui-btn" id="addLeaguerInfoSpecial">
                        <i class="layui-icon" style="font-size: 20px; ">&#xe608;</i> 添加特殊会员
                    </button>
                </div>

            </div>
            <!--搜索-->
            <form class="layui-form">
                <!--   <div class="layui-input-inline">
                       <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                              autocomplete="off"
                              class="layui-input">
                   </div>
                   <div class="layui-input-inline">
                       <input type="text" name="date" id="date1" lay-verify="date" placeholder="yyyy-MM-dd"
                              autocomplete="off"
                              class="layui-input">
                   </div>-->
                   <div class="layui-input-inline">
                       <input type="tel" name="searContent" autocomplete="off"
                              placeholder="姓名/手机号" class="layui-input">
                   </div>
               </form>
               <div class="layui-input-inline " style="width: 90px">
                   <button class="layui-btn" id="searchEmailCompany" data-type="reload">
                       <i class="layui-icon" style="font-size: 20px; ">&#xe615;</i> 搜索
                   </button>
               </div>
           </div>
           <!--蓝色分割线-->
        <hr class="layui-bg-blue">
        <!--表格分页-->
        <div class="yys-fluid yys-wrapper">
            <div class="layui-row lay-col-space20">
                <div class="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <section class="yys-body animated rotateInDownLeft">
                        <div class="yys-body-content clearfix changepwd">
                            <div class="layui-col-lg12 layui-col-md10 layui-col-sm12 layui-col-xs12" style="width:100%">
                                <div class="user-tables">
                                    <table id="userTables" lay-filter="userTables"></table>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript" src="../../../static/layui/layui.all.js"></script>
<script type="text/html" id="userbar">
    <a class="layui-btn  layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="change">修改</a>
    {{#
    var statusBut= function(date){
    if(date==0){
    return '<a class="layui-btn layui-btn-xs" lay-event="edit">禁用</a>';
    }else if(date==1){
    return'<a class="layui-btn layui-btn-xs" lay-event="edit">启用</a>';
    }
    }
    }}
    {{ statusBut(d.status)}}
    <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>
</script>
<script type="text/html" id="TimeTpl">
    {{#
    var parseDate= function(date){
    if(date){
    var t=new Date(date);
    return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes();
    }
    }
    }}
    {{parseDate(d.updateTime)}}
</script>
<script type="text/html" id="statusTpl">
    {{#
    var statusTxt= function(date){
    if(date==0){
    return "正常";
    }else if(date==1){
    return '
    <spng style="color:red">禁用</spng>';
    }
    }
    }}
    {{ statusTxt(d.status)}}
</script>
<script>
    var $ = null;
    layui.use(["jquery", "upload", "form", "table", "layer", "element", "laydate"], function () {
        $ = layui.jquery;
        var element = layui.element,
            layer = layui.layer,
            upload = layui.upload,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //添加自定义会员
        $("#addLeaguerInfoCustom").click(function () {
            var roleHtml = '';
            $.post('${pageContext.request.contextPath}/leaguer/getRoleList', {}, function (data) {
                if (data.code == 200) {
                    console.log(data.body)
                    $.each(data.body, function (i, role) {
                        console.log(role)
                        roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>';
                    })
                    layer.open({
                        title: '添加普通会员',
                        type: 1,
                        area: ['700px', '450px'],
                        offset: ['50px', '250px'],
                        content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                        '<form class="layui-form"> ' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">姓名</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerName"  class="layui-input" value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">角色</label>' +
                        '<div class="layui-input-inline">' +
                        '<select name="roleId" >' +
                        '<option value="">请选择一个角色</option>' +
                        roleHtml +
                        '</select>' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">手机号</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerPhone"    class="layui-input" value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">客服电话</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="servicePhone"    class="layui-input" value="" >' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item" style="width: 621px;">' +
                        '<label class="layui-form-label">公司名称</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text"  required lay-verify="required" name="company"  class="layui-input" value="" >' +
                        '</div>' +
                        '</div>' +

                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">logo图标</label>' +
                        '<div class="layui-input-inline">' +
                        '<div class="layui-upload">' +
                        '<button type="button" class="layui-btn" id="logn_upload">上传图片</button>' +
                        '<div class="layui-upload-list">' +
                        '<img class="layui-upload-img" id="demo1" style=" width: 100px; height: 100px;    margin-bottom: 8px;">' +
                        '<p id="demoText"></p>' +
                        '</div>' +
                        '</div>' +
                        '<input type="text" hidden   name="logoUrl"   value="" >' +
                        '</div></div>' +
                        '</div>' +
                        '</form>',
                        btnAlign: 'c',
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var str = $("input[name=isIndividual]").val();
                            if (str == "on") {
                                str = "1";
                            } else {
                                str = "0";
                            }
                            if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") {
                                layer.msg('请输入姓名', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=leaguerName]").focus();
                                });
                                return false;
                            } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") {
                                layer.msg('请选择角色', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=roleId]").focus();
                                });
                                return false;
                            } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") {
                                layer.msg('请输入手机号', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=leaguerPhone]").focus();
                                });
                                return false;
                            } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") {
                                layer.msg('请输入客服电话', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=servicePhone]").focus();
                                });
                                return false;
                            } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") {
                                layer.msg('请输入企业名称', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=company]").focus();
                                });
                                return false;
                            }
//                                else if ($("input[name=logoUrl]").val() == null || $("input[name=logoUrl]").val() == "") {
//                                    layer.msg('请上传logo', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
//                                        $("input[name=logoUrl]").focus();
//                                    });
//                                    return false;
//                                }


                            var formData = {
                                leaguerName: $("input[name=leaguerName]").val(),
                                roleId: $("select[name=roleId]").val(),
                                leaguerPhone: $("input[name=leaguerPhone]").val(),
                                servicePhone: $("input[name=servicePhone]").val(),
                                company: $("input[name=company]").val(),
                                logoUrl: $("input[name=logoUrl]").val()
                            };
                            console.log(formData);
                            $.post('${pageContext.request.contextPath}/leaguer/addLeaguerCustom', formData, function (data) {
                                //判断是否发送成功
                                if (data.code == 200) {
                                    layer.msg(data.message);
                                    layer.close(index);
                                    parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                                } else {
                                    layer.msg("保存失败...", {type: 1});
                                }
                            })
                        }, btn2: function (index, layero) {
                            layer.msg("取消");
                            //return false 开启该代码可禁止点击该按钮关闭
                        }, cancel: function () {
                            layer.msg("关闭窗口");
                            //右上角关闭回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        },
                        success: function () {
                            layui.use('form', function () {
                                var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
                                form.render('checkbox');
                                form.render('select');
                                form.on('checkbox(istrue)', function (data) {
                                    /* if(data.elem.checked){
                                     emailConfig['isenterprise']=1;
                                     }; //是否被选中，true或者false*/
                                });
                                //普通图片上传
                                var uploadInst = upload.render({
                                    elem: '#logn_upload'
                                    , url: '/leaguer/upload/headImg'
                                    , before: function (obj) {
                                        //预读本地文件示例，不支持ie8
                                        obj.preview(function (index, file, result) {
                                            $('#demo1').attr('src', result); //图片链接（base64）
                                        });
                                    }
                                    , done: function (res) {
                                        //如果上传失败
                                        if (res.code > 0) {
                                            return layer.msg('上传失败');
                                        }
                                        if (res.code == 0) {
                                            $("input[name=logoUrl]").val(res.data.src);
                                            //do something （比如将res返回的图片链接保存到表单的隐藏域）
                                        }
                                        //上传成功
                                    }
                                    , error: function () {
                                        //演示失败状态，并实现重传
                                        var demoText = $('#demoText');
                                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                                        demoText.find('.demo-reload').on('click', function () {
                                            uploadInst.upload();
                                        });
                                    }
                                });
                                element.init();
                            });
                        }
                    });

                } else {
                    layer.msg("获取角色失败...", {type: 1});
                }
            })
            return;
        })

        //添加特殊会员
        $("#addLeaguerInfoSpecial").click(function () {
            var roleHtml = '';
            $.post('${pageContext.request.contextPath}/leaguer/getRoleList', {}, function (data) {
                if (data.code == 200) {
                    console.log(data.body)
                    $.each(data.body, function (i, role) {
                        console.log(role)
                        if (role.id !=1) {
                            roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>';
                        }
                    })
                    layer.open({
                        title: '添加特殊会员',
                        type: 1,
                        area: ['700px', '450px'],
                        offset: ['50px', '250px'],
                        content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                        '<form class="layui-form"> ' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">姓名</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerName"  class="layui-input" value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">角色</label>' +
                        '<div class="layui-input-inline">' +
                        '<select name="roleId" >' +
                        '<option value="">请选择一个角色</option>' +
                        roleHtml +
                        '</select>' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">手机号</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerPhone"    class="layui-input" value="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">客服电话</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="servicePhone"    class="layui-input" value="" >' +
                        '</div></div>' +
                        '</div>' +
                        '<div class="layui-form-item" style="width: 621px;">' +
                        '<label class="layui-form-label">公司名称</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text"  required lay-verify="required" name="company"  class="layui-input" value="" >' +
                        '</div>' +
                        '</div>' +

                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">logo图标</label>' +
                        '<div class="layui-input-inline">' +
//                '<input type="text"  required lay-verify="required" name="type"    class="layui-input" value="" >' +

                        '<div class="layui-upload">' +
                        ' <button type="button" class="layui-btn" id="logn_upload">上传图片</button>' +
                        ' <div class="layui-upload-list">' +
                        ' <img class="layui-upload-img" id="demo1" src="../../../static/upload/user/headImage/leibao.png" style=" width: 100px; height: 100px;    margin-bottom: 8px;">' +
                        '<p id="demoText"></p>' +
                        ' </div>' +
                        ' </div>' +
                        '<input type="text" hidden   name="logoUrl"   value="" >' +
                        '</div></div>' +
                        '</div>' +
                        '</form>',
                        btnAlign: 'c',
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var str = $("input[name=isIndividual]").val();
                            if (str == "on") {
                                str = "1";
                            } else {
                                str = "0";
                            }
                            if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") {
                                layer.msg('请输入姓名', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6,
                                }, function () {
                                    $("input[name=leaguerName]").focus();
                                });
                                return false;
                            } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") {
                                layer.msg('请选择角色', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6,
                                }, function () {
                                    $("input[name=roleId]").focus();
                                });
                                return false;
                            } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") {
                                layer.msg('请输入手机号', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6,
                                }, function () {
                                    $("input[name=leaguerPhone]").focus();
                                });
                                return false;
                            } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") {
                                layer.msg('请输入客服电话', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6,
                                }, function () {
                                    $("input[name=servicePhone]").focus();
                                });
                                return false;
                            } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") {
                                layer.msg('请输入企业名称', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6,
                                }, function () {
                                    $("input[name=company]").focus();
                                });
                                return false;
                            }

                            var formData = {
                                leaguerName: $("input[name=leaguerName]").val(),
                                roleId: $("select[name=roleId]").val(),
                                leaguerPhone: $("input[name=leaguerPhone]").val(),
                                servicePhone: $("input[name=servicePhone]").val(),
                                company: $("input[name=company]").val(),
                                logoUrl: $("input[name=logoUrl]").val()
                            };
                            console.log(formData);
                            $.post('${pageContext.request.contextPath}/leaguer/addLeaguerSpecial', formData, function (data) {
                                //判断是否发送成功
                                if (data.code == 200) {
                                    layer.msg(data.message);
                                    layer.close(index);
                                    parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                                } else {
                                    layer.msg("保存失败...", {type: 1});
                                }
                            })
                        }, btn2: function (index, layero) {
                            layer.msg("取消");
                            //return false 开启该代码可禁止点击该按钮关闭
                        }, cancel: function () {
                            layer.msg("关闭窗口");
                            //右上角关闭回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        },
                        success: function () {
                            layui.use('form', function () {
                                var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
                                form.render('checkbox');
                                form.render('select');
                                form.on('checkbox(istrue)', function (data) {
                                    /* if(data.elem.checked){
                                     emailConfig['isenterprise']=1;
                                     }; //是否被选中，true或者false*/
                                });
                                //普通图片上传
                                var uploadInst = upload.render({
                                    elem: '#logn_upload'
                                    , url: '/leaguer/upload/headImg'
                                    , before: function (obj) {
                                        //预读本地文件示例，不支持ie8
                                        obj.preview(function (index, file, result) {
                                            $('#demo1').attr('src', result); //图片链接（base64）
                                        });
                                    }
                                    , done: function (res) {
                                        //如果上传失败
                                        if (res.code > 0) {
                                            return layer.msg('上传失败');
                                        }
                                        if (res.code == 0) {
                                            $("input[name=logoUrl]").val(res.data.src);
                                            //do something （比如将res返回的图片链接保存到表单的隐藏域）
                                        }
                                        //上传成功
                                    }
                                    , error: function () {
                                        //演示失败状态，并实现重传
                                        var demoText = $('#demoText');
                                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                                        demoText.find('.demo-reload').on('click', function () {
                                            uploadInst.upload();
                                        });
                                    }
                                });
                                element.init();
                            });
                        }
                    });

                } else {
                    layer.msg("获取角色失败...", {type: 1});
                }
            })
            return;
        })



        //表格加载
        var a = table.render({
            elem: "#userTables",
            skin: 'line', //行边框风格
            cols: [[
//                {checkbox: false, width: 60, fixed: true},
                {type: 'numbers', title: '序号', width: '30'},
                {
                    field: "leaguerName",
                    width: 90,
                    title: "姓名",
                    align: "left"
                },
                {
                    field: "leaguerPhone",
                    width: 130,
                    title: "手机号",
                    align: "left"
                },
                {
                    field: "balanceMoney",
                    width: 100,
                    title: "余额(元)",
                    align: "left"
                },
                {
                    field: "company",
                    width: 120,
                    title: "公司名称",
                    align: "left"
                },
                {
                    field: "status",
                    width: 60,
                    title: "状态",
                    align: "left",
                    templet: '#statusTpl'
                },
                {
                    field: "title",
                    width: 120,
                    title: "角色",
                    align: "left"
                },
                {
                    field: "updateTime",
                    width: 140,
                    title: "更新时间",
                    align: "left",
                    templet: '#TimeTpl'
                },
                {
                    title: "常用操作",
                    width: 200,
                    align: "left",
                    toolbar: "#userbar",
                    fixed: "right"
                }
            ]],
            url: "/leaguer/getLeaguerInfoList?t="+new Date(),
//          data: userData,
            page: { //分页设定
                layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , limit: 10//每页多少数据
                , groups: 5 //只显示 5 个连续页码
            },
            even: true
        });

        //表格按钮监听
        table.on("tool(userTables)", function (e) {
            var leaguerDate = e.data;
//            console.log(leaguerDate);
            if (e.event === "edit" && leaguerDate.status == 0) {
                var formData = {
                    leaguerId: leaguerDate.leaguerId,
                    status: 1
                };
                $.post('/leaguer/setLeaguerStatus', formData, function (data) {
                    //判断是否发送成功
                    if (data.code == 200) {
                        layer.msg(data.message);
//                        layer.close(index);
                        parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                    } else {
                        layer.msg(data.message, {type: 1});
                    }
                })
            }
            if (e.event === "edit" && leaguerDate.status == 1) {
                var formData = {
                    leaguerId: leaguerDate.leaguerId,
                    status: 0
                };
                $.post('/leaguer/setLeaguerStatus', formData, function (data) {
                    //判断是否发送成功
                    if (data.code == 200) {
                        layer.msg(data.message);
//                        layer.close(index);
                        parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                    } else {
                        layer.msg(data.message, {type: 1});
                    }
                })
            }
            if (e.event === "detail") {
                var formData5 = {
                    leaguerId: leaguerDate.leaguerId
                };
                $.post('/leaguer/getLeaguerInfoById', formData5, function (data) {
                    var json = eval(data);
                    var mapDate = data.body;
                    console.log(data);
                    if (data.code == 200) {
                        var leaguer = data.body.leaguer;
                        console.log(data.body)
                        var roleHtml = '';
                        $.each(data.body.roleList, function (i, role) {
                            console.log(role);
                            if (leaguer.roleId == role.id) {
                                roleHtml = roleHtml + '<option value="' + role.id + '" selected="">' + role.title + '</option>';
                            } else {
                                if (role.id == 2 || role.id == 3) {
                                    roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>';
                                }
                            }
                        })

                        layer.open({
                            title: '查看会员',
                            type: 1,
                            area: ['700px', '450px'],
                            offset: ['50px', '250px'],
                            content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                            '<form class="layui-form"> ' +
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">姓名</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="leaguerName"  class="layui-input" value="' + undefined_data(leaguer.leaguerName) + '" disabled="" >' +
                            '</div></div>' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">角色</label>' +
                            '<div class="layui-input-inline">' +
                            '<select name="roleId" disabled="">' +
                            '<option value="">请选择一个角色</option>' +
                            roleHtml +
                            '</select>' +
                            '</div></div>' +
                            '</div>' +
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">手机号</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="leaguerPhone"    class="layui-input" value="' + undefined_data(leaguer.leaguerPhone) + '" disabled="" >' +
                            '</div></div>' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">客服电话</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="servicePhone"    class="layui-input" value="' + undefined_data(leaguer.servicePhone) + '" disabled="" >' +
                            '</div></div>' +
                            '</div>' +
                            '<div class="layui-form-item" style="width: 621px;">' +
                            '<label class="layui-form-label">公司名称</label>' +
                            '<div class="layui-input-block">' +
                            '<input type="text"  required lay-verify="required" name="company"  class="layui-input" value="' + undefined_data(leaguer.company) + '"  disabled="">' +
                            '</div>' +
                            '</div>' +

                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">logo图标</label>' +
                            '<div class="layui-input-inline">' +
//                '<input type="text"  required lay-verify="required" name="type"    class="layui-input" value="" >' +

                            '<div class="layui-upload">' +
//                            ' <button type="button" class="layui-btn" id="logn_upload">上传图片</button>' +
                            ' <div class="layui-upload-list">' +
                            ' <img class="layui-upload-img" src="' + leaguer.logoUrl + '" id="demo1" style=" width: 100px; height: 100px;    margin-bottom: 8px;">' +
                            '<p id="demoText"></p>' +
                            ' </div>' +
                            ' </div>' +
                            '<input type="text" hidden   name="logoUrl"   value="' + leaguer.logoUrl + '" >' +
                            '</div></div>' +
                            '</div>' +
                            '</form>',
                            btnAlign: 'c',
                            btn: ['确定'],
                            yes: function (index, layero) {
                                layer.close(index);
                            }, btn2: function (index, layero) {
                                layer.msg("取消");
                                //return false 开启该代码可禁止点击该按钮关闭
                            }, cancel: function () {
                                layer.msg("关闭窗口");
                                //右上角关闭回调
                                //return false 开启该代码可禁止点击该按钮关闭
                            },
                            success: function () {
                                layui.use('form', function () {
                                    var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
                                    form.render('checkbox');
                                    form.render('select');
                                    form.on('checkbox(istrue)', function (data) {
                                        /* if(data.elem.checked){
                                         emailConfig['isenterprise']=1;
                                         }; //是否被选中，true或者false*/
                                    });
                                    //普通图片上传
                                    var uploadInst = upload.render({
                                        elem: '#logn_upload'
                                        , url: '/leaguer/upload/headImg'
                                        , before: function (obj) {
                                            //预读本地文件示例，不支持ie8
                                            obj.preview(function (index, file, result) {
                                                $('#demo1').attr('src', result); //图片链接（base64）
                                            });
                                        }
                                        , done: function (res) {
                                            //如果上传失败
                                            if (res.code > 0) {
                                                return layer.msg('上传失败');
                                            }
                                            if (res.code == 0) {
                                                $("input[name=logoUrl]").val(res.data.src);
                                                //do something （比如将res返回的图片链接保存到表单的隐藏域）
                                            }
                                            //上传成功

                                        }
                                        , error: function () {
                                            //演示失败状态，并实现重传
                                            var demoText = $('#demoText');
                                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                                            demoText.find('.demo-reload').on('click', function () {
                                                uploadInst.upload();
                                            });
                                        }
                                    });
                                    element.init();
                                });
                            }
                        });
                    } else {
                        layer.open({
                            title: "查询数据失败"
                            , content: "查询数据失败"
                            , time: 20000
                        });
                    }
                });
            }
            if (e.event === "change") {
                var formData4 = {
                    leaguerId: leaguerDate.leaguerId
                };
                $.post('/leaguer/getLeaguerInfoById', formData4, function (data) {
                    var json = eval(data);
                    var mapDate = data.body;
                    console.log(data);
                    if (data.code == 200) {
                        var leaguer = data.body.leaguer;
                        console.log(data.body)
                        var roleHtml = '';
                        $.each(data.body.roleList, function (i, role) {
                            console.log(role);
                            if (leaguer.roleId == role.id) {
                                roleHtml = roleHtml + '<option value="' + role.id + '" selected="">' + role.title + '</option>';
                            } else {
                                if (role.id == 2 || role.id == 3) {
                                    roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>';
                                }
                            }
                        })

                        layer.open({
                            title: '修改会员',
                            type: 1,
                            area: ['700px', '450px'],
                            offset: ['50px', '250px'],
                            content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                            '<form class="layui-form"> ' +
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">姓名</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="leaguerName"  class="layui-input" value="' + undefined_data(leaguer.leaguerName) + '" >' +
                            '</div></div>' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">角色</label>' +
                            '<div class="layui-input-inline">' +
                            '<select name="roleId" >' +
                            '<option value="">请选择一个角色</option>' +
                            roleHtml +
                            '</select>' +
                            '</div></div>' +
                            '</div>' +
                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">手机号</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="leaguerPhone"    class="layui-input" value="' + undefined_data(leaguer.leaguerPhone) + '" >' +
                            '</div></div>' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">客服电话</label>' +
                            '<div class="layui-input-inline">' +
                            '<input type="text"  required lay-verify="required" name="servicePhone"    class="layui-input" value="' + undefined_data(leaguer.servicePhone) + '" >' +
                            '</div></div>' +
                            '</div>' +
                            '<div class="layui-form-item" style="width: 621px;">' +
                            '<label class="layui-form-label">公司名称</label>' +
                            '<div class="layui-input-block">' +
                            '<input type="text"  required lay-verify="required" name="company"  class="layui-input" value="' + undefined_data(leaguer.company) + '" >' +
                            '</div>' +
                            '</div>' +

                            '<div class="layui-form-item">' +
                            '<div class="layui-inline">' +
                            '<label class="layui-form-label">logo图标</label>' +
                            '<div class="layui-input-inline">' +
                            '<div class="layui-upload">' +
                            ' <button type="button" class="layui-btn" id="logn_upload">上传图片</button>' +
                            ' <div class="layui-upload-list">' +
                            ' <img class="layui-upload-img" src="' + leaguer.logoUrl + '" id="demo1" style=" width: 100px; height: 100px;    margin-bottom: 8px;">' +
                            '<p id="demoText"></p>' +
                            ' </div>' +
                            ' </div>' +
                            '<input type="text" hidden   name="logoUrl"   value="' + leaguer.logoUrl + '" >' +
                            '</div></div>' +
                            '</div>' +
                            '</form>',
                            btnAlign: 'c',
                            btn: ['保存', '取消'],
                            yes: function (index, layero) {
                                var str = $("input[name=isIndividual]").val();
                                if (str == "on") {
                                    str = "1";
                                } else {
                                    str = "0";
                                }
                                if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") {
                                    layer.msg('请输入姓名', {
                                        icon: 5,
                                        time: 2000,
                                        area: '200px',
                                        type: 0,
                                        anim: 6
                                    }, function () {
                                        $("input[name=leaguerName]").focus();
                                    });
                                    return false;
                                } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") {
                                    layer.msg('请选择角色', {
                                        icon: 5,
                                        time: 2000,
                                        area: '200px',
                                        type: 0,
                                        anim: 6
                                    }, function () {
                                        $("input[name=roleId]").focus();
                                    });
                                    return false;
                                } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") {
                                    layer.msg('请输入手机号', {
                                        icon: 5,
                                        time: 2000,
                                        area: '200px',
                                        type: 0,
                                        anim: 6
                                    }, function () {
                                        $("input[name=leaguerPhone]").focus();
                                    });
                                    return false;
                                } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") {
                                    layer.msg('请输入客服电话', {
                                        icon: 5,
                                        time: 2000,
                                        area: '200px',
                                        type: 0,
                                        anim: 6
                                    }, function () {
                                        $("input[name=servicePhone]").focus();
                                    });
                                    return false;
                                } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") {
                                    layer.msg('请输入企业名称', {
                                        icon: 5,
                                        time: 2000,
                                        area: '200px',
                                        type: 0,
                                        anim: 6
                                    }, function () {
                                        $("input[name=company]").focus();
                                    });
                                    return false;
                                }
//                                else if ($("input[name=logoUrl]").val() == null || $("input[name=logoUrl]").val() == "") {
//                                    layer.msg('请上传logo', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
//                                        $("input[name=logoUrl]").focus();
//                                    });
//                                    return false;
//                                }


                                var formData = {
                                    leaguerId: leaguer.leaguerId,
                                    leaguerName: $("input[name=leaguerName]").val(),
                                    roleId: $("select[name=roleId]").val(),
                                    leaguerPhone: $("input[name=leaguerPhone]").val(),
                                    servicePhone: $("input[name=servicePhone]").val(),
                                    company: $("input[name=company]").val(),
                                    logoUrl: $("input[name=logoUrl]").val()
                                };
                                console.log(formData);
                                $.post('${pageContext.request.contextPath}/leaguer/updateLeaguer', formData, function (data) {
                                    //判断是否发送成功
                                    if (data.code == 200) {
                                        layer.msg(data.message);
                                        layer.close(index);
                                        parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                                    } else {
                                        layer.msg("保存失败...", {type: 1});
                                    }
                                })
                            }, btn2: function (index, layero) {
                                layer.msg("取消");
                                //return false 开启该代码可禁止点击该按钮关闭
                            }, cancel: function () {
                                layer.msg("关闭窗口");
                                //右上角关闭回调
                                //return false 开启该代码可禁止点击该按钮关闭
                            },
                            success: function () {
                                layui.use('form', function () {
                                    var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
                                    form.render('checkbox');
                                    form.render('select');
                                    form.on('checkbox(istrue)', function (data) {
                                        /* if(data.elem.checked){
                                         emailConfig['isenterprise']=1;
                                         }; //是否被选中，true或者false*/
                                    });
                                    //普通图片上传
                                    var uploadInst = upload.render({
                                        elem: '#logn_upload'
                                        , url: '/leaguer/upload/headImg'
                                        , before: function (obj) {
                                            //预读本地文件示例，不支持ie8
                                            obj.preview(function (index, file, result) {
                                                $('#demo1').attr('src', result); //图片链接（base64）
                                            });
                                        }
                                        , done: function (res) {
                                            //如果上传失败
                                            if (res.code > 0) {
                                                return layer.msg('上传失败');
                                            }
                                            if (res.code == 0) {
                                                $("input[name=logoUrl]").val(res.data.src);
                                                //do something （比如将res返回的图片链接保存到表单的隐藏域）
                                            }
                                            //上传成功

                                        }
                                        , error: function () {
                                            //演示失败状态，并实现重传
                                            var demoText = $('#demoText');
                                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                                            demoText.find('.demo-reload').on('click', function () {
                                                uploadInst.upload();
                                            });
                                        }
                                    });
                                    element.init();
                                });
                            }
                        });
                    } else {
                        layer.open({
                            title: "查询数据失败"
                            , content: "查询数据失败"
                            , time: 20000
                        });
                    }
                });
            }
            if (e.event === "recharge") {
                var formData6 = {
                    leaguerId: leaguerDate.leaguerId
                };
                $.post('${pageContext.request.contextPath}/leaguer/getLeaguerInfo', formData6, function (data) {

                    console.log(data);
                    layer.open({
                        title: '充值金额',
                        type: 1,
                        area: ['500px', '350px'],
                        offset: ['50px', '250px'],
                        content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
                        '<form class="layui-form"> ' +
                        '<div class="layui-form-item">' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">姓名:</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerName"  class="layui-input" value="' + data.body.leaguerName + '" disabled="">' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">手机号</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="leaguerPhone"    class="layui-input" value="' + data.body.leaguerPhone + '" disabled="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">余额</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="balanceMoney"  class="layui-input" value="' + data.body.balanceMoney + '" disabled="" >' +
                        '</div></div>' +
                        '<div class="layui-inline">' +
                        '<label class="layui-form-label">充值余额</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text"  required lay-verify="required" name="money" placeholder="请输入充值金额"  class="layui-input" value=""  >' +
                        '</div></div>' +
                        '</div>' +
                        '</form>',
                        btnAlign: 'c',
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var str = $("input[name=isIndividual]").val();
                            if (str == "on") {
                                str = "1";
                            } else {
                                str = "0";
                            }
                            if ($("input[name=money]").val() == null || $("input[name=money]").val() == "") {

                                layer.msg('请输入充值金额', {
                                    icon: 5,
                                    time: 2000,
                                    area: '200px',
                                    type: 0,
                                    anim: 6
                                }, function () {
                                    $("input[name=money]").focus();
                                });
                                return false;
                            }
                            var formData9 = {

                                money: $("input[name=money]").val(),
                                leaguerId: leaguerDate.leaguerId
                            };
                            console.log(formData9);
                            $.post('${pageContext.request.contextPath}/leaguer/rechargeMoney', formData9, function (data) {
                                //判断是否发送成功
                                if (data.code == 200) {
                                    layer.msg(data.message);
                                    layer.close(index);
                                    parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
                                } else {
                                    layer.msg("保存失败...", {type: 1});
                                }
                            })
                        }, btn2: function (index, layero) {
                            layer.msg("取消");
                            //return false 开启该代码可禁止点击该按钮关闭
                        }, cancel: function () {
                            layer.msg("关闭窗口");
                            //右上角关闭回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        },
                        success: function () {
                            layui.use('form', function () {
                                var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
                                form.render('checkbox');
                                form.render('select');
                                form.on('checkbox(istrue)', function (data) {
                                    /* if(data.elem.checked){
                                     emailConfig['isenterprise']=1;
                                     }; //是否被选中，true或者false*/
                                });
                                //普通图片上传
                                element.init();
                            });
                        }
                    })
                })
            }

        });

        //搜索加载--数据表格重载
        var $ = layui.$, active = {
            reload: function () {
                //执行重载
                table.reload('userTables', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        searContent: $("input[name=searContent]").val()
                    }
                });
            }
        };
        $('#searchEmailCompany').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //初始化加载
        element.init();

        //数据表格数据undefined 替换
        function undefined_data(data) {
            if (data == undefined || data == 'undefined' || data == null || data == "null") {
                return "";
            } else {
                return data;
            }
        }
    });


</script>
</body>
</html>

 
 效果图:
整体效果

搜索页:

 
添加特殊会员页:
 
充值金额页:

禁用效果:

查看会员页:

 
 
转载于:https://www.cnblogs.com/yysbolg/p/9468634.html

收起

table.render({
elem: "#test",
// id: "table_cell_data",
url: "http://localhost:3000/all",
toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器
defaultToolbar: [], //除去打印，导出
title: "用户数据表",
cols: [[ ]],
page: false,
done: function (res, curr, count) {
console.log(res.data);
merge(res);
$('tr').css({'background-color': '#009688', 'color': '#fff'});//表头样式修改
var that = this.elem.next();
console.log(this.elem)
console.log(that)
res.data.forEach(function (item, index) {
if (item.accstatus === "封禁") {
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
tr.css("background-color", "yellow");
tr.find(".laytable-cell-1-0-9").css("color","red");
}
});
}
});
效果如下图：
设置Layui表格字段的字体颜色
我们在使用layui表格对的时候，经常会有特殊字段需要显示出来，比如金额、状态……
这时候我们就需要对layui表格进行设置了，代码如下：
上面是对金额进行设置，效果如下：
这个是最简单的设置，但是当我们遇到不同状态的时候，需要对不同的状态显示出不同的颜色，这里就需要准确到单元格的设置了，想要学会它，就需要自己动手去操作了，话不多说，请看例子：
注意：举例的状态在数据库中的类型为bit型，它只有两种状态——true 或 false
设置审核状态：首先要在layui表格中指定一列，用于设置状态，代码如下：
然后就在控制器中查询出审核否，让数据显示在表格中，接着就在视图设置状态对应的样式，代码如下：
因为只是设置状态，而不是点击改变状态，所以这里就不需要在控制器中写代码，它的效果如下：
看完上面的例子，已将可以很好的了解layui是如何对状态进行简单的设置了，那么之后我们就要接触一些难点的了，比如库存警报的设置，就是获取到表格的数据，对表格中的数据进行比较，然后再根据比较出来的数据进行样式的设置，这么说也许比较难理解，那就看例子咯：老规矩先初始化，在表头设置显示列，代码如下：
接着也是在控制器中查询出字段值，然后就是最重要的判断了，代码如下：
For循环遍历整个表格的数据，然后获取当前行，对字段进行判断，最后写显示样式，代码都下完了，看看效果如何
Layui数据表格隔行变色，第一种的就是layui插件里有一个自带的方法：
even这个属性把它设置为:true,就开启了隔行毕竟颜色：
出来的效果：
插件的开启隔行背景的颜色是固定是：白色和浅灰色两种颜色交替，如果想改变颜色，但是很麻烦，要找到插件中的样式把它改变，还有考虑样式的优先性，我建议的还是你不是很熟悉插件里的东西，不要随便改变插件里的样式。
其实第二种隔行变色方法，你喜欢什么颜色就给什么颜色，它的隔行的颜色就是我们自己给的，不是固定：
done里面写的就是隔行变色的方法，颜色可以随便给它交替隔行
上面给的颜色鲜明过头啦，出来的效果有点。。。。。。。
把你们喜欢的颜色放上去就ojbk了，出来的效果肯定比我这演示的效果好。
4.layui设置table的各种背景色
添加以下内容到指定CSS文件,并引入项目即可生效
/* 偶数行背景色 /
.layui-table[lay-even] tr:nth-child(even) {
/ background-color: #aaffaa; */
background-color: #eeffee;
}
/* 鼠标指向表格时,奇数行背景颜色 */
.layui-table tbody tr:hover,.layui-table-hover {
background-color: #eeffee;
}
/* 表格头部工具栏背景色 */
.layui-table-tool {
background-color: #eeffee;
}
/* 表格头部背景色 /
th {
background-color: #359f6a; / MediumSeaGreen */
color: #fff;
font-weight: bold
}
效果如下:
4.想指定layui table中某一列隐藏

收起

layui table 表格模板按钮的实例代码

计算总价监听layui table的某一列的值，动态改变layui table的值，获取layui table某一列全部的值

layui table 表格模板按钮实例

整体效果

搜索页:

添加特殊会员页:

充值金额页:

禁用效果:

查看会员页:

layui table 字体大小_layui table指定某一行样式

layui 模板判断_layui之模板弹框

layui table 添加img_layui的table中显示图片方法

layui table分页功能

Spring boot+thymeleaf模板引擎使用layui table 渲染错误

layui导入模板数据_layui表格-template模板的三种用法

layui table toolbar 工具条事件

layui table 用法

layui table的使用方法以及基本操作

LayUI table 中添加 switch开关

layui table内嵌入select

layui table templet 显示字段外键对应名

layui导入模板数据_layui-table如何将 '嵌套子对象' 放入表格呢?

layui Table数据表格 序号自动增长

layui table 字体大小_根据状态修改layui表格显示的文字及字体颜色

layuitable 表格中时间导出excel格式不正确

layui table 数据表格 隐藏列

layui table 自动表单 隐藏id

layuitable模板

一天学完MySQL数据库

DDC_SINCOS_7S_V1_0

SAPCAR.zip

IDEA常用快捷键汇总.docx

用微服务spring cloud架构打造物联网云平台

智能停车场云平台（附vue+SpringBoot前后端项目源码）

ELF视频教程

MySQL Router 实现高可用、负载均衡、读写分离

搭建etcd集群时，报错etcd: request cluster ID mismatch错误解决，只适用于新建etcd集群或无数据集群

com.termux_102.apk

华为1+X——网络系统建设与运维（中级）

MySQL NDB Cluster 负载均衡和高可用集群

设计模式详解：Composite（组合模式）

Ruby On Rails路径遍历漏洞 CVE-2018-3760 漏洞复现

【Zookeeper】集群模式：架构设计猜想

Java进阶--编译时注解处理器（APT）详解

idea 控制台 Tomcat Catalina log 输出乱码（简单有效）

2021年中国新跨境出口B2B电商行业研究报告.pdf

Amoeba 实现 MySQL 高可用、负载均衡和读写分离

JS: map 和 weakMap

layui Table数据表格序号自动增长

layui table 数据表格隐藏列

layui table 自动表单隐藏id