layui表格支不支持自适应-创新互联
这篇文章主要介绍了layui表格支不支持自适应,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司是一家专业的成都网站建设公司,我们专注网站设计、成都做网站、网络营销、企业网站建设,买友情链接,一元广告为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。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表格支不支持自适应-创新互联
网站路径:http://pwwzsj.com/article/djohii.html