最近在把以前写的一个项目改成用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 布局自适应的更多相关文章

  1. Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 Easyui入门视频教程 第03集---Easyui布局 目录 -----------------------   Easyui入门视频教程 ...

  2. EasyUI学习总结(六)——EasyUI布局

    一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

  3. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  4. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  5. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  6. EasyUI学习总结(六)——EasyUI布局（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4088198.html 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必 ...

  7. Unity GUI自适应屏幕分辨率（一）布局自适应

    这里我们先谈第一个问题坐标矩阵变化实现布局自适应. 选取基准尺寸 通常你需要选择一个基准的屏幕尺寸,象现在开发的应用也需要跨平台在iOS(iPhone/iPad)/Android都可以运行,我这边选取 ...

  8. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  9. easyui datagrid 高度布局自适应

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

随机推荐

  1. 【MySQL】binlog_format以及binlog事务记录分析

    MySQL官方对于binlog_format参数的说明: http://dev.mysql.com/doc/refman/5.5/en/binary-log-setting.html binlog_f ...

  2. WP8__从windowsphone app store 中根据app id获取应用的相关信息(下载网址及图片id等)

    windows phone 官网应用商店地址 http://www.windowsphone.com/zh-cn/store/featured-apps------------------------ ...

  3. angular service讲解

    controller是相对独立的,也就是说,两个controller之间,内存是不共享的,这个controller是无法访问其他其他controller的属性或者方法的; 以前,我都是通过localS ...

  4. SQL Server 修复数据库 相关 脚本 之 DBCC CHECKDB 用法 来自同事分享

    DBCC CHECKDB 用法详解, 手工修复数据库 1. 快速修复 DBCC CHECKDB ('数据库名',REPAIR_FAST) 2.重建索引并修复 DBCC CHECKDB ('数据库名', ...

  5. ASP.NET中的Eval与DataBinder.Eval()方法

    1.bind是一种双向数据绑定,有数据源时才会有改变. 2..net1.x版本中有DataBinder(Container.DataItem,"数据项")  单向数据绑定 .net ...

  6. 1. Hello UWP

    1. UWP UWP,Universal Windows Platform,也就是 Windows 10 新推出的通用平台应用,只要一次编码,即可运行在 Windows 10 电脑以及手机上,甚至可以 ...

  7. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  8. .net框架

    转载:http://www.cnblogs.com/JimmyZhang/archive/2012/11/27/2790759.html 本书是一本讲解.NET技术的书籍,目标读者群也是在.NET框架 ...

  9. Silverlight 读取配置文件

    1.ExtranetLink.xml <?xml version="1.0" encoding="utf-8" ?> <menus> & ...

  10. POI中设置Excel单元格格式样式（居中，字体，边框等）

    创建sheet什么的就不多说了,直接进入正题 HSSFCellStyle cellStyle = wb.createCellStyle();   一.设置背景色: cellStyle.setFillF ...