Home > Article > Web Front-end > How to use layui to beautify table data tables

How to use layui to beautify table data tables

王林forward: 2020-11-17 16:04:504150browse

First of all, let’s take a look at the beautified renderings:

(Learning video sharing: html video tutorial)

How to use layui to beautify table data tables

Specific steps:

1. Introduce the css and js files of layui

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

2. Place a table element on the page

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

3 , specify the container through the table.render() method

4. At this time, your page will almost look like the following

How to use layui to beautify table data tables

##5. The main text is here, how to render the table data? The third part of our above is a method of rendering, called "method rendering". The three rendering methods provided by layui official website will not be described here. The advantage of method rendering is that you can break away from the HTML file and focus on JS itself. . Especially for frequent changes and releases of projects, the convenience will be more obvious. The default URL of layui is a "get" request, and here it is a post request, so remember to add the "method" attribute to post.

6. An easy problem. Logically speaking, you should be able to see the table data at this time. Why can't most people's tables still not be rendered? Usually it is because you have not configured the background data format

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"}
                ]],
            });
            });

At this time, the table has generally come out. Remember, the data format provided by the background is the same as that provided by layui. This should be remembered. You can Go to the official website and take a look, no explanation is given.

Related recommendations:

layui

The above is the detailed content of How to use layui to beautify table data tables. For more information, please follow other related articles on the PHP Chinese website!

css layui html JS table

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to modify table row height in layuiNext article：How to modify table row height in layui

See more

How to use layui to beautify table data tables

Related articles