最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局（easyui-layout）的问题，经过实验，最后问题解。

1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他div的话，div 就会把datagrid挤压到窗体的下方。如果datagrid有分页控件，分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好的解决自适应问题。
 
糟糕的写法：
 
 　　<div>查询条件</div>
　　<table class="easyui-datagrid" fit="true"></table>
 
正确的写法：
 
        <div class="easyui-layout"data-options="fit:true">
            <div data-options="region:'north'" style="height:100px">
                <div>查询条件</div>
            </div>
            <div data-options="region:'center'">
                <table class="easyui-datagrid" fit="true"></table>
            </div>
        </div>
 
2：基于body标签的easyui-layout当浏览器窗口大小改变时,easyui-layout可以根据窗口的大小来调整自己的大小.基于div标签的easyui-layout如果想拥有上述功能必须设置easyui-layout的属性fit等于true.
 
情形1：
 
        <body class="easyui-layout">
            <div data-options="region:'north'" style="height:100px">
                <table id="part1"></table>
            </div>
            <div data-options="region:'center'">
                <table id="part2"></table>
            </div>
        </div>
 
情形2：
 
        <div class="easyui-layout"data-options="fit:true">
            <div data-options="region:'north'" style="height:100px">
                <table id="part1"></table>
            </div>
            <div data-options="region:'center'">
                <table id="part2"></table>
            </div>
        </div>
 
3：在html中定义easyui时，下面两种写法是一样的。即easyui控件的属性可以写在dataoptions属性里，也可以把这些属性写到标签上。
 
写法1：
 
        <div class="easyui-layout"data-options="fit:true">
            <div data-options="region:'north'" style="height:100px">
                <table id="part1"></table>
            </div>
            <div data-options="region:'center'">
                <table id="part2"></table>
            </div>
        </div>
 
写法2：
 
<div class="easyui-layout"fit="true">
　　<div region="north"style="height:100px;">
　　　　<table id="part1"></table>
　　</div>
　　<div region="center">
            <table id="part2"></table>
　　</div>
</div>

easyui datagrid 高度布局自适应的更多相关文章

  1. easyui datagrid高度自适应问题

    最近在使用datagrid的时候,发现在panel中嵌入一个datagrid时,当panel缩小时,datagrid下面会有一块空白,datagrid高度不能自适应,解决方法是在datagrid外面加 ...

  2. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  3. 一步步实现 easyui datagrid表格宽度自适应，效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  4. easyUI datagrid 列宽自适应(简单 图解)（转）

    响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...

  5. 如何使easyui的datagrid 高度自适应

    如何使easyui的datagrid 高度自适应? 最开始使用easyui的datagrid加载数据时,对其设置的高度都是固定值,数据较多时table表现为滚动条形式.某天,老大突然需要datagri ...

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

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  7. EasyUI datagrid自适应问题解决

    在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应 解决办法是把fit设为false. 但这样设置后又有个问题,如果把colum ...

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

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

  9. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

随机推荐

  1. codeforces round #394 (div. 2) A\B 题解

    开始啦~ 始まった T1 #include <stdio.h> int l,r,even,odd; void Jud(){ for(int i=1;i<=200;i++){ for( ...

  2. Java基础学习总结（77）——Java枚举再总结

    在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...

  3. 吧,其实spring自带的BeanUtils就有这样的功能,引入spring-beans和spring-core之后,就有BeanUtils.copyProperties(a, b);可以实现两个javabean之间的相互拷贝,自己写的就当是研究咯---https://www.cnblogs.com/NieXiaoHui/p/7150928.html

    吧,其实spring自带的BeanUtils就有这样的功能,引入spring-beans和spring-core之后,就有BeanUtils.copyProperties(a, b);可以实现两个ja ...

  4. poj 1562 简单深搜

    //搜八个方向即可 #include<stdio.h> #include<string.h> #define N 200 char ma[N][N]; int n,m,vis[ ...

  5. [USACO 4.2] 完美的牛栏

    ★★☆   输入文件:stall4.in   输出文件:stall4.out   简单对比 时间限制:1 s   内存限制:128 MB USACO/stall4(译by Felicia Crazy) ...

  6. CentOS 安装Oracle 11g R2

    CentOS 安装Oracle 11g R2 学习了-/ https://www.osyunwei.com/archives/5445.html

  7. [poj1704]Georgia and Bob_博弈论

    Georgia and Bob poj-1704 题目大意:题目链接 注释:略. 想法:我们从最后一个球开始,每两个凑成一对.如果有奇数个球,那就让第一个球和开始位置作为一对. 那么如果对手移动的是一 ...

  8. PHP小白学习日程之旅

    我是一名专升本的学生,在这里偶然接触了博客园,我觉得非常好,每天可以在这里看别人的分享与学习,还会在大学学习俩年,我只想专注的吧自己的技术提高,跟园子里的朋友们一起学习与分享加油!!!!!!!!!!! ...

  9. A Taxonomy for Performance

    A Taxonomy for Performance In this section, we introduce some basic performance metrics. These provi ...

  10. 架构师速成6.7-设计开发思路-uml

    uml是什么东西?统一建模语言.一门语言.是用来进行软件设计的一门语言. 事实上一门语言的诞生并不伟大,让大多数人都使用才足够伟大. uml就是一门伟大的语言.由于眼下软件设计的唯一语言就是它. UM ...