精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台...layui table 允许我们使用自定义的模板来显示表格。 var tableIns = table.render({ ...

    layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台数据传到所得,而是通过前端某个东西变化所得(例如说计算总价),应该怎么做呢?

    layui table 允许我们使用自定义的模板来显示表格。

     var tableIns = table.render({                                                                       //获取table的实例,后面用来做表格的刷新
            elem: '#cartTable'
            ,url:'/Zmall/cartItemListServlet'                    //数据接口                                                                            //表格左上角的功能可以自定义                                                     //表格右上方的三个按钮(导出、打印、筛选)不能编辑,只能选择是否显示
            ,limit:20                                                                                       //每一行的最多可以显示的数量
            ,page:true                                                                                      //是否开启分页
            ,cellMinWidth: 80 								//全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,cols: [
                [
                     {type:'checkbox',width:120}
                    ,{field:'id', width:200, title: '订单编号', sort: true}
                    ,{field:'goods_name', width:375, title: '商品名称', id:"goods_name"}
                    ,{field:'goods_price', width:200, title: '单价'}                                   //注意这个edit:true,表示可以被编辑                
                    ,{field:'amount', width:180, title: '数量', edit:"true"}
                    ,{field:'orderPrice',width:135 , title:'订单价格' ,templet: function(d){
                        return  parseInt(d.goods_price)*parseInt(d.amount)}}
                    ,{width:150 , title:'操作',toolbar:'#cellbarDemo'}                                            //用toolbar引入操作按钮
                ]
            ]
        	,done: function(res, curr, count){
        	    //如果是异步请求数据方式,res即为你接口返回的信息。
        	    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
        		var total_price = 0;
        		for( i=0;i<count;i++){    			
        			total_price = parseInt(res.data[i].goods_price)*parseInt(res.data[i].amount)+total_price;
        		}
        		
        	    layer.msg(total_price);
        	    $("#total_price").val(total_price);
        	    
        	    //得到当前页码
        	    console.log(curr); 
        	    
        	    //得到数据总量
    //    	    layer.msg(count);
        	  }
        });

    我们注意到,最后一个field的值,订单价格,它就不是后台数据传到的,d来获取前面的json数据,然后单价乘以数量,得到这个订单总价的。

     

    done function(res)可以帮助你在渲染表格的同时获取json数据的值,res.amount和res.price可以直接用来获取单价和数量的值,再通过for循环,遍历从0到count-1的所有data[i]的值,其实你就可以获取到所有的table里头某个单元格的数据了。

    展开全文
  • ="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 =...

     这是个是全部的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>

     

     效果图:

    整体效果

    搜索页:

     

    添加特殊会员页:

     

    充值金额页:

    禁用效果:

    查看会员页:

     

     

    转载于:https://www.cnblogs.com/yysbolg/p/9468634.html

    展开全文
  • table.render({elem: "#test",// id: "table_cell_data",url: "http://localhost:3000/all",toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器defaultToolbar: [], //除去打印,导出title: "用户数据表",cols:...

    table.render({

    elem: "#test",

    // id: "table_cell_data",

    url: "http://localhost:3000/all",

    toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器

    defaultToolbar: [], //除去打印,导出

    title: "用户数据表",

    cols: [[ ]],

    page: false,

    done: function (res, curr, count) {

    console.log(res.data);

    merge(res);

    $('tr').css({'background-color': '#009688', 'color': '#fff'});//表头样式修改

    var that = this.elem.next();

    console.log(this.elem)

    console.log(that)

    res.data.forEach(function (item, index) {

    if (item.accstatus === "封禁") {

    var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");

    tr.css("background-color", "yellow");

    tr.find(".laytable-cell-1-0-9").css("color","red");

    }

    });

    }

    });

    效果如下图:

    设置Layui表格字段的字体颜色

    我们在使用layui表格对的时候,经常会有特殊字段需要显示出来,比如金额、状态……

    这时候我们就需要对layui表格进行设置了,代码如下:

    上面是对金额进行设置,效果如下:

    这个是最简单的设置,但是当我们遇到不同状态的时候,需要对不同的状态显示出不同的颜色,这里就需要准确到单元格的设置了,想要学会它,就需要自己动手去操作了,话不多说,请看例子:

    注意:举例的状态在数据库中的类型为bit型,它只有两种状态——true 或 false

    设置审核状态:首先要在layui表格中指定一列,用于设置状态,代码如下:

    然后就在控制器中查询出审核否,让数据显示在表格中,接着就在视图设置状态对应的样式,代码如下:

    因为只是设置状态,而不是点击改变状态,所以这里就不需要在控制器中写代码,它的效果如下:

    看完上面的例子,已将可以很好的了解layui是如何对状态进行简单的设置了,那么之后我们就要接触一些难点的了,比如库存警报的设置,就是获取到表格的数据,对表格中的数据进行比较,然后再根据比较出来的数据进行样式的设置,这么说也许比较难理解,那就看例子咯:老规矩先初始化,在表头设置显示列,代码如下:

    接着也是在控制器中查询出字段值,然后就是最重要的判断了,代码如下:

    For循环遍历整个表格的数据,然后获取当前行,对字段进行判断,最后写显示样式,代码都下完了,看看效果如何

    Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法:

    even这个属性把它设置为:true,就开启了隔行毕竟颜色:

    出来的效果:

    插件的开启隔行背景的颜色是固定是:白色和浅灰色两种颜色交替,如果想改变颜色,但是很麻烦,要找到插件中的样式把它改变,还有考虑样式的优先性,我建议的还是你不是很熟悉插件里的东西,不要随便改变插件里的样式。

    其实第二种隔行变色方法,你喜欢什么颜色就给什么颜色,它的隔行的颜色就是我们自己给的,不是固定:

    done里面写的就是隔行变色的方法,颜色可以随便给它交替隔行

    上面给的颜色鲜明过头啦,出来的效果有点。。。。。。。

    把你们喜欢的颜色放上去就ojbk了,出来的效果肯定比我这演示的效果好。

    4.layui设置table的各种背景色

    添加以下内容到指定CSS文件,并引入项目即可生效

    /* 偶数行背景色 /

    .layui-table[lay-even] tr:nth-child(even) {

    / background-color: #aaffaa; */

    background-color: #eeffee;

    }

    /* 鼠标指向表格时,奇数行背景颜色 */

    .layui-table tbody tr:hover,.layui-table-hover {

    background-color: #eeffee;

    }

    /* 表格头部工具栏背景色 */

    .layui-table-tool {

    background-color: #eeffee;

    }

    /* 表格头部背景色 /

    th {

    background-color: #359f6a; / MediumSeaGreen */

    color: #fff;

    font-weight: bold

    }

    效果如下:

    4.想指定layui table中某一列隐藏

    展开全文
  • 在使用layui制作项目的时候,有时需要使用弹框...使用方法:1、2、3、layui.use(['laydate','table','form', 'layer','laytpl'], function() {var laydate = layui.laydate, table = layui.table,form = layui.form,...

    在使用layui制作项目的时候,有时需要使用弹框,而且需要在弹框里面适配数据,这样使用模板弹框就比较方便了。

    使用方法:

    1、

    2、

    3、

    layui.use(['laydate','table','form', 'layer','laytpl'], function() {

    var laydate = layui.laydate, table = layui.table,form = layui.form,layer = layui.layer, laytpl = layui.laytpl,$ = layui.$, url='/v1/gateway';

    var getTpl = edit.innerHTML;

    laytpl(getTpl).render(totaldata, function (html) {

    layer.open({

    type: 1,

    area: ['600px', '560px'], //宽高

    title: "资产信息编辑",

    content: html,

    success: function () {

    laydate.render({

    elem: '#product'

    });

    laydate.render({

    elem: '#setup'

    });

    }

    });

    });

    展开全文
  • 图片需要用到模板.templet:注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计stylelayui.use('table',function () {var table= layui.table;table.render({elem:'#needstable',url:'{:...
  • layui table分页功能

    2020-05-04 09:26:52
    使用layui提供的后台模板时,分页功能的实现是必不可少的 之前以为layui默认提供了分页功能,只需要查出所有数据返回给前端,就会自动分好页。果然是too young too naive 。。。 1.layui table在初始化时候会默认向...
  • Spring boot+thymeleaf模板引擎使用layui table 渲染错误 可以用 因为 [[]]是thymeleaf的内联表达式 1.可以在cols的后面换行 , cols: [ [ //表头 {field: ‘xxx’, title: ‘ID’, width: 80, sort: true, fixed: ...
  • 问题情境:layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,...layui table的自定义模板功能能非常方便地解决...
  • layui table toolbar 工具条事件

    千次阅读 2019-11-08 14:24:27
    layui table 添加一列工具列,放上工具按钮 语法 table.render({ cols: [[ {field:'id', title:'ID', width:100}, {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是...
  • layui table 用法

    2019-04-30 16:00:00
    1.使用模板列 改变样式 获取嵌套数据{ field: '', width: '12%', title: '响应状态', sort: true, templet: function (d) { if (d.response.status < 200) { return '<span class="ant-ta...
  • layui table的使用方法以及基本操作

    千次阅读 2020-07-28 10:36:00
    layui table用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对...
  • 首先利用layui模板table组件显示switch开关 b. 编写模板代码 c. 在js中监听switch的事件 代码 下面展示一些 内联代码片。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...
  • layui table内嵌入select

    2021-02-25 17:11:00
    layui数据表格没有支持select的参数,因此需要手动加入模板进去到td中,具体使用方法如下 HTML <script type="text/html" id="selectTool"> <select name="materialtype" lay-filter="materialtype" id=...
  • 最近练手的这个项目后台管理用到了 layuitable,遇到的问题记录一下。 按照数据库读出来我的品牌这里是 id外键值,感觉不好看,为了方便理解所以想转成对应的品牌名字(如上图)。 需要用到 layui 表格的 ...
  • nativePlace: "0" politiceStatus: "1" politiceStatusDict: "共青团员" sex: "0" sexDict: "女" //需求:将此数据填充到 layui-table 表格中************************** userName: "管理员" maxResults: 15 pageNo:...
  • layui Table数据表格 序号自动增长

    万次阅读 2018-12-27 21:43:12
    需要使用layui模板引擎: &lt;script type="text/html" id="xuhao"&gt; {{d.LAY_TABLE_INDEX+1}} &lt;/script&gt;  在table的col中写上: {title: '序号',tem...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼当表格有两个或多个不同的状态时,...如图所示:想要做到这样的效果,首先要在表头参数加上templet(自定义列模板)并给它一个名字,如代码所示:tabReceived= layuiTable.r...
  • layuitable 表格中时间导出excel是科学计数法 因为,从数据库中查的时间数据是时间戳,所以,在excel中时间表示为科学计数法。 用模板引擎来格式化时间,只是格式table中的数据,而源数据并没有改变。 通过...
  • layui table 数据表格 隐藏列

    千次阅读 2020-01-17 10:11:44
    现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧。 数据表格中保留id列,是为了编辑修改的时候获取改行...
  • layui table 自动表单 隐藏id

    千次阅读 2019-10-11 11:33:24
    现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧。 数据表格中保留id列,是为了编辑修改的时候获取改行...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 191
精华内容 76
关键字:

layuitable模板