Layui表格常用处理

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值