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

经历：easyui的layout自适应高度布局的更多相关文章

  1. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  2. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

  3. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  4. CI 笔记3 （easyui 的layout布局，最小化layout原型）

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  5. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  6. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  7. swift学习 - tableView自适应高度1（xib autoLayout）

    tableView自适应高度 效果图: 源码: class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSo ...

  8. RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...

  9. IOS UILabel 根据内容自适应高度

    iOS Label 自适应高度  适配iOS7以后的版本 更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelVie ...

随机推荐

  1. 远程控制篇：在DELPHI程序中拨号上网

    用MODEM拨号上网,仍是大多数个人网民选择上网的方式．如果能在我们的应用程序中启动拨号连接(如IE浏览器程序中的自动拨号功能),无疑将会方便我们的软件用户(不用再切换应用程序,运行拨号网络),提高我 ...

  2. hdoj 5124 lines【线段树+离散化】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5124 题意:给你n段区间,他们有重合的点A,问你重合最多次的点A重合多少次 题解:对区间离散化后,维护 ...

  3. [OC Foundation框架 - 16] NSObject和反射

    1.判断某个对象是否属于一个类 Student *stu = [[[Student alloc] init] autorelease]; BOOL result= [stu isKindOfClass ...

  4. 只允许input框输入数字，输入其他的键的时候，直接不显示的方法

    function numInteger(){ if((event.keyCode>=48 && event.keyCode<=57)  || (event.keyCode& ...

  5. 【Away3D代码解读】（二）：渲染核心流程（简介、实体对象收集）

    我之前解析过Starling的核心渲染流程,相比Away3D而言Starling真的是足够简单,不过幸运的是两者的渲染流程是大体上相似的:Starling的渲染是每帧调用Starling类中的rend ...

  6. spring aop 的一个demo（未完，待完善）

    假设我们有这样的一个场景 : 对于一个类的众多方法,有些方法需要从缓存读取数据,有些则需要直接从数据库读取数据.怎样实现呢? 实现方案有多种.下面我说下常见的几种实现方案 : 1.直接采用spring ...

  7. java实现生产者消费者问题

    引言 生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,如下图所示,生产者向空间里存放数据,而消费者取用数据,如果不加以协调可能会出现以下情况: 生产者消费者图 ...

  8. android应用程序fps meter[帧数显示]的分析 —— 浅谈root的风险 (3)

    上节已经详细说了下注入过程,最后寄生进程在宿主进程中下了个蛋,这下完的蛋有什么作用呢?接下来再具体分析一下. lib0的感染过程分析 对于本例注入的so动态库,首先看一下so的符号: $ readel ...

  9. Asp.net中使用资源文件实现网站多语言

    首先需要新建一个ASP.NET Web Application.然后右键项目文件Add->Add ASP.NET Folder->App-GlobalResources. 新建好资源文件夹 ...

  10. Nginx开发从入门到精通

    nginx由于出色的性能,在世界范围内受到了越来越多人的关注,在淘宝内部它更是被广泛的使用,众多的开发以及运维同学都迫切的想要了解nginx模块 的开发以及它的内部原理,但是国内却没有一本关于这方面的 ...