网站首页   文章专栏   LayUI:数据表格的查询功能
LayUI:数据表格的查询功能
原创 2020-02-17 18:35 ApeNixX 77浏览 Layui

  • 效果演示

  • 先放一下全部的代码,然后在解析一下select加载和列表查询:
 
 
        

        

    
layui.use('table', function() {
            var table = layui.table; //表格
            var imagebox = function(d){
                return '';
            };
            //执行一个 table 实例
            table.render({
                elem: '#demo',
                height: 500,
                width: 1600,
                url: '/admin/get****',//数据接口
                title: '博客表',
                id: 'table1',
                page: true, //开启分页
                toolbar: 'default' ,//开启工具栏,此处显示默认图标,可以自定义模板,详见文档,
                totalRow: true ,//开启合计行
                cols: [//表头
                    [ 
                        { type: 'checkbox', fixed: 'left' }, 
                        { field: 'articleId', title: '序号', width: 150, sort: true },
                        { field: 'articleCover', title: '封面', width: 150,templet:imagebox},
                        { field: 'originalAuthor', title: '作者', width: 150 },
                        { field: 'articleTitle', title: '标题', width: 250 },
                        { field: 'articleCategories', title: '类型', width: 200 },
                        { field: 'looks', title: '浏览量', width: 80 },
                        { field: 'likes', title: '点赞量', width: 80 },
                        { field: 'publishDate', title: '发布时间', width: 200,sort: true },
                        { fixed: 'right', title:'操作',width: 200, align: 'center', toolbar: '#barDemo' }
                    ]
                ]
            });

            //监听 头 工具栏事件
            table.on('toolbar(test)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id),
                    data = checkStatus.data; //获取选中的数据
                switch(obj.event) {
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'update':
                        if(data.length === 0) {
                            layer.msg('请选择一行');
                        } else if(data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]:' + checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                        }
                        break;
                };
            });
            //监听 行 工具事件
            table.on('tool(test)', function(obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data ,//获得当前行数据
                    layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if(layEvent === 'del') {
                    layer.confirm('真的删除行么', function(index) {
                        $.ajax({
                            type:"post",
                            url:"/admin/delete***",
                            dataType: "json",
                            data:{id:data.articleId},
                            success:function(result){
                                if(result.status==200){
                                    layer.msg("删除成功", {icon: 6});
                                    setTimeout(function () {
                                        obj.del(); //删除对应行(tr)的DOM结构
                                        layer.close(index);
                                    },1000)

                                }else {
                                    layer.msg("删除失败", {icon: 5})
                                }
                            }
                        })
                    });
                } else if(layEvent === 'edit') {
                    layer.msg('编辑操作:' + JSON.stringify(data));
                    window.location.href="/admin/drafttf?id=" + data.id;
                }
            });

            layui.use('form', function(){
                var $ = layui.jquery;
                var form = layui.form;
                $(function () {

                    $.ajax({
                        type: "get",
                        url: '/admin/getCateg***',  //从数据库查询返回的是个list
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        async: false,
                        cache: false,
                        success: function (data) {
                            $.each(data.data, function (index, item) {
                                $('#bg_id').append(new Option(item.categoryName, item.id));//往下拉菜单里添加元素
                            })

                            form.render("select");//菜单渲染 把内容加载进去
                        }

                    })

                })

                form.on('submit(formDemo)', function(data) {
                    var categoryName = $("#bg_id").find("option:selected").text();
                    //table1为表格id
                    table.reload('table1', {
                        page: {
                            curr: 1
                        },
                        where: {
                            categoryName:categoryName
                        },
                        method: 'post',
                        url: '/admin/search****',
                    });
                    return false;
                });

            });



        });
  • 先介绍一下新增操作,和查看,编辑,删除操作所不同的是,新增操作使用的是toolbar操作,也是Switch语句判断一下lay-event,然后在写编辑操作,通过Url跳转编辑页面。

  • 页面查询功能,也就是条件查询,查询条件和Table要放在form标签内。每一个条件的输入框Input中要设置一个id。然后在form.on(‘submit(formDemo)’, function(data)方法中取值,然后通过后台接口多条件查询列表。

  • table.reload方法重新渲染Table列表,实现多条件查询列表的功能。

版权声明:本文由ApeNixX原创出品,转载请注明出处!

本文链接:http://www.apenixx.top/article/details/1581935725


  javascript    前端    Layui 

赞助本站,网站的发展离不开你们的支持!
来说两句吧
最新评论
  • 不落阁
    不落阁
    我为大家做了模拟留言与回复!试试吧!

    Absolutely
    Absolutely这是用户回复内容

    2017-03-18 18:26回复

    Absolutely
    Absolutely 回复 不落阁这是第二个用户回复内容

    2017-03-18 18:26回复