首页
所有分类
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 相关文章推荐
遨游，飞飞，IE，空中网 浏览器无提示关闭方法
Jul 11 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
JavaScript显式数据类型转换详解
Mar 18 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
JavaScript语法约定和程序调试原理解析
Nov 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
内置函数(1) Tablespace(1) commit(1) V Rising(1) GoFrame(3) 自定义函数(1) pytz(1) procedure(1) Navicat(1) harbor(1)
You might like
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php获取数组长度的方法（有实例）
2013/10/27 PHP
php魔术变量用法实例详解
2014/11/13 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
js计数器代码
2006/11/04 Javascript
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python集合的新增元素方法整理
2020/12/07 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
Skyscanner英国：苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
文秘人员工作职责
2014/01/31 职场文书
2014年创卫实施方案
2014/02/18 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
个人收入证明范本
2015/06/12 职场文书