首頁 > web前端 > Layui教程 > layui表格支援自適應嗎

layui表格支援自適應嗎

藏色散人
發布: 2019-07-20 11:53:58
原創
11047 人瀏覽過

layui表格支援自適應嗎

layui表格支援自適應嗎?

layui表格不支援自適應。例如在頁面中新增資料表格時,會發現資料表格每列寬度的大小不能自適應表格,都擠在了一起,看了官方文件後發現,可以為表格設定列寬:

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" } 
]],
});
登入後複製

但是,問題由來了。當我縮小頁面時,表格的寬度還是原來的寬度,無法達到自適應大小的要求。原因在於我剛才給它設定的寬度是固定大小的寬度。

既然上面這個方法不行,那就進行第二種解決方法。我在瀏覽器頁面檢查發現,當寬度設為100%時,資料表格的寬度就能進行自適應大小了。所以,在資料表格的對應程式碼中給它加上參數done,給資料表格自訂一個樣式。

相關程式碼如下:

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%”);
登入後複製

也可以這樣寫$(“table”).width(“100%”)。

透過這樣設置,我們回到瀏覽器頁面進行查看,無論我們怎樣縮放頁面,資料表格都能自行適應頁面大小。

更多Layui相關技術文章,請造訪Layui框架教學欄位進行學習!

以上是layui表格支援自適應嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板