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中文網其他相關文章!