easyui-layout佈局高度自適應
動態載入datagrid資料
$("#dg_center").datagrid({ url: ''/AJAX/EasyUiListComm.ashx', fit: true, //datagrid高度是否自適應 nowrap: true, //是否只顯示一行,即文字過多是否省略部分 striped: true, border: false, pagination: true, pageSize: 20, pageList: [20, 30, 40, 50, 100, 500], pageNumber: 1, checkOnSelect: false, selectOnCheck: false, singleSelect: true, rownumbers: false, idField: 'Id', columns: [[ { checkbox: true, field: 'Id', }, { title: '標題', field: 'Title', sortable: true, width: 200 }, ]], }); |
如果layout佈局中加入了form標籤,則需在樣式中寫入一個固定高度,否則頁面上將顯示不出來 |
<form id="form1" runat="server"> <div class="easyui-layout" id="cc" style="height:200px;" ><div data-options="region:'center',title:'資訊列表',split:false"> <div id="dg_center" toolbar="#tb_center"> </div><div id="tb_center"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">新增</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="Edit()">編輯</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Delete()">刪除</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-reload" plain="true" onclick="Refresh()">重新整理</a> </div> </div> </div></form> |
最終效果如圖:
大家實踐後可以看到這樣佈局下來的高度不能自動將頁面填滿,而且高度固定後當內容再繼續增加時會有滾動條出現,並不能達到美觀的效果。再此基礎上我們再新增屬性data-options="fit:true",瀏覽器寬度變化時,datagrid的寬度能夠自動變化新增屬性
<div class="easyui-layout" id="cc" style="height:200px;" data-options="fit:true"></div>
如果去掉form標籤後,只需加上屬性data-options="fit:true" 即可使datagrid的寬高自動根據瀏覽器大小填滿,並且,加上屬性border:false可以完全填滿 |
<div class="easyui-layout" id="cc" data-options="fit:true,border:false"> <div data-options="region:'center',title:'資訊列表',split:false"><div id="dg_center" toolbar="#tb_center"> </div><div id="tb_center"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">新增</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="Edit()">編輯</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Delete()">刪除</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-reload" plain="true" onclick="Refresh()">重新整理</a> </div> </div> </div> |
效果如圖:
相關文章
- css實現左欄固定右欄自適應,高度自適應的佈局CSS
- CSS佈局 --- 自適應佈局CSS
- css--常見左右盒子寬度高度自適應佈局CSS
- css自適應佈局CSS
- rem自適應佈局REM
- 三欄佈局之自適應佈局
- 三列自適應佈局(聖盃佈局)
- iPhone 6的自適應佈局iPhone
- css佈局之左側固定右側自適應佈局CSS
- Android XML靈活佈局之 EditText實現自適應高度同時限制最小和最大高度AndroidXML
- 兩列自適應佈局方案整理
- 三列寬度自適應佈局
- display:table-cell自適應佈局
- css三列自適應佈局效果CSS
- 【HTML / CSS】使用position自適應佈局HTMLCSS
- Web自適應佈局那些事兒Web
- 短視訊平臺原始碼,彈性佈局實現自適應高度cell原始碼
- html iframe高度自適應HTML
- TabelViewCell高度自適應View
- 兩列居中寬度自適應佈局
- QT Creator/QT Designer佈局自適應QT
- 頁面佈局自適應之@media screen
- CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應)CSS
- 根據螢幕高度自適應元素高度
- 一列居中寬度自適應佈局
- 小程式Swiper高度自適應
- textarea高度自適應詳解
- iframe 跨域高度自適應跨域
- jQuery textarea框高度自適應jQuery
- UITableViewCell自適應圖片高度UIView
- 移動端web自適應適配佈局解決方案Web
- 學習筆記:自適應佈局,多螢幕適配筆記
- 構建Android自適應佈局應用方案解析Android
- flex佈局兩邊固定寬 中間自適應Flex
- css佈局,左右固定中間自適應實現CSS
- HTML流動佈局各種寬度自適應HTML
- 移動端自適應佈局的最好工具-remREM
- iframe自適應高度的外掛