Comment utiliser layui pour embellir les tableaux de données-Tutoriel Layui-php.cn

Comment utiliser layui pour embellir les tableaux de données

王林

Libérer： 2020-11-17 16:04:50

avant

4190 Les gens l'ont consulté

Comment utiliser layui pour embellir les tableaux de données

Tout d'abord, jetons un coup d'œil aux rendus embellis :

(Partage vidéo d'apprentissage : tutoriel vidéo html)

Comment utiliser layui pour embellir les tableaux de données

Étapes spécifiques :

1. Importer les fichiers css et js de layui

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

Copier après la connexion

2 Placer un élément de table sur la page

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

Copier après la connexion

3. , spécifiez le conteneur via la méthode table.render()

4 À ce stade, votre page ressemblera presque à ce qui suit

Comment utiliser layui pour embellir les tableaux de données

. 5. Le texte principal est ici, comment restituer les données du tableau ? La troisième partie de ce qui précède est une méthode de rendu, appelée "rendu de méthode". Les trois méthodes de rendu fournies par le site officiel de layui ne seront pas décrites ici. L'avantage du rendu de méthode est que vous pouvez vous éloigner du fichier HTML et vous concentrer. sur JS lui-même. Surtout pour les changements et versions fréquents de projets, la commodité sera plus évidente. L'URL par défaut de layui est une requête "get", et ici c'est une requête de publication, alors n'oubliez pas d'ajouter l'attribut "method" à la publication.

6. Un problème simple. Logiquement parlant, les données du tableau devraient être visibles à ce moment-là. Pourquoi les tableaux de la plupart des gens ne peuvent-ils toujours pas être rendus ? C'est généralement parce que vous n'avez pas configuré le format des données d'arrière-plan

response: {
    statusName: &#39;code&#39; //数据状态的字段名称，默认：code
    ,statusCode: 200 //成功的状态码，默认：0
    ,msgName: &#39;msg&#39; //状态信息的字段名称，默认：msg
    ,countName: &#39;count&#39; //数据总数的字段名称，默认：count
    ,dataName: &#39;data&#39; //数据列表的字段名称，默认：data
}

Copier après la connexion

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

Copier après la connexion

À ce stade, le tableau est généralement sorti. N'oubliez pas que le format de données fourni par l'arrière-plan est le même que celui fourni par layui. , vous pouvez aller sur le site officiel et jeter un oeil, aucune explication n'est donnée.

Recommandations associées : layui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!