Layui表格常用处理

最新推荐文章于 2024-05-03 10:08:27 发布
最新推荐文章于 2024-05-03 10:08:27 发布
阅读量413 收藏
点赞数 1
分类专栏： js 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42301628/article/details/108772883
版权

layUi 表格处理

1.条件搜索
2.展示图片-多图并排显示
3.图片后放大效果，
4.不同的状态显示不同的标签
5.点击弹出确认框
6.弹出弹出层
7.编辑后刷新当前页面保留条件搜索

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>BUG信息</legend>
        </fieldset>

		// 搜索条件
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">审核状态</label>
                <div class="layui-input-inline">
                    <select id="search_flag_list" lay-filter="search_status_list" lay-search="">
                        <option value="0">待审核</option>
                        <option value="1">已通过</option>
                        <option value="2">审核不过</option>
                    </select>
                </div>
                <label class="layui-form-label">条件</label>
                <div class="layui-input-inline">
                    <select id="search_game_list" lay-filter="search_status_list" lay-search="">
                        <option value="1">条件1</option>
                        <option value="2">条件2</option>
                        <option value="3">条件3</option>
                    </select>
                </div>

                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" placeholder="请输入账号" class="layui-input" id="search_account">
                </div>
              
                <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-sm" style="margin-top:4px;" id="search_btn">
                    <i class="layui-icon">&#xe615;</i> 搜索
                </a>
            </div>
            <div class="layui-form-item">
                        
                <a href="javascript:;" class="layui-btn layui-btn-sm " style="margin-top:4px;" id="pass_btn">
                    通过
                </a>

                <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-top:4px;" id="no_btn">
                    拒绝
                </a>
             </div>
        </form>
        <div class="layui-field-box">
            <table class="layui-table" id="table_list" lay-filter="table_list">
            </table>
        </div>
        <form id="bug_list_form" class="layui-form" style="display:none">
            <div class="layui-field-box">
                <table class="layui-table" id="bug_list" lay-size="lg ">
                </table>
            </div>
        </form>



        <script type="text/javascript" src="../../../js/layui/225/layui.js"></script>

        <script id="tool_bar_tmp" type="text/html">
            <a href="javascript:;" lay-event="list_bug" class="layui-btn layui-btn-sm ">提交bug详情</a>                         
                      
        </script>
	<script>
			layui.use(['form','layer','laydate','table','checkBrowser'], function() {
				var $ = layui.jquery,
                    checkBrowser = layui.checkBrowser,
					layer = layui.layer,
                    laydate = layui.laydate,
                    form = layui.form,
                    table = layui.table,
                    url =  "./bug.php?do=";

                table.on('sort(table_list)', function(obj){
                    list(obj.field, obj.type);
                });


                function list(field, order){
                    table.render({
                        elem: '#table_list',
                        cols: [[
                        {type:'checkbox'},
                            {field: 'id', title: 'id', width: 88, align: 'center'},
                            {field: 'account', title: '账号', width: 120, align: 'center'},
                            {field: 'role_name', title: '角色名', width: 180, align: 'center'},
                            {field: 'imgs', title: '图片', width: 300, align: 'center', templet: function(d){
                                var s = "<div style='display:inline-block'>";
                                    for(j = 0,len=d.imgs.length; j < len; j++) {
                                        var url = d.imgs[j].thumb_url;
                                        s += '<img src= '+url+' style="width: 50px; height: 50px ;margin: 0 5px" οnclick="showBigImage(this)" />';
                                    }   
                                s += "</div>";
                                return s;
                            }},
                            {field: 'description', title: '描述', width: 180, align: 'center'},
                            {field: 'video_link', title: '视频链接', width: 180, align: 'center'},
                            {field: 'source_game_id', title: '入口游戏id', width: 80, align: 'center',templet: function(data){
                                if (data['source_game_id'] ==3){
                                    return '<button type="button" class="layui-btn  layui-btn-sm">英语</button>';
                                }else if(data['flag'] ==9){
                                    return '<button type="button" class="layui-btn  layui-btn-sm ">西语</button>';
                                }else if(data['flag'] ==42) {
                                    return '<button type="button" class="layui-btn   layui-btn-sm ">阿语</button>';
                                }
                            }},
                            {field: 'flag', title: '审核状态', width: 180, align: 'center', templet: function(data){
                                if (data['flag'] ==0){
                                    return '<button type="button" class="layui-btn  layui-btn-sm">待审核</button>';
                                }else if(data['flag'] ==1){
                                    return '<button type="button" class="layui-btn  layui-btn-sm layui-btn-normal">通过</button>';
                                }else if(data['flag'] ==2) {
                                    return '<button type="button" class="layui-btn   layui-btn-sm layui-btn-warm">拒绝</button>';
                                }
                            }},
                            {title: '操作',  align:'center', width: 200, toolbar: '#tool_bar_tmp'},
                            {field: 'admin', title: '审核人员', width: 180, align: 'center', sort: true},
                            {field: 'player_id', title: '角色id', width: 180, align: 'center'},
                            {field: 'ip', title: 'ip', width: 120, align: 'center'},
                            {field: 'create_time', title: '创建时间', width: 180, align: 'center'},
                            {field: 'update_time', title: '更新时间', width: 180, align: 'center'},
                            {field: 'ymd', title: '创建日期', width: 180, align: 'center', sort: true}
                        ]],
                        limit: 10,
                        method: 'post',
                        url: url+'list',
                        where:{
                            field: field,
                            order: order,
                            account:  $('#search_account').val(),
                            search_flag_list: $('#search_flag_list').val(),
                            search_game_list: $('#search_game_list').val()
                        },
                        page: true,
                        id: 'table_list',
                        done: function(data){
                            
                        }
                    });
                };

    
                function bugList(player_id){
                    table.render({
                        elem: '#bug_list',
                        cols: [[
                            {field: 'imgs', title: '图片', width: 300, align: 'center', templet: function(d){
                                var s = "<div style='display:inline-block'>";
                                    for(j = 0,len=d.imgs.length; j < len; j++) {
                                        var url = d.imgs[j].thumb_url;
                                        s += '<img src= '+url+' style="width: 50px; height: 50px ;margin: 0 5px" οnclick="showBigImage(this)" />';
                                    }   
                                s += "</div>";
                                return s;
                            }},
                            {field: 'video_link', title: '视频连接', width: 180, align: 'center'},
                            {field: 'flag', title: '审核状态', width: 180, align: 'center', templet: function(data){
                                if (data['flag'] ==0){
                                    return '<button type="button" class="layui-btn  layui-btn-sm">待审核</button>';
                                }else if(data['flag'] ==1){
                                    return '<button type="button" class="layui-btn  layui-btn-sm layui-btn-normal">通过</button>';
                                }else if(data['flag'] ==2) {
                                    return '<button type="button" class="layui-btn   layui-btn-sm layui-btn-warm">拒绝</button>';
                                }
                            }},
                            {field: 'create_time', title: '上传时间', width: 180, align: 'center'},
                            {field: 'update_time', title: '更新时间', width: 120, align: 'center'},
                            {field: 'admin', title: '审核人', width: 180, align: 'center'}

                            
                        ]],
                        method: 'post',
                        url: url+'BugList',
                        where:{
                            player_id: player_id
                        },
                        id: 'list_bug',
                        done: function(data){
                            layer.open({
                                type: 1,
                                title: 'bug提交记录',
                                content: $('#bug_list_form'),
                                scrollbar: true,
                                resize: false,
                                shade: 0,
                                area: ['1000px', '600px']
                            });
                        }
                    });
                };

                table.on('tool(table_list)', function(obj){
                    var _id = obj['data']['player_id'];
                    switch(obj['event']){
                        case 'list_bug':
                            bugList(_id);
                            break;
                        default:
                            layer.msg('灵异操作');
                    }
                });

                $('#search_btn').click(function(){
                    list('id', 'desc');
                });

                $("#pass_btn").click(function(){
                    var checkStatus = table.checkStatus('table_list');
                        var ids = [];
                        $(checkStatus.data).each(function (i, o){
                            ids.push(o.id);
                        });
                        if(ids.length <1){
                            layer.msg('请选择要审核的数据');
                            return false
                        }
                        if(ids.length >1){
                            layer.msg('每次只能审核一条数据');
                            return false
                        }

                    layer.confirm('确认同意通过这条bug吗？', {
                        btn : [ '确定', '取消' ]//按钮
                    }, function(index) {
                        $.ajax({
                                type: "post",
                                data: {ids: ids[0]},
                                url: url+'Access',
                                async: true,
                                dataType: "json",
                                success: function(data) {
                                    layer.msg(data.msg,{time: 2000},function(){
                                        if(data.success){
                                            table.reload('table_list', {
                                                    page: {
                                                        curr: 1 //重新从第 1 页开始
                                                    }
                                                    , where: {//这里传参  向后台
                                                        account:  $('#search_account').val(),
                                                        search_flag_list: $('#search_flag_list').val(),
                                                        search_game_list: $('#search_game_list').val()
                                                        //可传多个参数到后台...  ，分隔
                                                    }
                                                    , url: url+'list'//后台做模糊搜索接口路径
                                                    , method: 'post'
                                                    });
                                         }
                                    });
                               
                                }
                            });
                    });
                });

                $("#no_btn").click(function(){
                    var checkStatus = table.checkStatus('table_list');
                        var ids = [];
                        $(checkStatus.data).each(function (i, o){
                            ids.push(o.id);
                        });
                        if(ids.length <1){
                            layer.msg('请选择要审核的数据');
                            return false
                        }
                        if(ids.length >1){
                            layer.msg('每次只能审核一条数据');
                            return false
                        }
                    layer.confirm('确认拒绝通过这条bug吗？', {
                        btn : [ '确定', '取消' ]//按钮
                    }, function(index) {
                        $.ajax({
                                    type: "post",
                                    data: {ids: ids[0]},
                                    url: url+'NoAccess',
                                    async: true,
                                    dataType: "json",
                                    success: function(data) {
                                        layer.msg(data.msg,{time: 2000},function(){
                                            if(data.success){
                                                table.reload('table_list', {
                                                    page: {
                                                        curr: 1 //重新从第 1 页开始
                                                    }
                                                    , where: {//这里传参  向后台
                                                        account:  $('#search_account').val(),
                                                        search_flag_list: $('#search_flag_list').val(),
                                                        search_game_list: $('#search_game_list').val()
                                                        //可传多个参数到后台...  ，分隔
                                                    }
                                                    , url: url+'list'//后台做模糊搜索接口路径
                                                    , method: 'post'
                                                    });
                                            }
                                        });
                                    }
                                });
                    });
                    console.log('nopass');
                });
                list('id', 'desc');
			});
        </script>
                <script type="text/javascript">
                    //显示大图片
                    function showBigImage(e) {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: true, //点击阴影关闭
                            area: [], //宽高
                            content: "<img src=" + $(e).attr('src') + " style='witdh:500px;height:400px;' />"
                        });
                    }
                </script>
PHPlipper
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui表格自定义显示方法，一个表格里显示两个数据
weixin_43295023的博客
05-13 1990
-layui表格代码 ,{field:'', title:'原仓库',width:110, templet: function (d) { return showWare(d.o_ware_name,d.o_ware_id); }} js代码 function showWare(res1,res2){ var str = res1+'('+res2+')'; return str; } 显示效果
layui实现添加
weixin_52994410的博客
05-14 4116
需要使用开启头部标题栏的数据表格 新增数据 1.设置添加按钮 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-sm" id="add" lay-event="add">添加</button> </div&g
LayUI数据表格的使用指南
最新发布
2301_77110865的博客
05-03 847
查询方法，查询只需要把查询条件带上，之后刷新表格，后台加载表格数据时，判断查询条件是否为null，不为null就条件查询数据返回即可。增删改查，就差一个查询了查询方法你可以同上面新增和修改方法一样用一个弹框显示查询条件也可以，也可以在表格上方定义查询表单，这里案例是在表格上方定义的查询表单。点击工具栏按钮，在控制台输出obj，可以发现，event的值，正是工具栏按钮中lay-event属性的值，可以通过他来判断点击的是哪个按钮，执行什么操作。上面是显示的单表数据，在实际开发中，常遇到关联表的数据显示。
layui table开启编辑框，使编辑框添加placeholder属性
aptx14的博客
07-14 1998
在layui table开启编辑框后，表格生成的是一个div,点击后才动态生成一个input框，这样就无法增加placeholder提示,或者点击后才可显示提示语，用户无法直观看出是否是编辑框 第一步，打开layui.js（2.6.8）（2.6之前的打开layui.all.js或者table.js）查找 r.edit && var b = ['<td data-field="' + f + '" data-key="' + m + '" ' + function ..
Layui input赋值/取值时自动换算单位
mxywxwk的博客
05-22 1340
平时项目中金额，重量等单位数据库一般用分，千克保存，而在前台展示确实用元，吨。这样在给input的赋值每次都要做单位换算很麻烦，修改了layui中form.js的代码以方便此类操作。 //路径 layui/lay/modules/form.js u.prototype.val = function (e, i) { var a = this, n = t(r + '[lay-filter="' + e + '"]'); n.each(function
Layui如何给lay-data插入按钮呢？如何通过按钮获取Id值呢？
是个非常热爱生活、乐观、奋斗、努力的逗比青年
07-06 2215
好了，写完了，如果对Layui熟悉度高的话，直接看‘精简输出部分’就好了，剩下的那些显示数据和删除或修改的逻辑就不过多的去展示出来了，主要的主题就是Layui如何给lay-data插入按钮，如何通过按钮获取Id值；大家如果觉得有什么不对的地方，望指出，愿与诸君共同学习进步！
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
除此之外，Layui表格还提供了丰富的配置选项和功能，如高度自适应（height）、标题（title）、每页条数（limit）、自定义分页布局（page）、模板（templet）以及工具栏（toolbar）等。这使得开发者能够根据需求定制...
Layui各常用组件使用方法简单示例
12-14
本资源包含Layui各常用组件的使用方法，以及如何将前端页面功能与后端服务接口进行有效对接的示例，旨在帮助开发者快速上手并灵活运用。 1. **Layui简介** Layui是一套模块化、响应式的前端框架，它以简洁、清晰的...
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
layui 是一个轻量级的前端框架，其包含丰富的组件，其中表格（table）组件是常用的一个部分。在本文中，我们将深入探讨如何使用layui table进行数据的新增、修改、删除和查询，以及如何通过双击获取行数据。 1. ...
springboot+layui实现数据表格.zip
10-24
Layui表格支持分页、排序、过滤，并且可以方便地与其他组件（如Form）配合，实现用户交互。 **数据表格功能** 数据表格是后台管理系统的核心部分，用于展示和操作大量数据。在这个项目中，Layui的表格组件结合...
layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
01-06
switch开关是layui中另一种常用的表单元素，用于呈现开/关的状态。它通常用于切换选项，而不是实现单选功能。但如果你想在表格中展示类似开关的功能，可以将列类型改为`type: 'switch'`，并自定义其行为。 总之，...
layui点击按钮添加可编辑的一行方法
10-18
今天小编就为大家分享一篇layui点击按钮添加可编辑的一行方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui使按钮居中_button按钮居中的方法
weixin_28864485的博客
01-27 9141
今天在写页面时，发现给button按钮设置居中时，css页面写了text-align="center"，但是不起作用，用了display属性也无作用，试了好多次发现要给button按钮添加个p，然后让p居中就可以了。以下写个test来说明下：p,input,button{text-align: center;}你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好...
layui 带按钮的搜索框_layUI框架下带加减按钮的数字输入框
weixin_29201859的博客
01-17 5557
layUI前端框架是现在比较流行的一款框架，其中内置的很多模块使用起来方便快捷，但是少数应用场景较少的模块没有内置其中，这个带加减按钮的数字输入框适用于购物或其他需要使用数字的场景。本扩展模块的UI风格完全基于layUI，可单独使用，也可扩展到layUI框架的扩展模块。思路：打开layUI的文档后，开头部分就写了支持扩展自定义模块，并且内置的其他模块也都可以使用。这样对于这个扩展来说就不需要从头写...
关于layui的图片显示
热门推荐
Know Destiny的博客
08-14 1万+
layui的图片展示
Layui-button
Ella_China的博客
11-07 987
Layui-button 项目过程中遇到了这个问题，思路很简单，方法也很简单，没想到花了好几个小时都没搞出来，还好最后时刻找到了问题解决办法——layui的button具有刷新页面的功能，因此：所写的jQuery方法只在点击button的一瞬起作用，所以改了无数次都以为没效果。（1）将button标签替换为< input type=‘button’ />标签；（2）替换为a标签：<a class="layui-btn layui-btn-primary"> 我要的操作 在信息展示为只
layui-ssm项目： 增加按钮添加数据
weixin_44898449的博客
11-14 600
先给添加按钮添加一个id，创建一个点击事件方法，使用layer.open()方法中的iframe来显示弹窗。
layui的表单与表格使用详解
qq_45740126的博客
07-31 2301
原文出处:https://blog.csdn.net/lamfang/article/details/89330774 一、开始前准备 到官网下载layui需要的文件 在html文件里面导入： <script src="../layui/layui.js"></script> <link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href=".....
在layui弹出层遍历展示图片和文章详情里面点击放大图片
fzxyxf1314的博客
07-04 1720
【代码】在layui弹出层遍历展示图片。
layui 弹框表格
08-09
### 回答1： 你可以使用 layui 的弹出层组件和表格组件来...无论是在管理系统还是在企业应用中，都可以很方便地使用layui弹框表格来展示和处理数据。正因如此，layui弹框表格成为了前端开发中常见且重要的功能之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值