首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 21, 2019

这是个是全部的jsp 页面：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<html>
<link rel="icon" href="../../../static/images/favicon.png" rel="external nofollow" >
<title>会员列表</title>
<link type="text/css" rel="stylesheet" href="../../../static/layui/css/layui.css" rel="external nofollow" >
<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; "></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; "></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; "></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>

效果图:

整体效果

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

搜索页:

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

添加特殊会员页:

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

充值金额页:

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

禁用效果:

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

查看会员页:

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

以上这篇layui table 表格模板按钮的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

```...简单点

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果（非swiper组件）
Sep 21 #Javascript
区块链(2) text-shadow(1) zabbix(9) 双向链表(6) location(2) http_stub_status_module(1) keeplive_timeout(1) RTMP(1) NumPy(2) TypeScript(2)
You might like
把77A收信机改造成收音机
2021/03/02 无线电
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python中super函数的用法
2017/11/17 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
浅析PEP572: 海象运算符
2019/10/15 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
这段代码难道不该打印出56吗
2013/02/27 面试题
市场部规章制度
2014/01/24 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
报到证办理个人委托书
2014/10/06 职场文书
高中班主任评语
2014/12/30 职场文书
人事局接收函
2015/01/30 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers