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

Rendu de la méthode de table dans layui

尚
avant
2020-04-04 17:26:034866parcourir

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;
})

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: '开通方式'}
                ]]
            });

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>

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!

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