经历：easyui的layout自适应高度布局

时间：2023-03-08 23:44:31
经历：easyui的layout自适应高度布局

　　在使用easyui的layout布局的时候，在某种情况下，我们会在后续的逻辑中修改一下layout的某个region的高度，那么该怎么做呢？

　  我就遇到了这样的情况，今天需求经理提出了一个需求：认证用户可以单票查询和批量查询，而注册用户只能单票查询。

　　面对这个需求，我需要再判断用户的类型之后，在对region中的代码进行控制，这样在页面初始化时候，region的高度就得不到确定了，只能在Js代码中去控制。经过多方的查询，我终于找到了解决方案了。

具体代码如下：

<!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>

相关文章