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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
5个实用的JavaScript新特性
Jun 16 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安装为Apache DSO
2006/10/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python中的句柄操作的方法示例
2019/06/20 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
考博专家推荐信模板
2013/12/02 职场文书
搞笑征婚广告词
2014/03/17 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL