Rumah >hujung hadapan web >Tutorial Layui >怎么利用layui美化table数据表格

怎么利用layui美化table数据表格

王林
王林ke hadapan
2020-11-17 16:04:504208semak imbas

怎么利用layui美化table数据表格

首先我们来看下美化后的效果图:

(学习视频分享:html视频教程

fd8e8afbf8e109fe314d5186a293473.png

具体步骤:

1、引入layui的css和js文件

<link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>

2、在页面放置一个table元素

<table class="layui-hide" id="test" lay-filter=&#39;test3&#39;></table>

3、通过 table.render() 方法指定该容器

4、这个时候你的页面差不多就是以下这个样子了

d76dd4e3a3de459d7baf481819bfbeb.png

5、正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post。

6、容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你没配置后台数据格式

response: {
    statusName: &#39;code&#39; //数据状态的字段名称,默认:code
    ,statusCode: 200 //成功的状态码,默认:0
    ,msgName: &#39;msg&#39; //状态信息的字段名称,默认:msg
    ,countName: &#39;count&#39; //数据总数的字段名称,默认:count
    ,dataName: &#39;data&#39; //数据列表的字段名称,默认:data
}
layui.use(&#39;table&#39;, function(){
            var table = layui.table;
//            var playerName;
//            if(item != undefined) {
//                playerName=item;
//            }
            table.render({
                elem: &#39;#test&#39;  table 容器的选择器或 DOM
                ,url:&#39;http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds&#39;
                ,method:&#39;post&#39;
                ,where:{tourId:tourIds,rounds:rounds,playerName:item}
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                ,cols: [[
                    {field:&#39;tourPlayerId&#39;, width:80, title: &#39;ID1&#39;, sort: true}
                    ,{field:&#39;playerName&#39;, width:80, title: &#39;姓名&#39;}
                    ,{field:&#39;hole1&#39;,  title: &#39;1&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole2&#39;, title: &#39;2&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole3&#39;, title: &#39;3&#39;,edit: &#39;text&#39;} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                    ,{field:&#39;hole4&#39;, title: &#39;4&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole5&#39;, title: &#39;5&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole6&#39;, title: &#39;6&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole7&#39;, title: &#39;7&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole8&#39;, title: &#39;8&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole9&#39;, title: &#39;9&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole10&#39;, title: &#39;10&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole11&#39;, title: &#39;11&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole12&#39;, title: &#39;12&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole13&#39;, title: &#39;13&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole14&#39;, title: &#39;14&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole15&#39;, title: &#39;15&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole16&#39;, title: &#39;16&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole17&#39;, title: &#39;17&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole18&#39;, title: &#39;18&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;add&#39;, title: &#39;操作&#39;, width:177,toolbar:"#barDemo"}
                ]],
            });
            });

这个时候表格一般已经是出来了,记得,后台提供的数据格式,和layui提供的一样最好,这一点要切记,这一点大家可以去官网上看下,不做说明。

相关推荐:layui

Atas ialah kandungan terperinci 怎么利用layui美化table数据表格. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam