【连载】研究EasyUI系统— Layout组件
2018-12-24 本文已影响7人
我想我是人
layout看它的名称便知道是一个用于布局的组件。事实上也是如此，layout由五个部分组成，分别位于屏幕的上、下、左、右、中五个位置（在easyui中用东、南、西、北、中来描述）。
layout效果图
上图便是layout组件的效果图。layout依赖于panel和resizable两个组件，因此继承了两个组件的属性。layout组件除了中部的区域外，其他四个区域都是可选的，在实际项目中按需增删。另外，这四个区域也是可伸缩的。我们依然通过导航菜单、tab页和数据列表的组合，描述layout组件的用法。
先看一下layout组件制成导航菜单的效果图。
layout导航菜单效果图
同时附上代码。
layoutDemo.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<title>layoutDemo</title>
<style>
a {
text-decoration:none;
font-size: 13px;
color:black
}
.nav-item {
padding: 10px;
border: none;
}
</style>
<script>
/* addTab方法用来新建或切换tab页 */
function addTab(url,title) {
if ($("#content_tab").tabs('exists', title)) {
$("#content_tab").tabs('select', title);
} else {
$("#content_tab").tabs('add', {
title: title,
href: url,
closable: true,
cache:false
});
}
}
</script>
</head>
<body class="easyui-layout" id="layout">
<!-- north区域使用了layout的href属性，加载pageHeader.php作为页面头部 -->
<div style="height:80px;" data-options="region:'north',split:false,href:'pageHeader.php'" ></div>
<div style="width:200px;" data-options="region:'west',title:'导航菜单',split:true">
<div class="nav-item">
<table>
<tr>
<td style="height:30px;"><img src="images/icon_menu.png" alt="" /></td>
<td>
<a href="javascript:void(0);" onclick="addTab('pageDepartment.php','部门信息')">部门信息</a>
</td>
</tr>
<tr>
<td style="height:30px;"><img src="images/icon_menu.png" alt="" /></td>
<td>
<a href="javascript:void(0);" onclick="addTab('#','人员信息')">人员信息</a>
</td>
</tr>
</table>
</div>
</div>
<!-- center区域包含tab组件，用来打开各页 -->
<div data-options="region:'center'" style="padding:5px">
<div id="content_tab" name="content_tab" class="easyui-tabs" style="width:100%;height:auto;" data-options="plain:true"></div>
</div>
</body>
</html>
pageHeader.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="height:78px;background: #efefef">
<span style="font-size: 26px;font-family: '黑体';line-height: 78px;padding-left: 20px;">Layout组件示例页面</span>
</div>
</body>
</html>
pageDepartment.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<title>部门信息</title>
</head>
<body>
<div class="container" style="overflow-x: hidden">
<!-- “部门信息”页面包含了datagrid组件，我们会对该组件专门讲解
datagrid组件从dep.json读取信息并显示 -->
<div class="easyui-datagrid" id="gridDep"></div>
</div>
<script>
$("#gridDep").datagrid({
pagination:true,
title:'部门信息',
fitColumns:false,
url:'dep.json',
rownumbers: true,
singleSelect:true,
loadMsg: '正在获取数据，请稍后',
pageSize:20,
pageList:[20],
columns:[[
{field:'ck',checkbox:true},
{field:'dep1',title:'序号',align:'center',hidden:true},
{field:'dep2',title:'部门名称',align:'center',width:'20%'},
{field:'dep3',title:'成立时间',align:'center',width:'20%'},
{field:'dep4',title:'上级部门',align:'center',width:'20%'},
{field:'dep5',title:'部门主管',align:'center',width:'18%'},
{field:'dep6',title:'分管领导',align:'center',width:'15%'}
]]
});
</script>
</body>
</html>
dep.json
[
{"dep1": 1,"dep2": "总务部","dep3": "2014-1-1","dep4": "公司总部","dep5": "张三","dep6": "王总"},
{"dep1": 2,"dep2": "销售部","dep3": "2014-1-5","dep4": "公司总部","dep5": "李四","dep6": "李总"},
{"dep1": 3,"dep2": "软件事业部","dep3": "2014-3-20","dep4": "公司总部","dep5": "王五","dep6": "王总"},
{"dep1": 4,"dep2": "硬件事业部","dep3": "2014-5-6","dep4": "公司总部","dep5": "赵六","dep6": "王总"},
{"dep1": 5,"dep2": "销售一中心","dep3": "2014-2-6","dep4": "销售部","dep5": "小明","dep6": "李四"},
{"dep1": 6,"dep2": "系统集成与维护中心","dep3": "2014-3-25","dep4": "软件事业部","dep5": "小强","dep6": "王五"}
]
上述代码简单地展现了layout组件的基本用法。里面涉及到datagrid组件，我们会另起一文讲述。
我们可以认为layout组件由框架和面板两部分组成。根据上述代码，<body>便是框架，因为它包含了内部三个面板。面板自然就是包含于<body>中的三个<div>。
layout组件属性（框架）
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| fit | 布尔值 | false | 如true，组件则填充父容器。 |
layout组件属性（面板）
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| title | 字符串 | null | 面板标题。 |
| region | 字符串 | 面板位置。共“north”、“south”、“west”、“east”、“center”五种。 | |
| border | 布尔值 | true | 是否显示面板边框。 |
| split | 布尔值 | false | 是否显示分隔栏，如有分隔栏，用户可改变面板大小。 |
| iconCls | 字符串 | null | 面板头部的图标样式。 |
| href | 字符串 | null | 指定该属性后，面板会加载该属性所指定的页面。 |
| collapsible | 布尔值 | true | 是否显示可伸缩按钮。 |
| minWidth | 数值 | 10 | 面板最小宽度。 |
| minHeight | 数值 | 10 | 面板最小高度。 |
| maxWidth | 数值 | 10000 | 面板最大宽度。 |
| maxHeight | 数值 | 10000 | 面板最大高度。 |
layout组件中有关面板的属性其实都不复杂，也不用太多讲解。
region、title、href用法已在代码layoutDemo.php中详细展示。west面板中，collapsible 属性设置为true，便可以见到west面板右上角的可伸缩按钮图标。iconCls属性用法请见panel部分。
split效果图如下。
split属性效果图
上图中，我们将“北部区域”的面板(region 属性值为“north”)的split属性设为false,意为不显示分隔栏。同时又将“西部区域”的面板(region 属性值为“west”)的split属性设为true，图中可见“西部区域”与“中部区域”之间有一条分隔栏，用户可以拖动上述分隔栏调整“西部区域”面板大小。
layout组件方法：
| 方法名称 | 参数 | 描述 |
|---|---|---|
| resize | param | 调整layout组件大小。 |
| panel | region | 返回指定的面板对象。 |
| collapse | region | 收缩指定的面板。 |
| expand | region | 展开指定的面板。 |
| add | options | 新增面板。 |
| remove | region | 删除指定的面板。 |
resize方法用于调整layout组件（是容器而不是面板）参数param是一组json，包含宽度和高度。
$("#layout").layout("resize", {width:"80%", height:400});
panel、collapse、expand、remove功能比较简单，他的参数是面板区域。除panel外，其他三个方法的参数分别为“north”、“south”、“west”、“east”，panel方法还增加了“center”参数。
$("#layout").layout("remove","north");
add方法用法请参见tabs组件一文。https://www.jianshu.com/p/d2b135b77125
