【连载】研究EasyUI系统— Layout组件

来源：互联网发布：办公软件下载安装编辑：程序博客网时间：2024/05/16 05:21

　　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>便是框架，因为它包含了内部三个面板。面板自然就是包含于中的三个<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用法已在代码x-1中详细展示。west面板中，collapsible 属性设置为true，便可以见到west面板右上角的可伸缩按钮图标。iconCls属性用法请见panel部分。
（http://blog.csdn.net/redeg/article/details/54311658）
　　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组件一文。
（http://blog.csdn.net/redeg/article/details/56844983）

0 0