Maison > interface Web > Tutoriel Layui > Rendu de la méthode de table dans layui

Rendu de la méthode de table dans layui

Libérer: 2020-04-04 17:26:03
avant
4918 Les gens l'ont consulté

Rendu de la méthode de table dans layui

Lorsque vous utilisez layui, vous devez importer l'intégralité du fichier lib dans le projet, puis importer les fichiers layui.css et layui.js sur la page.

Lorsque vous utilisez les modules intégrés dans layui, utilisez layui.use pour citer :

layui.use(['layer' , 'table],function(){
var layer = layui.layer;
var table = layui.table;
})
Copier après la connexion

Pour l'utilisation de layer, il suffit de lire directement la documentation officielle. Ici, je n’enregistre que ceux que j’utilise habituellement et qui sont difficiles à trouver.

1. Lors du rendu à l'aide de la méthode table, le frontal doit parfois ajouter un numéro de série à incrémentation automatique, alors comment l'ajouter ?

table.render({
                elem: '#dataTable',
                url:"getDataOrderList",
                // data: data,
                page:{
                    count:'count',
                    limit:20
                },
                cols: [[
                    {type:'numbers',title:'序号',align:'center'}, // 自增序号
                    {field: 'order_no', title: '订单编号'},
                    {field: 'tel', title: '购买账号'},
                    {field: 'total_price', title: '服务金额',color:"red"},
                    {field: 'pay_time', title: '支付时间'},
                    {title: '服务有效期',toolbar:'#detail'},
                    {field: 'buy_by', title: '开通方式'}
                ]]
            });
Copier après la connexion

Il y a une autre question, que dois-je faire s'il y a une opération ? Vous aimez visualiser, éditer, etc. ? Dans la méthode de rendu ci-dessus, il y a un champ appelé période de validité du service. Il y a un attribut dans la barre d'outils. Sa valeur d'attribut est le code en HTML :

<table  class="layui-table" id="dataTable" lay-filter="dataTable"></table>

script type="text/html" id="detail"> //id值关联这toobar的属性值
     <a href="javascript:;" style="color: #468aff" lay-event="detail">查看详情</a>
</script>
Copier après la connexion

Pour plus de connaissances layui, veuillez faire attention à . tutoriel d'utilisation de layuiColonne.

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!

Étiquettes associées:
source:oschina.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal