最近在把以前写的一个项目改成用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. FusionCharts简单教程（四）-----基本数字格式

          在统计图例中什么是最基本,最重要的元素?那就是数据.一个数据的统计图像那就是一堆空白.但是数据存在多种形式,比如小数,比如千分位等等.又如若一个数据是12.000000001,对于数据要求 ...

  2. 手把手教你用python打造网易公开课视频下载软件4-图形化界面

    上一篇讲解完函数:def getdownLoadInfo (url): 传入公开课的url地址,就可以提取课程的信息,这一篇讲解一下如何编写图像化界面.大概思考一下图像化界面需要的内容: (1)一个标 ...

  3. XSS危害——session劫持

    在跨站脚本攻击XSS中简单介绍了XSS的原理及一个利用XSS盗取存在cookie中用户名和密码的小例子,有些同学看了后会说这有什么大不了的,哪里有人会明文往cookie里存用户名和密码.今天我们就介绍 ...

  4. 我所了解的chrome

    Chrome的隐身模式 先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗 ...

  5. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  6. iOS-远程推送

    说到远程推送,应该用的也挺多的,今天就基于SEA的云推送服务,做一个推送的小demo,来了解一下iOS中的远程推送是怎么一回事儿,首先你得有苹果的开发者账号,好咸蛋也差不多了,主要内容走起. 一.准备 ...

  7. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  8. vuejs学习网站推荐

    vuejs学习网站推荐 https://coligo.io/

  9. Web Workers 的基本信息

    问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...

  10. Android入门(二十)HttpURLConnection与HttpClient

    原文链接:http://www.orlion.ga/679/ 在 Android上发送 HTTP请求的方式一般有两种,HttpURLConnection和 HttpClient. 一.HttpURLC ...