easyui datagrid 高度佈局自適應
阿新 • • 發佈：2018-11-11
最近在把以前寫的一個專案改成用easyui做前端。過程中遇到了不少問題。其中一個就是datagrid不能很好的佈局。想了好多辦法都有侷限。最後想到會不會是佈局（easyui-layout）的問題，經過實驗，最後問題解。
1：比如在專案中用到了datagrid。如果介面比較簡單－－－只有一個datagrid只需要把它的屬性fit 設定為true就能實現自動適應窗體。如果在datagrid上方還有其他div的話，div 就會把datagrid擠壓到窗體的下方。如果datagrid有分頁控制元件，分頁控制元件就看不到了。這個時候就應該用 easyui-layout來分隔窗體來使具體的內容放在easyui-layout不同的部分。這樣就能很好的解決自適應問題。 糟糕的寫法： <div>查詢條件</div> <table class="easyui-datagrid" fit="true"></table> 正確的寫法： <div class="easyui-layout"data-options="fit:true"> <div data-options="region:'north'" style="height:100px"> <div>查詢條件</div> </div> <div data-options="region:'center'"> <table class="easyui-datagrid" fit="true"></table> </div> </div> 2：基於body標籤的easyui-layout當瀏覽器視窗大小改變時,easyui-layout可以根據視窗的大小來調整自己的大小.基於div標籤的easyui-layout如果想擁有上述功能必須設定easyui-layout的屬性fit等於true. 情形1： <body class="easyui-layout"> <div data-options="region:'north'" style="height:100px"> <table id="part1"></table> </div> <div data-options="region:'center'"> <table id="part2"></table> </div> </div> 情形2： <div class="easyui-layout"data-options="fit:true"> <div data-options="region:'north'" style="height:100px"> <table id="part1"></table> </div> <div data-options="region:'center'"> <table id="part2"></table> </div> </div> 3：在html中定義easyui時，下面兩種寫法是一樣的。即easyui控制元件的屬性可以寫在dataoptions屬性裡，也可以把這些屬性寫到標籤上。 寫法1： <div class="easyui-layout"data-options="fit:true"> <div data-options="region:'north'" style="height:100px"> <table id="part1"></table> </div> <div data-options="region:'center'"> <table id="part2"></table> </div> </div> 寫法2： <div class="easyui-layout"fit="true"> <div region="north"style="height:100px;"> <table id="part1"></table> </div> <div region="center"> <table id="part2"></table> </div> </div>