当前位置：首页 > news >正文

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

news 来源：原创 2024/5/20 20:59:06

　　在使用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>