最近在把以前写的一个项目改成用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 464A】No to Palindromes!

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 因为原序列没有任何长度超过2的回文串. 所以,我们在改变的时候,只要时刻保证改变位置s[i]和s[i-1]以及s[i-2]都不相同就好. 因为 ...

  2. Oracle 关于几个随机函数sys_guid、dbms_random.random、dbms_random.value（取随机的结果集）

    sys_guid():SYS_GUID (),是Oracle 8i 后提供的函数.SYS_GUID产生并返回一个全球唯一的标识符(原始值)由16个字节组成.更适合多个数据库数据集成时使用(--源自百度 ...

  3. hdu 2602 简单0-1背包模板题

    #include<stdio.h> #include<string.h> #define N 1100 int dp[N]; int main() { int n,t,m,a[ ...

  4. jQuery动态添加表格1

    用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...

  5. tyvj1117 拯救ice-cream

      背景 天好热……Tina顶着那炎炎的烈日,向Ice-cream home走去……可是……停电了……冰淇淋们躺在Ice-cream home的冰柜里,慢慢地……慢慢地……融化…………你说,她能赶在冰 ...

  6. Linux下汇编语言学习笔记73 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  7. 从尾到头打印链表——剑指Offer

    https://www.nowcoder.net/practice/d0267f7f55b3412ba93bd35cfa8e8035?tpId=13&tqId=11156&tPage= ...

  8. vim 安装插件的网站

    我在想, 怎么让vim可以 显示目录结构呢?一个目录里面的文件? vim插件的网站:http://www.vim.org/scripts/script.php?script_id=1658 原文:ht ...

  9. 第5章 Cisco测试命令和TCP/IP连接故障处理

    第5章 Cisco测试命令和TCP/IP连接故障处理 一.故障处理命令 1.show命令: 1) 全局命令: show version :显示系统硬件和软件版本.DRAM.Flash show sta ...

  10. Python3基础（四） 条件与循环控制

    Python的流程控制语句包括:if条件语句.while循环语句.for循环语句.range函数以及break.continue.pass控制语句.这些语句在Python中的语义和在其他语言中基本是一 ...