解決Layui數(shù)據(jù)表格的寬高問(wèn)題
在使用Layui數(shù)據(jù)表格的時(shí)候,如果采用固定數(shù)值的話,在不同瀏覽器里顯示會(huì)有差異,特別是在不同分辨率設(shè)備上。針對(duì)以此,把width設(shè)置直接去掉,貌似解決了我的顯示問(wèn)題。
之前固定寬高的情況
/*-------table----------------*/
//方法級(jí)渲染
var tableIns = window.demoTable = table
.render({
elem : '#idTest',
id : 'idTest',
url : '<%=path%>/content/getWdkList',
width : 1500,
height : 650,
cols : [ [ //標(biāo)題欄
{checkbox : true,LAY_CHECKED : false,filter : 'test'},
// {field : 'ID',title : '序號(hào)',width : 220,sort : true,align : 'center'},
// {field : 'CONTENT_TYPE_ID',title : '內(nèi)容類型',width : 220,sort : true,align : 'center',templet:'#typeTpl'},
{field : 'IMG_URL',title : '標(biāo)題圖片',width : 300,sort : true,align : 'center',templet: '#img'},
{field : 'SUBJECT',title : '標(biāo)題',width : 220,sort : true,align : 'center'},
{field : 'RICH_TXT',title : '內(nèi)容',width : 220,sort : true,align : 'center'},
{field : 'CREATE_TIME',title : '創(chuàng)建時(shí)間',width : 120,sort : true,align : 'center'},
{field : 'PUBLISH_STATE',title : '發(fā)布狀態(tài)',width : 120,sort : true,align : 'center',templet:'#publish_state'},
{fixed : 'right',title : '操作',width : 200,align : 'center',toolbar : '#barDemo'}
] ],
page : true //是否顯示分頁(yè)
,
limits : [ 10, 20,50, 100 ],
limit : 10
//每頁(yè)默認(rèn)顯示的數(shù)量
});
頁(yè)面顯示如下:

在頁(yè)面右邊顯示了好多空白區(qū)域,不好看。
把寬度注釋之后
//width : '100%',
界面顯示如下:

右邊的邊框伸縮過(guò)去了,占滿了全屏,好看些了,針對(duì)高度,再次試想了下height設(shè)置。
驗(yàn)證結(jié)果:
如果去掉的話,表格數(shù)據(jù)有多少條就多少高度。即寬高不設(shè)置,這長(zhǎng)默認(rèn)占滿全屏,高度根據(jù)內(nèi)容的高度來(lái)填充。
查找了幾篇博客,看到height設(shè)置成full-200的,實(shí)驗(yàn)了一把
height : 'full-200',
顯示的還可以,我以為跟數(shù)值大小有關(guān),把200加大,試了下300,感覺(jué)沒(méi)變化,改成full-700又嚴(yán)重變形了,估計(jì)full-200是layui table模塊設(shè)置的一些預(yù)定義值吧。
以上這篇解決Layui數(shù)據(jù)表格的寬高問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
Ajax(Asynchronous?Javascript?And?XML),即是異步的JavaScript和XML,Ajax其實(shí)就是瀏覽器與服務(wù)器之間的一種異步通信方式2022-10-10
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題
下面小編就為大家?guī)?lái)一篇JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求
這篇文章主要介紹了深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求,文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
js利用遞歸與promise 按順序請(qǐng)求數(shù)據(jù)的方法
這篇文章主要介紹了js利用遞歸與promise 按順序請(qǐng)求數(shù)據(jù),需要的朋友可以參考下2019-08-08
javascript打開(kāi)新窗口同時(shí)關(guān)閉舊窗口
因業(yè)務(wù)需要,在網(wǎng)上查找這個(gè)問(wèn)題的解決辦法,但是昏天黑地地搞了半天,找到的方法雖然可以實(shí)現(xiàn)功能,但是總是會(huì)跳出討厭的“關(guān)閉窗口”的提示框,郁悶。2009-01-01
擴(kuò)展Bootstrap Tooltip插件使其可交互的方法
這篇文章主要介紹了擴(kuò)展Bootstrap Tooltip插件使其可交互的方法,結(jié)合實(shí)例形式分析了bootstrap擴(kuò)展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下2016-11-11

