Unterstützt die Laui-Tabelle die Selbstanpassung?

Unterstützt Laui Table Adaptive?

Laui-Tabelle unterstützt Adaptive nicht. Wenn Sie beispielsweise eine Datentabelle zur Seite hinzufügen, werden Sie feststellen, dass die Breite jeder Spalte der Datentabelle nicht an die Tabelle angepasst werden kann und alle zusammengepfercht sind. Nachdem ich die offizielle Dokumentation gelesen hatte, stellte ich fest, dass die Spaltenbreite kann für den Tisch eingestellt werden:

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

Doch hier kommt das Problem. Wenn ich die Seite verkleinere, entspricht die Breite der Tabelle immer noch der ursprünglichen Breite und kann die Anforderungen an die adaptive Größe nicht erfüllen. Der Grund dafür ist, dass die Breite, die ich gerade eingestellt habe, eine feste Breite ist.

Da die obige Methode nicht funktioniert, fahren Sie mit der zweiten Lösung fort. Ich habe auf der Browserseite nachgesehen und festgestellt, dass die Breite der Datentabelle adaptiv geändert werden kann, wenn die Breite auf 100 % eingestellt ist. Fügen Sie daher den Parameter done zum entsprechenden Code der Datentabelle hinzu, um einen Stil für die Datentabelle anzupassen.

Der relevante Code lautet wie folgt:

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%”);

Sie können $("table").width("100%") auch so schreiben.

Mit dieser Einstellung kehren wir zur Browserseite zurück, um sie anzuzeigen. Unabhängig davon, wie wir die Seite vergrößern, kann sich die Datentabelle an die Seitengröße anpassen.

Weitere technische Artikel zu Layui finden Sie in der Spalte Layui Framework Tutorial.

Das obige ist der detaillierte Inhalt vonUnterstützt die Laui-Tabelle die Selbstanpassung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!