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 写类方式之七
Jul 05 Javascript
javascript中的new使用
Mar 20 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
原生js实现日期联动
Jan 12 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
微信小程序实现上拉加载功能
Nov 20 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 md5下16位和32位的实现代码
2008/04/09 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
javascript实现画板功能
2020/04/12 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python多进程实现进程间通信实例
2017/11/24 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python中按键来获取指定的值
2019/03/02 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
应届生会计求职信
2013/11/11 职场文书
采购员岗位职责
2013/11/15 职场文书
质检员岗位职责
2013/12/17 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
复兴之路观后感3000字
2015/06/02 职场文书