EasyUI学习每天一章之第二章 --布局、导航和数据网格

布局、导航和数据网格

api下载：EasyUI1.4.3api点我下载

布局和导航

　　EasyUI的布局采用了布局容器，布局容器有5个区域：东部（east）、西部（west）、南部（sourth）、北部（north）和中间（上北下南、左西右东）。

　　

1. 上面的页面中 上标题属于北部区域，菜单部分属于西部区域，显示内容主区域属于中间区域。
2. 中间区域面板是必须的，边缘的面板都是可选的。
3. 每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

 布局Layout有自己的属性。而布局的五个区域每个区域都是一个面板（panel）对象

属性名	类型	描述	默认值
fit	boolean	如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。	False

 　　区域面板是布局的东西南北中五个部分。每个区域面板也有自己的属性，它的属性和panel组件的属性类似，下面的是公共的和新增的属性

属性名	类型	描述	默认值
title	string	布局面板标题文本	null
region	string	布局面板位置，可用的值有：north, south, east, west, center
border	boolean	为true时显示布局面板边框	true
split	boolean	为true时用户可以通过分割栏改变面板大小	false
iconCls	string	一个包含图标的CSS类ID，该图标将会显示到面板标题上	null
href	string	用于读取远程站点数据的URL链接	null
collapsible	boolean	定义是否显示折叠按钮	false
minWidth	number	最小面板宽度	10
minHeight	number	最小面板高度	10
maxWidth	number	最大面板宽度	10000
maxHeight	number	最大面板高度	10000

 任务2:使用div完成1个局部布局效果

  　　效果图：

                代码地址:http://jsrun.net/uQqKp/edit

 　　　　　　注意：东西面版只需要宽度 南北面板只需要高度

 任务3：使用body完成1个在项目中真正能用的完整宏观布局。

　　效果图:

　　　　

 

 代码地址:http://jsrun.net/MQqKp/edit

 任务4：完成1个如下图所示的复杂布局

　　

代码地址：http://jsrun.net/SQqKp/edit

点我下载外部json文件

 任务5：我们显示《Oracle数据库高级查询和管理》这本书的结构，用tree控件描述，运行效果如下：　

 

代码地址：http://jsrun.net/KzqKp/edit

 任务6：从JSON数据中，加载数据，显示树

　　效果图:

代码地址:http://jsrun.net/pzqKp/edit

点我下载外部json文件

 任务七和任务八都放到github上了 可以自行查看  地址：https://github.com/mysBanana/easyui/tree/master/easyui%E5%AD%A6%E4%B9%A0/%E7%AC%AC%E4%BA%8C%E7%AB%A0

 

xmind文档下载地址

转载于:https://www.cnblogs.com/nawei/p/8387005.html