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

文章转载：https://www.jb51.net/article/170530.htm
今天小编就为大家分享一篇layui table 表格模板按钮的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。
这是个是全部的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; ">&#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) {//预读本地文件示例，不支持ie8obj.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) {//预读本地文件示例，不支持ie8obj.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) {//预读本地文件示例，不支持ie8obj.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) {//预读本地文件示例，不支持ie8obj.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 表格模板按钮的实例代码相关推荐

php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui table 表格设置透明
layui table 表格设置透明通过css来控制,直接上代码通过css来控制,直接上代码首先需要将table标签放入div中,div增加class名称 transparentDataTabl ...
layui table表格重载
layui table表格重载前端 <button id="selectbyCondition" data-type="reload" class=&q ...
elementU中table表格模板(拿来即用)
elementUI拿来即用的table表格模板 <!--* @Description: elment table表格* @Version: * @Autor: DYQ* @Date: 2021- ...
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
layui table 表格两种赋值方式下，data分页效果有效， url分页效果的失效问题的解决。
layui table 表格两种赋值方式下,data分页效果有效, url分页效果的失效问题的解决. 参考文章: (1)layui table 表格两种赋值方式下,data分页效果有效, url分页 ...
android 画空心矩形框,Android实现空心圆角矩形按钮的实例代码
搜索热词页面上有时会用到背景为空心圆角矩形的Button,可以通过xml绘制出来. drawrable文件夹下bg_red_hollow_rectangle.xml android:shape=&q ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
layui.table(表格)跨页多选
layui版本:2.5.4 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下. 效果演示实现思路实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id,以及当前页所有 ...
layui table 表格模板按钮的实例代码

layui table 表格模板按钮的实例代码相关推荐

最新文章

热门文章
