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

1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他div的话，datagrid就不能很好的自动适应窗体。如查datagrid有分页控件，分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好的解决自适应问题。
代码如下：
 
        <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：基于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-layout 布局自适应的更多相关文章

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

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

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. easyui layout布局的属性说明

    layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...

  4. EasyUI Layout 布局

    1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...

  5. easyui layout 布局title

    <script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($( ...

  6. EasyUI - Layout 布局控件

    效果: Html代码: <div id="cc" class="easyui-layout" style="width: 600px; heig ...

  7. JQuery EasyUI Layout 在from布局自适应窗口大小

    在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...

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

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

  9. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

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

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

随机推荐

  1. 【译】AS3利用CPU缓存

    利用CPU缓存   计算机有随机存取存储器RAM(译注:即我们常说的内存),但有更快形式的存储器.如果你希望你的应用程序的快速运行,你需要知道这些其他的存储器.今天的文章中讨论了它们,并给出了两个AS ...

  2. 用python语言讲解数据结构与算法

    写在前面的话:关于数据结构与算法讲解的书籍很多,但是用python语言去实现的不是很多,最近有幸看到一本这样的书籍,由Brad Miller and David Ranum编写的<Problem ...

  3. iOS——自定义Segue实现总结

    在阅读了iOS 8自定义动画转场上手指南后,刚开始不理解,后来慢慢消化了,现在总结如下: 1. 自定义Segue关键在于继承UIStoryboardSegue并重写perform方法 2. 动画可以在 ...

  4. IOS 多线程03-GCD

    如果在本文之前要了解一下线程的基本知识,请访问下面的网址:http://www.cnblogs.com/alunchen/p/5337608.html 1.简介 GCD不仅适用于Object-C,也适 ...

  5. jmx server 和jmx client

    启动jmx server 和jmx client,通过jconsole进入jmx server 然后通过其中远程进程,进入jmx client: 发现,两者可用的tab页不同, MBean的数量类型也 ...

  6. RHCE 系列（九）：如何使用无客户端配置 Postfix

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0220/152.html?1456382561 尽管现在有很多在线联系方式,电子邮件仍然是一个人传递 ...

  7. 日志分析系统——Hangout源码学习

    这两天看了下hangout的代码,虽然没有运行体验过,但是也算是学习了一点皮毛. 架构浅谈 Hangout可以说是java版的Logstash,我是没有测试过性能,不过据说是kafka这边性能要高出L ...

  8. vagrant homestead laravel 编程环境搭建

    这里面其实坑不少的,首先介绍 VirtualBox  虚拟机,windows下安装linux必须用的一个工具 vagrant 封装虚拟机的一个软件,可以设置好系统,安装好软件,什么时候用,直接导入就行 ...

  9. iOS-数据持久化-CoreData

    CoreData详解 介绍: 在Cocoa环境下,如果你想使用数据库(如sqlite),你可以使用sql语句的方式通过相关的工具类进行数据库的直接操作.当然你也可以通过别人封装之后的一些简单框架,使得 ...

  10. Android 神兵利器—— Git 常用命令

    总结的Android 工具类文章: Android 神兵利器-- Adb 常用命令 Android 神兵利器-- Git 常用命令 在项目研发时,经常使用Git,基本的命令有六个,通过下面的图片我们可 ...