Utilisez layui pour restituer le tableau de données (exemple)-Tutoriel Layui-php.cn

Utilisez layui pour restituer le tableau de données (exemple)

尚

Libérer： 2019-11-29 14:02:00

avant

6585 Les gens l'ont consulté

Le module

Utilisez layui pour restituer le tableau de données (exemple)

table est l'un des composants centraux du framework layui. Il est utilisé pour exécuter une série de fonctions et d'opérations de données dynamiques sur des tables, couvrant presque tous les besoins impliqués dans les activités quotidiennes.

Prend en charge l'en-tête fixe, la ligne fixe, la colonne fixe gauche/colonne droite, prend en charge le glisser pour modifier la largeur de la colonne, prend en charge le tri, prend en charge les en-têtes à plusieurs niveaux, prend en charge les modèles personnalisés pour les cellules et prend en charge le rechargement des tableaux (tels que la recherche , filtrage conditionnel, etc.), prend en charge les cases à cocher, prend en charge la pagination, prend en charge l'édition de cellules et d'autres fonctions.

Malgré cela, nous allons encore l'améliorer et ajouter des fonctions plus conviviales de temps en temps tout en contrôlant le volume et les performances du code. Le module de table sera également l'un des projets de maintenance clés de layui.

Exemple de table de données de rendu layui :

1. Introduisez 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. Placez 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()

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

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

Utilisez layui pour restituer le tableau de données (exemple)

. 5. Texte Maintenant, 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 « méthode de rendu ». 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 : vous pouvez vous séparer. le fichier HTML et concentrez-vous sur JS lui-même. Surtout pour les changements fréquents et les versions de projets, sa commodité sera plus évidente

l'url de layui est par défaut une requête "get", et la mienne est une requête de publication, alors n'oubliez pas d'ajouter l'attribut "method" pour cela. post,

6. Problèmes faciles à rencontrer Logiquement parlant, vous devriez pouvoir voir les données du tableau à ce moment-là. Pourquoi les tableaux de la plupart des gens ne peuvent-ils toujours pas être rendus ? Habituellement, c'est parce que votre sœur a 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

et l'effet est le suivant :

Utilisez layui pour restituer le tableau de données (exemple)