解決Layui數(shù)據(jù)表格的寬高問題
在使用Layui數(shù)據(jù)表格的時候,如果采用固定數(shù)值的話,在不同瀏覽器里顯示會有差異,特別是在不同分辨率設備上。針對以此,把width設置直接去掉,貌似解決了我的顯示問題。
之前固定寬高的情況
/*-------table----------------*/ //方法級渲染 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/content/getWdkList', width : 1500, height : 650, cols : [ [ //標題欄 {checkbox : true,LAY_CHECKED : false,filter : 'test'}, // {field : 'ID',title : '序號',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 : '標題圖片',width : 300,sort : true,align : 'center',templet: '#img'}, {field : 'SUBJECT',title : '標題',width : 220,sort : true,align : 'center'}, {field : 'RICH_TXT',title : '內(nèi)容',width : 220,sort : true,align : 'center'}, {field : 'CREATE_TIME',title : '創(chuàng)建時間',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 //是否顯示分頁 , limits : [ 10, 20,50, 100 ], limit : 10 //每頁默認顯示的數(shù)量 });
頁面顯示如下:
在頁面右邊顯示了好多空白區(qū)域,不好看。
把寬度注釋之后
//width : '100%',
界面顯示如下:
右邊的邊框伸縮過去了,占滿了全屏,好看些了,針對高度,再次試想了下height設置。
驗證結果:
如果去掉的話,表格數(shù)據(jù)有多少條就多少高度。即寬高不設置,這長默認占滿全屏,高度根據(jù)內(nèi)容的高度來填充。
查找了幾篇博客,看到height設置成full-200的,實驗了一把
height : 'full-200',
顯示的還可以,我以為跟數(shù)值大小有關,把200加大,試了下300,感覺沒變化,改成full-700又嚴重變形了,估計full-200是layui table模塊設置的一些預定義值吧。
以上這篇解決Layui數(shù)據(jù)表格的寬高問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
微信小程序使用wx.chooseLocation開發(fā)地圖怎么做
這篇文章主要介紹了微信小程序使用wx.chooseLocation開發(fā)地圖流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-12-12JavaScript實現(xiàn)Java中Map容器的方法
這篇文章主要介紹了JavaScript實現(xiàn)Java中Map容器的方法,結合實例形式分析了JavaScript實現(xiàn)Java中Map容器的原理與相關實現(xiàn)技巧,需要的朋友可以參考下2016-10-10淺談layui 綁定form submit提交表單的注意事項
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10javascript面向對象之共享成員屬性與方法及prototype關鍵字用法
這篇文章主要介紹了javascript面向對象之共享成員屬性與方法及prototype關鍵字用法,實例分析了prototype關鍵字在共享成員屬性與方法中的原理與使用技巧,需要的朋友可以參考下2015-01-01JavaScript程序設計高級算法之動態(tài)規(guī)劃實例分析
這篇文章主要介紹了JavaScript程序設計高級算法之動態(tài)規(guī)劃,結合實例形式分析了javascript動態(tài)規(guī)劃算法的原理、實現(xiàn)技巧與相關使用注意事項,需要的朋友可以參考下2017-11-11