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

最新推荐文章于 2023-05-16 14:57:58 发布

原创最新推荐文章于 2023-05-16 14:57:58 发布 · 677 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui

Web编程同时被 2 个专栏收录

29 篇文章

订阅专栏

easyui

26 篇文章

订阅专栏

本文详细介绍EasyUI布局组件(layout)的使用方法及属性配置，包括基本结构、面板配置、属性说明及常用方法，并通过示例代码展示如何创建导航菜单和数据列表。

　　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）