經歷：easyui的layout自適應高度佈局

時間 2019-11-29

原文原文鏈接

　　在使用easyui的layout佈局的時候，在某種狀況下，咱們會在後續的邏輯中修改一下layout的某個region的高度，那麼該怎麼作呢？javascript

　我就遇到了這樣的狀況，今天需求經理提出了一個需求：認證用戶能夠單票查詢和批量查詢，而註冊用戶只能單票查詢。css

　　面對這個需求，我須要再判斷用戶的類型以後，在對region中的代碼進行控制，這樣在頁面初始化時候，region的高度就得不到肯定了，只能在Js代碼中去控制。通過多方的查詢，我終於找到了解決方案了。html

具體代碼以下：java

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>easyui layout</title>
     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
 </head>
 <body>
    <h2>Auto Height for Layout</h2>
    <p>This example shows how to auto adjust layout height after dynamically adding items.</p>
    <div id="cc" style="width:700px;height:350px;">
        <div data-option="region:'north'" style="height:150px;">
            <div id="SingleQuery">……</div>
            <div id="MoreQuery" style="display:none;">……</div>
        </div>
        <div data-option="region:'center'" >
            <table id="td"></table>
        </div>
    </div>
 </body>
 <script type="text/javascript">
    $(function(){
        //用戶類型
        var userType='..';
        if(userType=='認證用戶'){
            $("#MoreQuery").show();
            //region:north 的調整高度
            setHeight('220px');
        }
    });

    function setHeight(num){
        var c=$("#cc");
        var p=c.layout('region','north');  //get the north panel
        var oldHeight=p.panel('panel').outerHeight(); //得到north panel 的原高度
        p.panel('resize',{height:num}); //設置north panel 新高度
        var newHeight=p.panel('panel').outerHeight();
        c.layout('resize',{height:c.height()+newHeight-oldHeight});  //從新設置整個佈局的高度
    }
 </script>
</html>