layui table 表格模板按鈕實例


 這是個是全部的jsp 頁面:


<%
@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png"> <title>會員列表</title> <link type="text/css" rel="stylesheet" href="../../../static/layui/css/layui.css"> <style type="text/css"> body { height: 100%; width: 100%; /*overflow: hidden;*/ background-size: cover; margin: 0 auto; } .body_bg { /*height: 1000px;;*/ text-align: center; display: block; padding-left: 15px; padding-right: 15px; } .t_title { height: 65px; font-size: 20px; display: block; /*padding: 10px;*/ text-align: left; } .t_test { background-color: white; width: 100%; } .table_scroll { height: 505px; overflow-y: auto; } td { font-size: 12px !important; } .layui-form-checkbox span { height: 30px; } .layui-field-title { border-top: 1px solid white; } table { width: 100% !important; } </style> <body> <div class="body_bg"> <!--標題--> <div class="t_title"> <fieldset class="layui-elem-field layui-field-title"> <blockquote class="layui-elem-quote"> <legend>會員列表</legend> </blockquote> </fieldset> </div> <div class="t_test"> <!--搜索 按鈕--> <div class="layui-form-item"> <!--按鈕--> <div style="padding-bottom: 10px; width:100%;height:40px"> <%-- <div class="layui-input-inline" style="width: 149px"> <button class="layui-btn" id="addLeaguerInfoCustom "> <i class="layui-icon" style="font-size: 20px; ">&#xe608;</i> 添加自定義會員 </button> </div>--%> <div class="layui-input-inline" style="width: 147px;"> <button class="layui-btn" id="addLeaguerInfoSpecial"> <i class="layui-icon" style="font-size: 20px; ">&#xe608;</i> 添加特殊會員 </button> </div> </div> <!--搜索--> <form class="layui-form"> <!-- <div class="layui-input-inline"> <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <input type="text" name="date" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> </div>--> <div class="layui-input-inline"> <input type="tel" name="searContent" autocomplete="off" placeholder="姓名/手機號" class="layui-input"> </div> </form> <div class="layui-input-inline " style="width: 90px"> <button class="layui-btn" id="searchEmailCompany" data-type="reload"> <i class="layui-icon" style="font-size: 20px; ">&#xe615;</i> 搜索 </button> </div> </div> <!--藍色分割線--> <hr class="layui-bg-blue"> <!--表格分頁--> <div class="yys-fluid yys-wrapper"> <div class="layui-row lay-col-space20"> <div class="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"> <section class="yys-body animated rotateInDownLeft"> <div class="yys-body-content clearfix changepwd"> <div class="layui-col-lg12 layui-col-md10 layui-col-sm12 layui-col-xs12" style="width:100%"> <div class="user-tables"> <table id="userTables" lay-filter="userTables"></table> </div> </div> </div> </section> </div> </div> </div> </div> </div> <script type="application/javascript" src="../../../static/layui/layui.all.js"></script> <script type="text/html" id="userbar"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="change">修改</a> {{# var statusBut= function(date){ if(date==0){ return '<a class="layui-btn layui-btn-xs" lay-event="edit">禁用</a>'; }else if(date==1){ return'<a class="layui-btn layui-btn-xs" lay-event="edit">啟用</a>'; } } }} {{ statusBut(d.status)}} <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a> </script> <script type="text/html" id="TimeTpl"> {{# var parseDate= function(date){ if(date){ var t=new Date(date); return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes(); } } }} {{parseDate(d.updateTime)}} </script> <script type="text/html" id="statusTpl"> {{# var statusTxt= function(date){ if(date==0){ return "正常"; }else if(date==1){ return ' <spng style="color:red">禁用</spng>'; } } }} {{ statusTxt(d.status)}} </script> <script> var $ = null; layui.use(["jquery", "upload", "form", "table", "layer", "element", "laydate"], function () { $ = layui.jquery; var element = layui.element, layer = layui.layer, upload = layui.upload, form = layui.form, laydate = layui.laydate, table = layui.table; //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //添加自定義會員 $("#addLeaguerInfoCustom").click(function () { var roleHtml = ''; $.post('${pageContext.request.contextPath}/leaguer/getRoleList', {}, function (data) { if (data.code == 200) { console.log(data.body) $.each(data.body, function (i, role) { console.log(role) roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>'; }) layer.open({ title: '添加普通會員', type: 1, area: ['700px', '450px'], offset: ['50px', '250px'], content: '<blockquote class="layui-elem-quote layui-text">注意事項: 請填寫相關的數據信息! </blockquote>' + '<form class="layui-form"> ' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">姓名</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerName" class="layui-input" value="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">角色</label>' + '<div class="layui-input-inline">' + '<select name="roleId" >' + '<option value="">請選擇一個角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">手機號</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerPhone" class="layui-input" value="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">客服電話</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="servicePhone" class="layui-input" value="" >' + '</div></div>' + '</div>' + '<div class="layui-form-item" style="width: 621px;">' + '<label class="layui-form-label">公司名稱</label>' + '<div class="layui-input-block">' + '<input type="text" required lay-verify="required" name="company" class="layui-input" value="" >' + '</div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">logo圖標</label>' + '<div class="layui-input-inline">' + '<div class="layui-upload">' + '<button type="button" class="layui-btn" id="logn_upload">上傳圖片</button>' + '<div class="layui-upload-list">' + '<img class="layui-upload-img" id="demo1" style=" width: 100px; height: 100px; margin-bottom: 8px;">' + '<p id="demoText"></p>' + '</div>' + '</div>' + '<input type="text" hidden name="logoUrl" value="" >' + '</div></div>' + '</div>' + '</form>', btnAlign: 'c', btn: ['確定', '取消'], yes: function (index, layero) { var str = $("input[name=isIndividual]").val(); if (str == "on") { str = "1"; } else { str = "0"; } if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") { layer.msg('請輸入姓名', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=leaguerName]").focus(); }); return false; } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") { layer.msg('請選擇角色', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=roleId]").focus(); }); return false; } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") { layer.msg('請輸入手機號', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=leaguerPhone]").focus(); }); return false; } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") { layer.msg('請輸入客服電話', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=servicePhone]").focus(); }); return false; } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") { layer.msg('請輸入企業名稱', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=company]").focus(); }); return false; } // else if ($("input[name=logoUrl]").val() == null || $("input[name=logoUrl]").val() == "") { // layer.msg('請上傳logo', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () { // $("input[name=logoUrl]").focus(); // }); // return false; // } var formData = { leaguerName: $("input[name=leaguerName]").val(), roleId: $("select[name=roleId]").val(), leaguerPhone: $("input[name=leaguerPhone]").val(), servicePhone: $("input[name=servicePhone]").val(), company: $("input[name=company]").val(), logoUrl: $("input[name=logoUrl]").val() }; console.log(formData); $.post('${pageContext.request.contextPath}/leaguer/addLeaguerCustom', formData, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg("保存失敗...", {type: 1}); } }) }, btn2: function (index, layero) { layer.msg("取消"); //return false 開啟該代碼可禁止點擊該按鈕關閉 }, cancel: function () { layer.msg("關閉窗口"); //右上角關閉回調 //return false 開啟該代碼可禁止點擊該按鈕關閉 }, success: function () { layui.use('form', function () { var form = layui.form; //只有執行了這一步,部分表單元素才會修飾成功 form.render('checkbox'); form.render('select'); form.on('checkbox(istrue)', function (data) { /* if(data.elem.checked){ emailConfig['isenterprise']=1; }; //是否被選中,true或者false*/ }); //普通圖片上傳 var uploadInst = upload.render({ elem: '#logn_upload' , url: '/leaguer/upload/headImg' , before: function (obj) { //預讀本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片鏈接(base64) }); } , done: function (res) { //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } if (res.code == 0) { $("input[name=logoUrl]").val(res.data.src); //do something (比如將res返回的圖片鏈接保存到表單的隱藏域) } //上傳成功 } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); }); } }); } else { layer.msg("獲取角色失敗...", {type: 1}); } }) return; }) //添加特殊會員 $("#addLeaguerInfoSpecial").click(function () { var roleHtml = ''; $.post('${pageContext.request.contextPath}/leaguer/getRoleList', {}, function (data) { if (data.code == 200) { console.log(data.body) $.each(data.body, function (i, role) { console.log(role) if (role.id !=1) { roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>'; } }) layer.open({ title: '添加特殊會員', type: 1, area: ['700px', '450px'], offset: ['50px', '250px'], content: '<blockquote class="layui-elem-quote layui-text">注意事項: 請填寫相關的數據信息! </blockquote>' + '<form class="layui-form"> ' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">姓名</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerName" class="layui-input" value="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">角色</label>' + '<div class="layui-input-inline">' + '<select name="roleId" >' + '<option value="">請選擇一個角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">手機號</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerPhone" class="layui-input" value="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">客服電話</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="servicePhone" class="layui-input" value="" >' + '</div></div>' + '</div>' + '<div class="layui-form-item" style="width: 621px;">' + '<label class="layui-form-label">公司名稱</label>' + '<div class="layui-input-block">' + '<input type="text" required lay-verify="required" name="company" class="layui-input" value="" >' + '</div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">logo圖標</label>' + '<div class="layui-input-inline">' + // '<input type="text" required lay-verify="required" name="type" class="layui-input" value="" >' + '<div class="layui-upload">' + ' <button type="button" class="layui-btn" id="logn_upload">上傳圖片</button>' + ' <div class="layui-upload-list">' + ' <img class="layui-upload-img" id="demo1" src="../../../static/upload/user/headImage/leibao.png" style=" width: 100px; height: 100px; margin-bottom: 8px;">' + '<p id="demoText"></p>' + ' </div>' + ' </div>' + '<input type="text" hidden name="logoUrl" value="" >' + '</div></div>' + '</div>' + '</form>', btnAlign: 'c', btn: ['確定', '取消'], yes: function (index, layero) { var str = $("input[name=isIndividual]").val(); if (str == "on") { str = "1"; } else { str = "0"; } if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") { layer.msg('請輸入姓名', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6, }, function () { $("input[name=leaguerName]").focus(); }); return false; } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") { layer.msg('請選擇角色', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6, }, function () { $("input[name=roleId]").focus(); }); return false; } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") { layer.msg('請輸入手機號', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6, }, function () { $("input[name=leaguerPhone]").focus(); }); return false; } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") { layer.msg('請輸入客服電話', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6, }, function () { $("input[name=servicePhone]").focus(); }); return false; } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") { layer.msg('請輸入企業名稱', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6, }, function () { $("input[name=company]").focus(); }); return false; } var formData = { leaguerName: $("input[name=leaguerName]").val(), roleId: $("select[name=roleId]").val(), leaguerPhone: $("input[name=leaguerPhone]").val(), servicePhone: $("input[name=servicePhone]").val(), company: $("input[name=company]").val(), logoUrl: $("input[name=logoUrl]").val() }; console.log(formData); $.post('${pageContext.request.contextPath}/leaguer/addLeaguerSpecial', formData, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg("保存失敗...", {type: 1}); } }) }, btn2: function (index, layero) { layer.msg("取消"); //return false 開啟該代碼可禁止點擊該按鈕關閉 }, cancel: function () { layer.msg("關閉窗口"); //右上角關閉回調 //return false 開啟該代碼可禁止點擊該按鈕關閉 }, success: function () { layui.use('form', function () { var form = layui.form; //只有執行了這一步,部分表單元素才會修飾成功 form.render('checkbox'); form.render('select'); form.on('checkbox(istrue)', function (data) { /* if(data.elem.checked){ emailConfig['isenterprise']=1; }; //是否被選中,true或者false*/ }); //普通圖片上傳 var uploadInst = upload.render({ elem: '#logn_upload' , url: '/leaguer/upload/headImg' , before: function (obj) { //預讀本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片鏈接(base64) }); } , done: function (res) { //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } if (res.code == 0) { $("input[name=logoUrl]").val(res.data.src); //do something (比如將res返回的圖片鏈接保存到表單的隱藏域) } //上傳成功 } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); }); } }); } else { layer.msg("獲取角色失敗...", {type: 1}); } }) return; }) //表格加載 var a = table.render({ elem: "#userTables", skin: 'line', //行邊框風格 cols: [[ // {checkbox: false, width: 60, fixed: true}, {type: 'numbers', title: '序號', width: '30'}, { field: "leaguerName", width: 90, title: "姓名", align: "left" }, { field: "leaguerPhone", width: 130, title: "手機號", align: "left" }, { field: "balanceMoney", width: 100, title: "余額(元)", align: "left" }, { field: "company", width: 120, title: "公司名稱", align: "left" }, { field: "status", width: 60, title: "狀態", align: "left", templet: '#statusTpl' }, { field: "title", width: 120, title: "角色", align: "left" }, { field: "updateTime", width: 140, title: "更新時間", align: "left", templet: '#TimeTpl' }, { title: "常用操作", width: 200, align: "left", toolbar: "#userbar", fixed: "right" } ]], url: "/leaguer/getLeaguerInfoList?t="+new Date(), // data: userData, page: { //分頁設定 layout: ['count', 'prev', 'page', 'next'] //自定義分頁布局 , curr: 1 //設定初始在第 1 頁 , limit: 10//每頁多少數據 , groups: 5 //只顯示 5 個連續頁碼 }, even: true }); //表格按鈕監聽 table.on("tool(userTables)", function (e) { var leaguerDate = e.data; // console.log(leaguerDate); if (e.event === "edit" && leaguerDate.status == 0) { var formData = { leaguerId: leaguerDate.leaguerId, status: 1 }; $.post('/leaguer/setLeaguerStatus', formData, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); // layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg(data.message, {type: 1}); } }) } if (e.event === "edit" && leaguerDate.status == 1) { var formData = { leaguerId: leaguerDate.leaguerId, status: 0 }; $.post('/leaguer/setLeaguerStatus', formData, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); // layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg(data.message, {type: 1}); } }) } if (e.event === "detail") { var formData5 = { leaguerId: leaguerDate.leaguerId }; $.post('/leaguer/getLeaguerInfoById', formData5, function (data) { var json = eval(data); var mapDate = data.body; console.log(data); if (data.code == 200) { var leaguer = data.body.leaguer; console.log(data.body) var roleHtml = ''; $.each(data.body.roleList, function (i, role) { console.log(role); if (leaguer.roleId == role.id) { roleHtml = roleHtml + '<option value="' + role.id + '" selected="">' + role.title + '</option>'; } else { if (role.id == 2 || role.id == 3) { roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>'; } } }) layer.open({ title: '查看會員', type: 1, area: ['700px', '450px'], offset: ['50px', '250px'], content: '<blockquote class="layui-elem-quote layui-text">注意事項: 請填寫相關的數據信息! </blockquote>' + '<form class="layui-form"> ' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">姓名</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerName" class="layui-input" value="' + undefined_data(leaguer.leaguerName) + '" disabled="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">角色</label>' + '<div class="layui-input-inline">' + '<select name="roleId" disabled="">' + '<option value="">請選擇一個角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">手機號</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerPhone" class="layui-input" value="' + undefined_data(leaguer.leaguerPhone) + '" disabled="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">客服電話</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="servicePhone" class="layui-input" value="' + undefined_data(leaguer.servicePhone) + '" disabled="" >' + '</div></div>' + '</div>' + '<div class="layui-form-item" style="width: 621px;">' + '<label class="layui-form-label">公司名稱</label>' + '<div class="layui-input-block">' + '<input type="text" required lay-verify="required" name="company" class="layui-input" value="' + undefined_data(leaguer.company) + '" disabled="">' + '</div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">logo圖標</label>' + '<div class="layui-input-inline">' + // '<input type="text" required lay-verify="required" name="type" class="layui-input" value="" >' + '<div class="layui-upload">' + // ' <button type="button" class="layui-btn" id="logn_upload">上傳圖片</button>' + ' <div class="layui-upload-list">' + ' <img class="layui-upload-img" src="' + leaguer.logoUrl + '" id="demo1" style=" width: 100px; height: 100px; margin-bottom: 8px;">' + '<p id="demoText"></p>' + ' </div>' + ' </div>' + '<input type="text" hidden name="logoUrl" value="' + leaguer.logoUrl + '" >' + '</div></div>' + '</div>' + '</form>', btnAlign: 'c', btn: ['確定'], yes: function (index, layero) { layer.close(index); }, btn2: function (index, layero) { layer.msg("取消"); //return false 開啟該代碼可禁止點擊該按鈕關閉 }, cancel: function () { layer.msg("關閉窗口"); //右上角關閉回調 //return false 開啟該代碼可禁止點擊該按鈕關閉 }, success: function () { layui.use('form', function () { var form = layui.form; //只有執行了這一步,部分表單元素才會修飾成功 form.render('checkbox'); form.render('select'); form.on('checkbox(istrue)', function (data) { /* if(data.elem.checked){ emailConfig['isenterprise']=1; }; //是否被選中,true或者false*/ }); //普通圖片上傳 var uploadInst = upload.render({ elem: '#logn_upload' , url: '/leaguer/upload/headImg' , before: function (obj) { //預讀本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片鏈接(base64) }); } , done: function (res) { //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } if (res.code == 0) { $("input[name=logoUrl]").val(res.data.src); //do something (比如將res返回的圖片鏈接保存到表單的隱藏域) } //上傳成功 } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); }); } }); } else { layer.open({ title: "查詢數據失敗" , content: "查詢數據失敗" , time: 20000 }); } }); } if (e.event === "change") { var formData4 = { leaguerId: leaguerDate.leaguerId }; $.post('/leaguer/getLeaguerInfoById', formData4, function (data) { var json = eval(data); var mapDate = data.body; console.log(data); if (data.code == 200) { var leaguer = data.body.leaguer; console.log(data.body) var roleHtml = ''; $.each(data.body.roleList, function (i, role) { console.log(role); if (leaguer.roleId == role.id) { roleHtml = roleHtml + '<option value="' + role.id + '" selected="">' + role.title + '</option>'; } else { if (role.id == 2 || role.id == 3) { roleHtml = roleHtml + '<option value="' + role.id + '">' + role.title + '</option>'; } } }) layer.open({ title: '修改會員', type: 1, area: ['700px', '450px'], offset: ['50px', '250px'], content: '<blockquote class="layui-elem-quote layui-text">注意事項: 請填寫相關的數據信息! </blockquote>' + '<form class="layui-form"> ' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">姓名</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerName" class="layui-input" value="' + undefined_data(leaguer.leaguerName) + '" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">角色</label>' + '<div class="layui-input-inline">' + '<select name="roleId" >' + '<option value="">請選擇一個角色</option>' + roleHtml + '</select>' + '</div></div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">手機號</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerPhone" class="layui-input" value="' + undefined_data(leaguer.leaguerPhone) + '" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">客服電話</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="servicePhone" class="layui-input" value="' + undefined_data(leaguer.servicePhone) + '" >' + '</div></div>' + '</div>' + '<div class="layui-form-item" style="width: 621px;">' + '<label class="layui-form-label">公司名稱</label>' + '<div class="layui-input-block">' + '<input type="text" required lay-verify="required" name="company" class="layui-input" value="' + undefined_data(leaguer.company) + '" >' + '</div>' + '</div>' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">logo圖標</label>' + '<div class="layui-input-inline">' + '<div class="layui-upload">' + ' <button type="button" class="layui-btn" id="logn_upload">上傳圖片</button>' + ' <div class="layui-upload-list">' + ' <img class="layui-upload-img" src="' + leaguer.logoUrl + '" id="demo1" style=" width: 100px; height: 100px; margin-bottom: 8px;">' + '<p id="demoText"></p>' + ' </div>' + ' </div>' + '<input type="text" hidden name="logoUrl" value="' + leaguer.logoUrl + '" >' + '</div></div>' + '</div>' + '</form>', btnAlign: 'c', btn: ['保存', '取消'], yes: function (index, layero) { var str = $("input[name=isIndividual]").val(); if (str == "on") { str = "1"; } else { str = "0"; } if ($("input[name=leaguerName]").val() == null || $("input[name=leaguerName]").val() == "") { layer.msg('請輸入姓名', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=leaguerName]").focus(); }); return false; } else if ($("select[name=roleId]").val() == null || $("select[name=roleId]").val() == "") { layer.msg('請選擇角色', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=roleId]").focus(); }); return false; } else if ($("input[name=leaguerPhone]").val() == null || $("input[name=leaguerPhone]").val() == "") { layer.msg('請輸入手機號', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=leaguerPhone]").focus(); }); return false; } else if ($("input[name=servicePhone]").val() == null || $("input[name=servicePhone]").val() == "") { layer.msg('請輸入客服電話', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=servicePhone]").focus(); }); return false; } else if ($("input[name=company]").val() == null || $("input[name=company]").val() == "") { layer.msg('請輸入企業名稱', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=company]").focus(); }); return false; } // else if ($("input[name=logoUrl]").val() == null || $("input[name=logoUrl]").val() == "") { // layer.msg('請上傳logo', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () { // $("input[name=logoUrl]").focus(); // }); // return false; // } var formData = { leaguerId: leaguer.leaguerId, leaguerName: $("input[name=leaguerName]").val(), roleId: $("select[name=roleId]").val(), leaguerPhone: $("input[name=leaguerPhone]").val(), servicePhone: $("input[name=servicePhone]").val(), company: $("input[name=company]").val(), logoUrl: $("input[name=logoUrl]").val() }; console.log(formData); $.post('${pageContext.request.contextPath}/leaguer/updateLeaguer', formData, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg("保存失敗...", {type: 1}); } }) }, btn2: function (index, layero) { layer.msg("取消"); //return false 開啟該代碼可禁止點擊該按鈕關閉 }, cancel: function () { layer.msg("關閉窗口"); //右上角關閉回調 //return false 開啟該代碼可禁止點擊該按鈕關閉 }, success: function () { layui.use('form', function () { var form = layui.form; //只有執行了這一步,部分表單元素才會修飾成功 form.render('checkbox'); form.render('select'); form.on('checkbox(istrue)', function (data) { /* if(data.elem.checked){ emailConfig['isenterprise']=1; }; //是否被選中,true或者false*/ }); //普通圖片上傳 var uploadInst = upload.render({ elem: '#logn_upload' , url: '/leaguer/upload/headImg' , before: function (obj) { //預讀本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片鏈接(base64) }); } , done: function (res) { //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } if (res.code == 0) { $("input[name=logoUrl]").val(res.data.src); //do something (比如將res返回的圖片鏈接保存到表單的隱藏域) } //上傳成功 } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); }); } }); } else { layer.open({ title: "查詢數據失敗" , content: "查詢數據失敗" , time: 20000 }); } }); } if (e.event === "recharge") { var formData6 = { leaguerId: leaguerDate.leaguerId }; $.post('${pageContext.request.contextPath}/leaguer/getLeaguerInfo', formData6, function (data) { console.log(data); layer.open({ title: '充值金額', type: 1, area: ['500px', '350px'], offset: ['50px', '250px'], content: '<blockquote class="layui-elem-quote layui-text">注意事項: 請填寫相關的數據信息! </blockquote>' + '<form class="layui-form"> ' + '<div class="layui-form-item">' + '<div class="layui-inline">' + '<label class="layui-form-label">姓名:</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerName" class="layui-input" value="' + data.body.leaguerName + '" disabled="">' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">手機號</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="leaguerPhone" class="layui-input" value="' + data.body.leaguerPhone + '" disabled="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">余額</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="balanceMoney" class="layui-input" value="' + data.body.balanceMoney + '" disabled="" >' + '</div></div>' + '<div class="layui-inline">' + '<label class="layui-form-label">充值余額</label>' + '<div class="layui-input-inline">' + '<input type="text" required lay-verify="required" name="money" placeholder="請輸入充值金額" class="layui-input" value="" >' + '</div></div>' + '</div>' + '</form>', btnAlign: 'c', btn: ['確定', '取消'], yes: function (index, layero) { var str = $("input[name=isIndividual]").val(); if (str == "on") { str = "1"; } else { str = "0"; } if ($("input[name=money]").val() == null || $("input[name=money]").val() == "") { layer.msg('請輸入充值金額', { icon: 5, time: 2000, area: '200px', type: 0, anim: 6 }, function () { $("input[name=money]").focus(); }); return false; } var formData9 = { money: $("input[name=money]").val(), leaguerId: leaguerDate.leaguerId }; console.log(formData9); $.post('${pageContext.request.contextPath}/leaguer/rechargeMoney', formData9, function (data) { //判斷是否發送成功 if (data.code == 200) { layer.msg(data.message); layer.close(index); parent.document.getElementById('my_iframe').contentWindow.location.reload(true); } else { layer.msg("保存失敗...", {type: 1}); } }) }, btn2: function (index, layero) { layer.msg("取消"); //return false 開啟該代碼可禁止點擊該按鈕關閉 }, cancel: function () { layer.msg("關閉窗口"); //右上角關閉回調 //return false 開啟該代碼可禁止點擊該按鈕關閉 }, success: function () { layui.use('form', function () { var form = layui.form; //只有執行了這一步,部分表單元素才會修飾成功 form.render('checkbox'); form.render('select'); form.on('checkbox(istrue)', function (data) { /* if(data.elem.checked){ emailConfig['isenterprise']=1; }; //是否被選中,true或者false*/ }); //普通圖片上傳 element.init(); }); } }) }) } }); //搜索加載--數據表格重載 var $ = layui.$, active = { reload: function () { //執行重載 table.reload('userTables', { page: { curr: 1 //重新從第 1 頁開始 } , where: { searContent: $("input[name=searContent]").val() } }); } }; $('#searchEmailCompany').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //初始化加載 element.init(); //數據表格數據undefined 替換 function undefined_data(data) { if (data == undefined || data == 'undefined' || data == null || data == "null") { return ""; } else { return data; } } }); </script> </body> </html>

 

 效果圖:

整體效果

搜索頁:

 

添加特殊會員頁:

 

充值金額頁:

禁用效果:

查看會員頁:

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com