精华内容
下载资源
问答
  • table class="layui-table" id="test" lay-filter="test"></table> layui.use(['laydate', 'form','table'], function () { var laydate = layui.laydate; var form = layui.form; var table = layui....
    <table class="layui-table" id="test" lay-filter="test"></table>
    
    <script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="tongyi">同意</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jujue">拒绝</a>
    </script>
    
    layui.use(['laydate', 'form','table'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var table = layui.table;
    
            // //执行一个laydate实例
            // laydate.render({
            //     elem: '#start' //指定元素
            // });
            var tabledata;
            //第一个实例
            table.render({
                elem: '#test'
                ,height: 312
                ,method:'post'
                ,url: '' //数据接口
                // ,page: true //开启分页
                ,autoSort:false
                ,response:{
                    dataNmae:'data'
                }
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'uid', title: '用户ID', width:80}
                    ,{field: 'link', title: '主页链接', width:150,}
                    ,{field: 'name', title: '昵称', width:80}
                    ,{field: 'gender', title: '性别', width: 80,}
                    ,{field: 'fans', title: '粉丝量', width: 80}
                    ,{field: 'won', title: '获赞量', width: 80,}
                    ,{field: 'works', title: '作品量', width: 80}
                    ,{field: 'platform', title: '所属平台', width: 135,}
                    ,{field: 'begood', title: '擅长', width: 135,}
                    ,{field: 'labor', title: '工会', width: 135,}
                    ,{field: 'appearance_fee', title: '出场费', width: 135, sort: true}
                    ,{field: 'minimum', title: '保底', width: 135, sort: true}
                    ,{field: 'relation', title: '联系方式', width: 135, sort: true}
                    ,{field: 'status', title: '状态', width: 135, sort: true,templet: function(d){
                            if (d.status == 0){
                                return '<span style="color: red;">'+ '待审核' +'</span>'
                            }else if (d.status == 1){
                                return '<span style="color: #22bb22;">'+ '同意审核' +'</span>'
                            }else {
                                return '<span style="color: darkslategray;">'+ '拒绝审核' +'</span>'
                            }
    
                        }}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true
         
            });
            table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                var listid = obj.data.id;
                // console.log(listid)
                if(layEvent === 'detail'){ //查看
                // 打开弹窗
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '编辑'
                        ,area: ['600px', '700px']
                        ,shade: 0
                        ,maxmin: true
                        // ,offset: [ //为了演示,随机坐标
                        //     'auto'
                        // ]
                        ,content: ''+listid
                        // ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                        ,yes: function(){
                            $(that).click();
                        }
                        ,btn2: function(){
                            layer.closeAll();
                        }
    
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero){
                            layer.setTop(layero); //重点2
                        }
                    });
                } else if(layEvent === 'tongyi'){ //同意
                    layer.confirm('确认通过吗?', function(){
                        // obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                        $.ajax({
                            type: 'get',
                            url: '' + listid,
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert(res.msg, {icon: 6},
                                        function () {
                                            //关闭当前frame
                                            xadmin.close();
                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                        });
                                } else {
                                    layer.msg(res.msg, {time: 2000, icon: 5})
                                }
                            }
                        })
    
                        layer.closeAll();
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'jujue'){ //拒绝
                    //do something
                    layer.confirm('确认拒绝吗?', function(){
                        // obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                        $.ajax({
                            type: 'get',
                            url: '' + listid,
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert(res.msg, {icon: 6},
                                        function () {
                                            //关闭当前frame
                                            xadmin.close();
                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                        });
                                } else {
                                    layer.msg(res.msg, {time: 2000, icon: 5})
                                }
                            }
                        })
    
                        layer.closeAll();
                        //向服务端发送删除指令
                    });
    
                    // //同步更新缓存对应的值
                    // obj.update({
                    //     username: '123'
                    //     ,title: 'xxx'
                    // });
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi,头部工具栏扩展的右侧图标。');
                }
            });
    
        });
    
    'code'=>0,'msg'=>'成功','data'=>''
    
    展开全文
  • layuitable展示后端数据 1.下载layui的资源文件 https://www.layui.com/,下载解压后就是下面图里的文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GQEjBBOm-1607652757756)(C:\...

    layui中table展示后端数据

    1.下载layui的资源文件

    layui官网,下载解压后就是下面图里的文件

    把layui整个文件夹引入项目

    2.在项目里引入下载好的文件

    3.启动项目,在主页发送一个ajax请求

    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("get","findAll");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send();
    </script>
    

    浏览器按F12查看请求

    好,请求有发出去了,404先别管,主要是这个请求成功发出去了

    4.接下来写后台的代码

    数据库

    DAO

    (我这里用了MyBatis,如果用原生的JDBC则自己写流程)

    @Repository
    public interface BookDao {
    
        @Select("select * from book")
        List<Book> findAll();
    
    }
    

    Service

    @Service
    public class BookService {
    
        @Autowired
        private BookDao bookDao;
    
        @Override
        public List<Book> findAll() {
            return bookDao.findAll();
        }
    
    }
    

    去layui官网里把table的代码看看

    1.首先要在页面引入layui的css及js

    2.URL是数据的接口,并且layui只认json的数据格式,所以controller返回的数据就要是json格式

    3.cols里的field是要跟数据库查出来的列对应,只要后端返回的数据符合layui.table的格式,layui就会自动展示

    所以我最终的页面是这样的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>table模块快速使用</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
    
        <script>
            var xhr = new XMLHttpRequest();
            xhr.open("get","findAll");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send();
        </script>
    </head>
    <body>
    
    <script src="layui/layui.js"></script>
    
    <table id="demo" lay-filter="test"></table>
    
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            //第一个实例
            table.render({
                elem: '#demo'
                ,url: '/findAll'
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80,sort: true}
                    ,{field: 'name', title: '书名', width:160}
                    ,{field: 'price', title: '价格', width:80,sort: true}
                ]]
            });
    
        });
    </script>
    
    </body>
    </html>
    

    接下来编写controller层的代码

    Controller

    @Controller
    @RequestMapping()
    public class BookController {
    
        @Autowired
        private BookService bookService;
    
        @RequestMapping(value="findAll",produces="text/html;charset=utf-8")
        public @ResponseBody String findAll(){
            List<Book> bookList = bookService.findAll();
            String jsonString = JSON.toJSONString(bookList);
            //下面这里这个格式是在网上找的
            String books="{\"code\":\"0\",\"msg\":\"ok\",\"count\":100,\"data\":"+jsonString+"}";
            System.out.println("-----"+books);
            return books;
        }
    }
    

    这样我们就把json格式的数据返回去前端了

    启动项目,浏览器进入主页

    成功展示了。

    展开全文
  • layui table表单提示数据接口请求异常

    万次阅读 热门讨论 2018-07-19 09:33:04
    问题一:直接拿别人的文件放在本地打开 ...也就是你能用本地文件打开,本地打开是file:///C:/Users/Administrator/Desktop/git/layui_table1.html 可以在本地服务器上展示没有问题 http://localhost/git...

    问题一:直接拿别人的文件放在本地打开

    如下图

    原因:这是提示“交叉源请求仅支持协议方案:HTTP、数据、Chrome、Chrome扩展、HTTPS。”

    也就是你不能用本地文件打开,本地打开是file:///C:/Users/Administrator/Desktop/git/layui_table1.html

    可以在本地服务器上展示没有问题

    http://localhost/git/layui_table1.html

    问题二:返回数据格式不符合要求(经常是这样的)

    输出格式为

    {
        "code":0,
        "msg":"",
        "count":1000,
        "data":[
            {
                "id":1,
                "username":"user-0",
                "sex":"女",
                "city":"城市-0",
                "sign":"签名-0",
                "experience":255,
                "logins":24,
                "wealth":82830700,
                "classify":"作家",
                "score":57
            },
            {
                "id":2,
                "username":"user-0",
                "sex":"女",
                "city":"城市-0",
                "sign":"签名-0",
                "experience":255,
                "logins":24,
                "wealth":82830700,
                "classify":"作家",
                "score":57
            }

    ]

    }

    msg的值一定要写"",不然会一直报错,自己设定的code值一定要写0,其他的值都是错误的。

    目前的也是修改返回数据的格式

    相关内容可前往官方文档 https://www.layui.com/doc/modules/table.html#async

    问题三:控制台报错404(一般不会)

    接口有问题,查看接口是否正确有数据,反馈给后台同学

    问题四:数据接口请求异常:parsererror

    一般是因为返回的不是标准的 JSON,或者返回的数据前后有空格等其它字符

    可关注本人公众号领取2G(包含210本PDF技术开发书籍)学习资料

             heerey说前端

     

    展开全文
  • 最近使用layui table进行异步获取数据并填充的时候,控制台打印出数据长度为0,但是其中还有数据,网上找了很多办法,下边是我最后使用的。 一般,render渲染表格是独立的书写格式,但是我在做数据统计的时候,需要...

    最近使用layui table进行异步获取数据并填充的时候,控制台打印出数据长度为0,但是其中还有数据,网上找了很多办法,下边是我最后使用的。

    一般,render渲染表格是独立的书写格式,但是我在做数据统计的时候,需要展示表格和图表,两个数据是一起获取到的,如何再填充到table中去呢?


    下边列出实现代码:

     //定义
                var tempData = {};
                //补充搜素条件
                tempData.customerId = customerId;
                tempData.year = year;
                tempData.month = month;
                //转换格式
                var conditionStr = JSON.stringify(tempData);
                var url = "${pageContext.request.contextPath}/statisticsCtrl/getOrderNewDayCountByYearAndMonth";
                //post调用
                $.post(url, {"conditionStr": conditionStr}, function (data) {
                    if (data.success) {
                        var resultData = data.data;
                        //初始化报表折线图
                        getEcharts(year,month,resultData.days,resultData.count);
                        //填充表格数据
                        allValue = [];
                        if(resultData.days && resultData.days.length>0){
                            for(var i=0;i<resultData.days.length;i++){
                                var dataTemp = {};
                                dataTemp.customerId = customerId;
                                dataTemp.year = year;
                                dataTemp.month = month;
                                dataTemp.count = resultData.count[i];
                                dataTemp.days = resultData.days[i];
                                allValue.push(dataTemp);
                            }
                        }
                        table.render({
                            elem: '#orderStaticstisTable'
                            , height: 'full-115'
                            , data: allValue
                            , cols:
                                [[ //表头
                                    {field: 'customerId', title: '客户',hide:true}
                                    ,{field: 'year', title: '年份',hide:true}
                                    ,{field: 'month', title: '月份',hide:true}
                                    ,{field: 'days', title: '日期'}
                                    , {field: 'count', title: '下单量'}
                                ]]
                            ,limit:50
                        })
                    } else {
                        layer.msg(data.errorMsg);
                    }
                })

    如上所示,我们可以将table的render放在异步请求处理的结果中,达到数据填充的效果。目前暂时利用这种办法如有优化,以后补充!

     

    转载于:https://www.cnblogs.com/yangyuke1994/p/10024499.html

    展开全文
  • 也就是你能用本地文件打开,本地打开是file:///C:/Users/Administrator/Desktop/git/layui_table1.html 可以在本地服务器上展示没有问题 http://localhost/git/layui_table1.html 问题二:返回数据格式符合要求...
  • layui table数据列中可点击按钮直接上传图片或者展示图片 这里直接展示代码(主要逻辑是要在table 加载时把upload 组件渲染在每一个格子) //table 列中模板的代码 <script type="text/html" id="imgTpl2"> ...
  • layui table数据表格中数据返回成功,但页面显示数据内容问题。 一般导致这个问题的原因是 自己设置的返回的数据格式与layui表格中的以及固定设置好的数据格式符合,导致无法正确显示数据于页面。 需要特别...
  • 三层以上复杂表头会出现数据串行问题,如图1会出现串行问题 解决方案 靠上rowspan,不要靠下rowspan,这样合并数据就不会串行啦
  • layui table 表格数据显示超链接

    千次阅读 2019-12-23 17:58:48
    前言 layui 显示后台返回数据,需要将某一列数据 转换为 ...layui table cols: [[ {field: 'imgList', title: '图片凭证', minWidth: 90, align: "center", templet: proofPicture} ]], done: function (r...
  • layui官方提供重载的代码是这样的: var $ = layui.$, active = { reload: function(){ var demoReload = $('#... table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { k
  • 问题一:直接拿别人的文件放在本地...”也就是你能用本地文件打开,本地打开是file:///C:/Users/Administrator/Desktop/git/layui_table1.html可以在本地服务器上展示没有问题http://localhost/git/layui_table1...
  • 鼠标滑过操作列 // 鼠标滑过操作列 // var tip_index = 0; $(document).on('mouseenter', '#proStatus', function(){ tip_index = layer.tips('项目情况', '#proStatus', {time: 0}); }).on('mouseleave', '#...
  • layui table 表头和内容数据不能对齐

    千次阅读 2019-09-23 15:11:44
    http://www.wenhaofan.com/article/20181224153019 今天使用layui table方法渲染时出现了个莫名其妙的错误正常情况table应该是这样展示的但是却展示成了这样格子没对齐,找了半天原因发现是在table.render中的cols...
  • layui 给我们提供了update方法,可以用来修改当前行数据 //工具条事件 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj....
  • layui table不分页,全部展示

    千次阅读 2020-10-13 11:35:42
    table.render({ elem: '#' + EnterpriseInfoDetail.mainPeopleTable.id, page: false , //是否开启分页 cols: EnterpriseInfoDetail.mainPeopleTable.columns, data:JSON.parse($("#employeesId").text()), limit: ...
  • Layui table初始化时显示数据 采用url 在进行关键字查询的时候,在进行reload添加url (后台方法)
  • 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // ...
  • 之前做的Layui的列表,都证正常显示。但有一天,在某个字段的富文本中加入表格后。 layui的列表就正常了。...转移能针对一行数据,转回已能破坏JSON格式。 否则Layui会无法正常显示列表数据。 这两.
  • 在开发的过程中遇到的一个layui数据表格的问题 为了表格展示美观,对一些内部ID列数据进行隐藏,但发现在排序之后,已隐藏的列会再次出现,导致表格展示数据错位 原因: done回调,是在render和reload的时候执行,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,003
精华内容 801
关键字:

layuitable不展示数据