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 检测浏览器类型和版本的代码
Sep 15 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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调用三种数据库的方法(1)
2006/10/09 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP简单日历实现方法
2016/07/20 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
python生成随机mac地址的方法
2015/03/16 Python
Python实现京东秒杀功能代码
2019/05/16 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
2013年高中生自我评价
2013/10/23 职场文书
追悼会上的答谢词
2014/01/10 职场文书
中国合伙人观后感
2015/06/02 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Nginx配置https的实现
2021/11/27 Servers