Maison > Article > interface Web > Comment utiliser layui pour embellir les tableaux de données

Comment utiliser layui pour embellir les tableaux de données

王林avant: 2020-11-17 16:04:504150parcourir

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>

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

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

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
}

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

À 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!

css layui html JS table

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment modifier la hauteur des lignes du tableau dans layuiArticle suivant：Comment modifier la hauteur des lignes du tableau dans layui

Articles Liés

Voir plus