EasyUI布局 高度自适应


Posted in Javascript onJune 04, 2016

最近在把以前写的一个项目改成用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高度自适应的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
javascript获取select标签选中的值
Jun 04 #Javascript
jQuery Mobile 触摸事件实例
Jun 04 #Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 #Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 #Javascript
javacript获取当前屏幕大小
Jun 04 #Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 #Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 #Javascript
You might like
十天学会php之第八天
2006/10/09 PHP
PHP生成便于打印的网页
2006/10/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP使用递归生成文章树
2015/04/21 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JS中类或对象的定义说明
2014/03/10 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python多线程分块读取文件
2019/08/29 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
优秀的毕业生的自我评价
2013/12/12 职场文书
2014年情人节活动方案
2014/02/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
质量标语大全
2014/06/12 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
欠条样本
2015/07/03 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS