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

日期：2020-11-06 栏目：程序人生浏览：次

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link href="" > <title>会员列表</title> <link type="text/css" href="" > <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>  <div> <fieldset> <blockquote> <legend>会员列表</legend> </blockquote> </fieldset> </div> <div>  <div>  <div> <%-- <div> <button> <i></i> 添加自定义会员 </button> </div>--%> <div> <button> <i></i> 添加特殊会员 </button> </div> </div>  <form>  <div> <input type="tel" autocomplete="off" placeholder="姓名/手机号"> </div> </form> <div> <button data-type="reload"> <i></i> 搜索 </button> </div> </div>  <hr>  <div> <div> <div> <section> <div> <div> <div> <table lay-filter="userTables"></table> </div> </div> </div> </section> </div> </div> </div> </div> </div> <script type="application/javascript" src=""></script> <script type="text/html"> <a lay-event="detail">查看</a> <a lay-event="change">修改</a> {{# var statusBut= function(date){ if(date==0){ return '<a lay-event="edit">禁用</a>'; }else if(date==1){ return'<a lay-event="edit">启用</a>'; } } }} {{ statusBut(d.status)}} <a lay-event="recharge">充值</a> </script> <script type="text/html"> {{# 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"> {{# var statusTxt= function(date){ if(date==0){ return "正常"; }else if(date==1){ return ' <spng>禁用</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>注意事项: 请填写相关的数据信息! </blockquote>' + '<form> ' + '<div>' + '<div>' + '<label>姓名</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '<div>' + '<label>角色</label>' + '<div>' + '<select >' + '<option value="">请选择一个角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div>' + '<div>' + '<label>手机号</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '<div>' + '<label>客服电话</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '</div>' + '<div>' + '<label>公司名称</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div>' + '</div>' + '<div>' + '<div>' + '<label>logo图标</label>' + '<div>' + '<div>' + '<button type="button">上传图片</button>' + '<div>' + '<img>' + '<p></p>' + '</div>' + '</div>' + '<input type="text" hidden 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>上传失败</span> <a>重试</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>注意事项: 请填写相关的数据信息! </blockquote>' + '<form> ' + '<div>' + '<div>' + '<label>姓名</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '<div>' + '<label>角色</label>' + '<div>' + '<select >' + '<option value="">请选择一个角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div>' + '<div>' + '<label>手机号</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '<div>' + '<label>客服电话</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div></div>' + '</div>' + '<div>' + '<label>公司名称</label>' + '<div>' + '<input type="text" required lay-verify="required" value="" >' + '</div>' + '</div>' + '<div>' + '<div>' + '<label>logo图标</label>' + '<div>' + // '<input type="text" required lay-verify="required" value="" >' + '<div>' + ' <button type="button">上传图片</button>' + ' <div>' + ' <img src="">' + '<p></p>' + ' </div>' + ' </div>' + '<input type="text" hidden 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>上传失败</span> <a>重试</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>注意事项: 请填写相关的数据信息! </blockquote>' + '<form> ' + '<div>' + '<div>' + '<label>姓名</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.leaguerName) + '" disabled="" >' + '</div></div>' + '<div>' + '<label>角色</label>' + '<div>' + '<select disabled="">' + '<option value="">请选择一个角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div>' + '<div>' + '<label>手机号</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.leaguerPhone) + '" disabled="" >' + '</div></div>' + '<div>' + '<label>客服电话</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.servicePhone) + '" disabled="" >' + '</div></div>' + '</div>' + '<div>' + '<label>公司名称</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.company) + '" disabled="">' + '</div>' + '</div>' + '<div>' + '<div>' + '<label>logo图标</label>' + '<div>' + // '<input type="text" required lay-verify="required" value="" >' + '<div>' + // ' <button type="button">上传图片</button>' + ' <div>' + ' <img src="' + leaguer.logoUrl + '">' + '<p></p>' + ' </div>' + ' </div>' + '<input type="text" hidden 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>上传失败</span> <a>重试</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>注意事项: 请填写相关的数据信息! </blockquote>' + '<form> ' + '<div>' + '<div>' + '<label>姓名</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.leaguerName) + '" >' + '</div></div>' + '<div>' + '<label>角色</label>' + '<div>' + '<select >' + '<option value="">请选择一个角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div>' + '<div>' + '<label>手机号</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.leaguerPhone) + '" >' + '</div></div>' + '<div>' + '<label>客服电话</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.servicePhone) + '" >' + '</div></div>' + '</div>' + '<div>' + '<label>公司名称</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + undefined_data(leaguer.company) + '" >' + '</div>' + '</div>' + '<div>' + '<div>' + '<label>logo图标</label>' + '<div>' + '<div>' + ' <button type="button">上传图片</button>' + ' <div>' + ' <img src="' + leaguer.logoUrl + '">' + '<p></p>' + ' </div>' + ' </div>' + '<input type="text" hidden 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>上传失败</span> <a>重试</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>注意事项: 请填写相关的数据信息! </blockquote>' + '<form> ' + '<div>' + '<div>' + '<label>姓名:</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + data.body.leaguerName + '" disabled="">' + '</div></div>' + '<div>' + '<label>手机号</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + data.body.leaguerPhone + '" disabled="" >' + '</div></div>' + '<div>' + '<label>余额</label>' + '<div>' + '<input type="text" required lay-verify="required" value="' + data.body.balanceMoney + '" disabled="" >' + '</div></div>' + '<div>' + '<label>充值余额</label>' + '<div>' + '<input type="text" required lay-verify="required" placeholder="请输入充值金额" 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>

转载注明出处：http://www.heiqu.com/5f1212a9da55e018a10e1b1e7f2e245d.html

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

相关推荐