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

            <table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">

</table>

 
然后本次有些特殊的地方在于,本次公司想让高度自适应屏幕,就是在不同的高度的浏览器里面,这个table始终全屏。我首先想到的是,通过js来获取浏览器高度,再来一个$("#tt").css(“height",xxx)不就搞定了嘛。。。
            后来发现,这个不可行,因为在浏览器全端渲染的时候,table代码已经改变很多, 不能继续用id来控制了,需要用到一下代码:
逻辑大概是:通过页面加载,然后获取浏览器高度,然后再减去头部和尾部的高度,就得出中间高度,然后就是datagrid的高度,然后再通过外围的ID找到真正控制EasyUI DataGrid高度的类,然后再给他设置高度,代码如下:
    <div id="top" class="top">
        <div class="topMenu">
            <div class="topIcon">
                <a title="返回后台首页" href="index.aspx">
                    <img src="../img/home.png" alt="返回后台首页" /></a>
            </div>
            <div class="topIcon">
                <a title="退出登陆" href="../index.aspx">
                    <img src="../img/exit.png" alt="退出登陆" /></a>
            </div>
            <div class="topCloum">
            </div>
            <div class="topIcon" style="margin-left: 50px; margin-top: 20px;">
 
                <div class="line" style="height: 70px;">
                    <img src="../img/pic.png" />
                </div>
                <div class="line" style="height: 40px; text-align: left; color: white; font-weight: bold; line-height: 35px; text-indent: 10px; font-size: 18px;">
                    Admin
                </div>
            </div>
        </div>
    </div>
    <div id="center" class="center" style="background: url(../img/bookMain.png) 0 0 repeat;">
        <div id="lineForDataGrid" class="line">
            <table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">
            </table>
        </div>
    </div>
    <div id="bottom" class="bottom" style="background: url(../img/bookBottom.png) 0 0 no-repeat;">
        用户管理
    </div>
    <script type="text/javascript">
        $(function () {
            var vWindowHeight = document.body.scrollHeight;
            var vCenterHeight = vWindowHeight - 131 - 82;
            $("#center").height(vCenterHeight);
            var vMargionTop = (vCenterHeight - 360) / 2;
            $(".centerBook").css("margin-top", vMargionTop);
            fLoadTable();//加载参数
            $('#tt').datagrid('reload', {
                method: 'firstLoad'
            });
            //设置高度
            $("#lineForDataGrid").find(".panel").find(".datagrid-wrap").css("height", vCenterHeight + "px");
        })
 
 
对代码看不懂,建议下载附件来看。有完整代码。 
 
好了,本次经验分享到此结束,转载请保留原作者地址以及姓名,附件如果未能正常上传,请在评论中留下邮箱,我看到后会发给您。
(本人无偿分享经验,有偿接单制作APP(基于MUI,HTML5+Webservice)和中小型管理系统(基于EasyUI,asp.net,例如项目管理,中介管理,公司内部管理系统、农家乐系统等。),有需要可以联系我。);
 
作者:南宫萧尘  
E-mail:314791147@qq.com
QQ:314791147
日期:2016-04-25 

控制EasyUI DataGrid高度的更多相关文章

  1. easyui datagrid高度自适应问题

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

  2. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  3. easyui datagrid 高度布局自适应

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

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

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

  5. easyui datagrid复选框控制单选

    使用easyui datagrid的时候,由于对数据表格操作太多,并且有单选和多选功能因此采用复选框.但是在单选的状态,使用CheckOnSelect和singleselect时发现,页面有明显延迟, ...

  6. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  7. easyui datagrid 分页略解

    easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...

  8. 初识 easyui datagrid

    首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...

  9. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

随机推荐

  1. shell注释

    sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...

  2. 视频 - 在 VirtualBox 中部署 OpenStack

    大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂,难道大今天我就先帮大家解决环境问题.前两天我抽空在 ...

  3. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  4. %iowait和CPU使用率的正确认知

    resources 理解 %IOWAIT (%WIO) LINUX系统的CPU使用率和LOAD Linux Performance Observability Tools How Linux CPU ...

  5. No plugin found for prefix ‘jetty’ in the current project and in the plugin groups [org.apache.maven.plugins, org.codehaus.mojo] available from the repositories

    maven配置文件(最大的那个)的<pluginGroups></pluginGroups>增加一行如下<pluginGroups><pluginGroup& ...

  6. 【原】npm 常用命令详解

    今年上半年在学习gulp的使用,对npm的掌握是必不可少的,经常到npm官网查询文档让我感到不爽,还不如整理了一些常用的命令到自己博客上,于是根据自己的理解简单翻译过来,终于有点输出,想学习npm这块 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. 在Linux和Windows平台上操作MemoryMappedFile(简称MMF)

    操作系统很早就开始使用内存映射文件(Memory Mapped File)来作为进程间的共享存储区,这是一种非常高效的进程通讯手段..NET 4.0新增加了一个System.IO. MemoryMap ...

  9. Ubuntu(Linux) + mono + xsp4 + nginx +asp.net MVC3 部署

    折腾了一下,尝试用Linux,部署mvc3. 分别用过 centos 和 ubuntu ,用ubuntu是比较容易部署的. 操作步骤如下: 一.终端分别如下操作 sudo su ->输入密码 a ...

  10. 【腾讯Bugly干货分享】微信热补丁Tinker的实践演进之路

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e Dev Club 是一个交流移动 ...