La table layui prend-elle en charge l'auto-adaptation ?

La table layui prend-elle en charge l'adaptation ?

la table layui ne prend pas en charge l'adaptatif. Par exemple, lors de l'ajout d'un tableau de données à la page, vous constaterez que la largeur de chaque colonne du tableau de données ne peut pas s'adapter au tableau, et elles sont toutes rassemblées. Après avoir lu la documentation officielle, j'ai trouvé que la largeur des colonnes. peut être dressé pour la table :

layuiTable.render({
width: 710,
elem: '#tabSta',
url: "/pickTicket/tytr", 
cols: [[
{ field: "ShiftsID", title: "班次ID", hide: true },
{ field: "scheduleCoding", title: "班次", align: "center" },
{ field: "time", title: "时间", align: "center" },
{ field: "carNumber", title: "车辆编号", align: "center" } 
]],
});

Cependant, voici le problème. Lorsque je réduis la page, la largeur du tableau reste la largeur d'origine et ne peut pas répondre aux exigences de taille adaptative. La raison en est que la largeur que je viens de définir est une largeur de taille fixe.

Étant donné que la méthode ci-dessus ne fonctionne pas, passez à la deuxième solution. J'ai vérifié sur la page du navigateur et constaté que lorsque la largeur est définie sur 100 %, la largeur du tableau de données peut être redimensionnée de manière adaptative. Par conséquent, ajoutez le paramètre done au code correspondant de la table de données pour personnaliser un style pour la table de données.

Le code pertinent est le suivant :

tabrecord =layuiTable.render({
elem: ‘#tabStation’,
url: “/pickTicket/tytr”,
done: function (res, curr, count){
KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }̲, cols: [[ { fi…(“table”).css(“width”, “100%”);

Vous pouvez également écrire $("table").width("100%") comme ceci.

Avec ce paramètre, nous revenons à la page du navigateur pour la visualiser. Peu importe la façon dont nous zoomons sur la page, le tableau de données peut s'adapter à la taille de la page.

Pour des articles plus techniques liés à Layui, veuillez visiter la colonne Tutoriel Layui Framework pour apprendre !

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!