這次要說的是控制EasyUI的高度，平時我公司的項目，用EasyUI較多，然后datagrid這個組件是用的非常多的。平時我們都是固定高度，常見代碼如下：
<table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">
</table>
然后本次有些特殊的地方在於，本次公司想讓高度自適應屏幕，就是在不同的高度的瀏覽器里面，這個table始終全屏。我首先想到的是，通過js來獲取瀏覽器高度，再來一個$("#tt").css(“height",xxx)不就搞定了嘛。。。
后來發現，這個不可行，因為在瀏覽器全端渲染的時候，table代碼
已經
改變很多，
不能繼續用id來控制了，需要用到一下代碼：
邏輯大概是：通過頁面加載，然后獲取瀏覽器高度，然后再減去頭部和尾部的高度，就得出中間高度，然后就是datagrid的高度，然后再通過外圍的ID找到真正控制EasyUI DataGrid高度的類，然后再給他設置高度，代碼如下：
<div id="top" class="top">
<div class="topMenu">
<div class="topIcon">
<a title="返回后台首頁" href="index.aspx">
<img src="../img/home.png" alt="返回后台首頁" /></a>
</div>
<div class="topIcon">
<a title="退出登陸" href="../index.aspx">
<img src="../img/exit.png" alt="退出登陸" /></a>
</div>
<div class="topCloum">
</div>
<div class="topIcon" style="margin-left: 50px; margin-top: 20px;">
<div class="line" style="height: 70px;">
<img src="../img/pic.png" />
</div>
<div class="line" style="height: 40px; text-align: left; color: white; font-weight: bold; line-height: 35px; text-indent: 10px; font-size: 18px;">
Admin
</div>
</div>
</div>
</div>
<div id="center" class="center" style="background: url(../img/bookMain.png) 0 0 repeat;">
<div id="lineForDataGrid" class="line">
<table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">
</table>
</div>
</div>
<div id="bottom" class="bottom" style="background: url(../img/bookBottom.png) 0 0 no-repeat;">
用戶管理
</div>
<script type="text/javascript">
$(function () {
var vWindowHeight = document.body.scrollHeight;
var vCenterHeight = vWindowHeight - 131 - 82;
$("#center").height(vCenterHeight);
var vMargionTop = (vCenterHeight - 360) / 2;
$(".centerBook").css("margin-top", vMargionTop);
fLoadTable();//加載參數
$('#tt').datagrid('reload', {
method: 'firstLoad'
});
//設置高度
$("#lineForDataGrid").find(".panel").find(".datagrid-wrap").css("height", vCenterHeight + "px");
})
對代碼看不懂，建議下載附件來看。有完整代碼。
好了，本次經驗分享到此結束，
轉載請保留原作者地址以及姓名，附件如果未能正常上傳，請在評論中留下郵箱，我看到后會發給您。
（本人無償分享經驗，有償接單制作APP（基於MUI，HTML5+Webservice）和中小型管理系統（基於EasyUI，asp.net，例如項目管理，中介管理，公司內部管理系統、農家樂系統等。），有需要可以聯系我。）；
作者：南宮蕭塵
E-mail：314791147@qq.com
QQ：314791147
日期：2016-04-25