layui table 表格模板按钮实例

最新推荐文章于 2024-03-27 12:34:06 发布
最新推荐文章于 2024-03-27 12:34:06 发布
阅读量696 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yysbolg/p/9468634.html
版权

 这是个是全部的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

weixin_30642305
关注
layui 表格操作列按钮动态显示的实现方法
10-16
今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui的数据表格，自定义添加按钮且可实现动态切换
L_Augety的博客
01-25 2488
layui的数据表格，自定义添加按钮且可实现动态切换，实现不同按钮替换操作
Layui表格内使用按钮
技术分享博客
10-19 3378
这里写自定义目录标题 <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> <form class="layui-form"> <div class="layui-form-item "> <label class="layui-form-label">商品ID</label> <div class="layui-inline"
layui中表格里面添加按钮进行操作
qq_43364241的博客
09-07 5083
需要 layui 表格中添加一个打印按钮，但是直接添加发现表格里面根本调不到事件。
用layui做一个表格有添加一行按钮和删除一行按钮详细指导
黑客CN博客
12-05 2493
在上面的代码中，我们使用了table.addRow方法添加一行数据，并使用layer.confirm方法弹出确认框来提示用户是否确定要删除一行数据。2.在HTML文件中添加一个script标签，定义添加一行按钮和删除一行按钮的模板。在HTML文件中添加一个div标签，设置id为test，该div用于放置表格。最后，记得引入layui的CSS文件，否则样式可能会错乱。引入layui库和相关CSS、JS文件。
layui table 表格模板按钮的实例代码
10-16
总的来说，layui table 表格模板按钮的实例代码展示了如何在layui中创建带操作按钮的表格，这些按钮可以与后台服务进行交互，执行增删改查等操作，从而实现一个功能完备的数据管理界面。通过理解和实践这样的实例，...
layui实现根据table数据判断按钮显示情况的方法
10-16
在本篇文章中，我们将深入了解如何利用Layui框架实现一个功能，即根据表格（table）中数据的不同，动态地控制按钮（button）的显示情况。这一功能在Web开发中非常实用，特别是在处理权限管理和状态显示时，能够提供...
layui表格模板按钮实例代码详解
“layui table 表格模板按钮的实例代码” 在Web开发中，layui是一款非常流行的前端框架，它提供了丰富的组件和样式，帮助开发者快速构建美观且功能强大的页面。layui table 是layui框架中的一个核心组件，用于展示...
layui table 完整实例
热门推荐
qq_38571996的博客
09-13 1万+
1、layui 搜索 var $ = layui.$, active = { reload: function () { debugger var countyId = $("#countyId option:selected").val(); var fwzt = $...
layui.table 的使用例子
LYBWWP
09-15 1752
平台代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="layuiadmin/layui/css/layui.css"...
使用layui 渲染table数据表格的实例代码
10-18
今天小编就为大家分享一篇使用layui 渲染table数据表格的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui使用表格渲染获取行数据的例子
10-16
今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 对table中的数据进行转义的实例
12-10
方法一 通过done回调进行遍历： //方法级渲染 table.render({ id: 'demoList', elem: '#demoList' , url: 'showDemoList' , cols: [[ {checkbox: true, fixed: true, width: '10%'} , {field: 'id', title: '编号', width: '15%', sort: true} , {field: 'pipe_id', title: '机构ID', widt
layui 表格模板
微雨燕双飞
06-21 1038
t = { elem: '#factoryTable', url:AjaxUtil.constantUrl.TEST_FACTORY_LIST + "?token=" + AjaxUtil.getToken(), page: { layout: ['limit', 'count', 'prev', '...
layui数据表格模板
weixin_42134685的博客
03-17 1137
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" c...
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
最新发布
小5聊的博客
03-27 7108
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui 表单模板
qq_21810059的博客
11-22 727
<form class="layui-form" action="" lay-filter="formOption"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">学校</label>
layUI的表格案例
qq_36122157的博客
11-18 497
一：案例需要的json串 { "code": 0 ,"msg": "" ,"count": 3000000 ,"data": [{ "id": "10001" ,"username": "杜甫" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "点击...
layui table自定义模板
收集、分享
04-01 720
layui table
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值