Home > Article > Web Front-end > Use layui to render table data table (example)

Use layui to render table data table (example)

尚forward: 2019-11-29 14:00:496520browse

table module is one of the core components of layui framework. It is used to perform a series of functions and dynamic data operations on tables, covering almost all needs involved in daily business.

Supports fixed header, fixed row, fixed column left/column right, supports dragging to change column width, supports sorting, supports multi-level headers, supports custom templates for cells, and supports table reloading (Such as search, conditional filtering, etc.), supports check boxes, supports paging, supports cell editing and many other functions.

Despite this, we will still improve it and add more user-friendly functions from time to time while controlling the code volume and performance. The table module will also be one of the key maintenance projects of layui.

Example of layui rendering table data form:

1. Introduce layui’s css and js files

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

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"}

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

Use layui to render table data table (example)

5. Text Now, how to render the table data? The third part of our above is one method of rendering, called "method rendering". There are three rendering

methods provided by layui official website. I will not describe them here. The advantage of method rendering is: you can separate from the HTML file. , and focus on JS itself. Especially for frequent changes and releases of projects, its 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 For post,

6, a common 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’s because your sister 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

and the effect is as follows:

Use layui to render table data table (example)

The above is the detailed content of Use layui to render table data table (example). 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：Layui date control usage (example)Next article：Layui date control usage (example)

See more

Use layui to render table data table (example)

Related articles