Lauiui テーブルは自己適応をサポートしていますか?-ライユイのチュートリアル-php.cn

Lauiui テーブルは自己適応をサポートしていますか?

藏色散人

リリース： 2019-07-20 11:53:58

オリジナル

11047 人が閲覧しました

#layui テーブルはアダプティブをサポートしていますか?

layui テーブルはアダプティブをサポートしていません。たとえば、ページにデータテーブルを追加すると、データテーブルの各列の幅がテーブルに適応できず、すべてが密集していることがわかります。公式ドキュメントを読んだ後、列幅がテーブルには次のように設定できます:

layuiTable.render({
width: 710,
elem: &#39;#tabSta&#39;,
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" } 
]],
});

ログイン後にコピー

しかし、ここで問題が発生します。ページを縮小しても、表の幅は元の幅のままで、アダプティブサイズ要件を満たすことができません。理由は、今設定した幅が固定サイズの幅だからです。

上記の方法は機能しないため、2 番目の解決策に進みます。ブラウザのページで確認したところ、幅を100%に設定すると、データテーブルの幅を適応的に変更できることがわかりました。したがって、データテーブルのスタイルをカスタマイズするには、データテーブルの対応するコードにパラメータ don を追加します。

関連するコードは次のとおりです。

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

ログイン後にコピー

次のように $("table").width("100%") と記述することもできます。

この設定では、ブラウザページに戻って表示します。ページをどのようにズームしても、データテーブルはページサイズに適応できます。

Layui に関連する技術的な記事については、

Layui Framework Tutorial 列にアクセスして学習してください。

以上がLauiui テーブルは自己適応をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。