在后台管理系统开发的过程中，上左右的布局是最常见的页面布局方式，现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。

1.在页面中引入easyui所需的文件

1 <%-- 加载easyui的样式文件，bootstrap风格 --%>

2 <link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">

3 <link href="${ctx }/css/themes/icon.css" rel="stylesheet">

4 <%-- 加载jquery和easyui的脚本文件 --%>

5 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.min.js"></script>

6 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

7 <script src="${ctx }/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

2.在页面body部分构建必要的html结构

<body>

<div id="home-layout">

    <!-- 页面北部，页面标题 -->

    <div data-options="region:'north'" style="height:50px;">

    <!-- add your code -->

    </div>

    <!-- 页面西部，菜单 -->

    <div data-options="region:'west',title:'菜单栏'" style="width:200px;">

        <div class="home-west">

            <ul id="home-west-tree"></ul>

        </div>

    </div>

    <!-- 页面中部，主要内容 -->

    <div data-options="region:'center'">

        <div id="home-tabs">

            <div title="首页">

                <h2 style="text-align: center">欢迎登录</h2>

            </div>

        </div>

    </div>

</div>

</body>

这里需要注意一点：easyui在使用layout布局的时候，north、south需要指定高度，west、east需要指定宽度，而center会自动适应高和宽。

3.使用js初始化easyui组件

我个人比较推荐使用js代码去初始化easyui组件，而不使用easyui标签中的data-options属性去初始化。因为对于后台开发人员来说，写js代码可能比写html标签更加熟悉，而且这样使得html代码更加简洁。

<script>

$(function(){

    /*

     * 初始化layout

     */

    $("#home-layout").layout({

    //使layout自适应容器

    fit: true

    });

    /*

     * 获取左侧菜单树，并为其节点指定单击事件

     */

    $("#home-west-tree").tree({

　　　　//加载菜单的数据，必需

       url: "${ctx }/pages/home-west-tree.json",

       method: "get",

　　　　//是否有层次线

       lines: true,

　　　　//菜单打开与关闭是否有动画效果

       animate: true,

　　　　//菜单点击事件

       onClick: function(node){

           if(node.attributes && node.attributes.url){

　　　　　　　　　//打开内容区的tab，代码在其后

               addTab({

                   url: "${ctx }/" + node.attributes.url,

                   title: node.text

               });

           }

       }

   });

　　/*

    * 初始化内容区的tabs

    */

   $("#home-tabs").tabs({

       fit : true,

　　　　//tab页是否有边框

       border : false

   });
})

</script>

<script>

/*

 * 在内容区添加一个tab

 */

function addTab(params){

    var t = $("#home-tabs");

    var url = params.url;

    var opts = {

            title: params.title,

            closable: true,

            href: url,

            fit: true,

            border: false

    };

    //如果被选中的节点对应的tab已经存在，则选中该tab并刷新内容

    //否则打开一个新的tab

    if(t.tabs("exists", opts.title)){

        var tab = t.tabs("select", opts.title).tabs("getSelected");

        t.tabs("update", {

            tab: tab,

            options: opts

        });

    }else{

        t.tabs("add", opts);

    }

}

</script>

4.easyui-tree组件所需的json格式

easyui使用的传输格式为json，它对json内容的格式有比较严格的限制，所以请注意查看api。

text为树的节点名称，children则表示子节点，state表示关闭的状态（我们可以利用这个属性来构建延迟加载树），而attributes则是easyui-tree为我们提供的一个自定义属性，在这个属性下，我们可以自定义属性，例如我就在其中定义了url属性，并为其赋值。当然，我们还能够为其添加其他自定义属性。

[{

    "text":"区域管理",

    "attributes":{

        "url":"pages/consume/area/areaList.jsp"

    }

},{

    "text":"预约信息管理",

    "children":[{

        "text":"商户预约信息查询",

        "attributes":{

            "url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"

        }

    }]

},{

    "text":"准入申请管理",

    "children":[{

        "text":"商户准入申请",

        "state":"closed",

        "children":[{

            "text":"商户待处理申请",

            "attributes":{

                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"

            }

        },{

            "text":"商户审批中申请",

            "attributes":{

                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"

            }

        },{

            "text":"商户审批通过申请",

            "attributes":{

                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"

            }

        },{

            "text":"商户被拒绝申请",

            "attributes":{

                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"

            }

        }]

    }]

},{

    "text":"准入审批管理",

    "children":[{

        "text":"商户审批管理",

        "state":"closed",

        "children":[{

            "text":"当前任务",

            "children":[{

                "text":"商户当前初审任务",

                "attributes":{

                    "url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"

                }

            },{

                "text":"商户当前复审任务",

                "attributes":{

                    "url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"

                }

            }]

        },{

            "text":"商户已完成任务",

            "attributes":{

                "url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"

            }

        },{

            "text":"商户不通过任务",

            "attributes":{

                "url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"

            }

        }]

    }]

}]

就这样，我们使用easyui完成了简单的上左右布局。

使用easyui进行上左右布局的更多相关文章

  1. easyui页面上字段排序并与后台交互

    在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...

  2. 雷林鹏分享：jQuery EasyUI 窗口 - 窗口与布局

    jQuery EasyUI 窗口 - 窗口与布局 Layout 组件可以内嵌在窗口(window)中.我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码.jquery-easyui 框架帮 ...

  3. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...

  4. jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...

  5. HTML——上中下布局

    上中下布局是最主要的布局方式,本比如果用户屏幕分辨率为800*600像素. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font ...

  6. JQuery EasyUI Layout 在from布局自适应窗口大小

    在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...

  7. 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）

    转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...

  8. ActionBar-PullToRefreshLibs+沉浸式在部分手机上的布局错乱,目前知道的三星

    前段时间看见ActionBar-PullToRefreshLibs用来刷新很好看,配合4.4以上支持的沉浸式效果更佳,于是便想配合沉浸式+ActionBar-PullToRefreshLibs做出一个 ...

  9. el-container 实践上的布局问题

    当自己利用element-ui上面的例子来实现整体布局的时候, 就是自己分开成单独的vue组件时,发现布局是不对的,效果是这样的: 代码是这样的,代码一模一样,只是拆开了各个组件,如下图: 后来发现是 ...

随机推荐

  1. expect命令和here document免交互

    目录 一.Here Document免交互 1.1 概述 1.2 语法格式 1.3 简单案例 1.4 支持变量替换 1.5 多行注释 1.6 完成自动划分磁盘免交互 二.Expect进行免交互 2.1 ...

  2. 剑指 Offer 30. 包含min函数的栈

    剑指 Offer 30. 包含min函数的栈 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中,调用 min.push 及 pop 的时间复杂度都是 O(1). 示例 ...

  3. Java Fork/Join

    Fork/Join框架 Fork/Join 以递归方式将可以并行的任务拆分成更小的任务,然后将每个子任务的结果合并起来生成整体结果. 这个过程其实就是分治算法的并行版本,图解如下: 如何使用 我们要使 ...

  4. XCTF-ics-07(floatval函数特性+Linux目录结构特性)

    直接进入到项目管理页面,给了三段源码. 第一段 <?php session_start(); if (!isset($_GET[page])) { show_source(__FILE__); ...

  5. 说实话，Android开发月薪3W，谁不酸呢？

    近期有个网友在某匿名区晒字节跳动Offfer,毕业一年月薪3W,引发众多读者羡慕,纷纷留言酸了.酸了.但进大厂的要求还是蛮高的,需要在技术实力上有一定的积累,今天给大家分享一份高质量笔记, 助力大家技 ...

  6. iptables 及容器网络分析

    本文独立博客阅读地址:https://ryan4yin.space/posts/iptables-and-container-networks/ 本文仅针对 ipv4 网络 iptables 提供了包 ...

  7. 爬虫实践二--豆瓣top250电影

    import requests def get_movies(): headers={ 'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) ...

  8. SpringBoot开发十八-显示评论

    需求介绍 显示评论,还是我们之前做的流程. 数据层:根据实体查询一页的评论数据,以及根据实体查询评论的数量 业务层:处理查询评论的业务,处理查询评论数量的业务 表现层:同时显示帖子详情数据时显示该帖子 ...

  9. 用三个while循环和tkinter实现一个显示屏

    用三个while循环和tkinter实现一个显示屏 import tkinter as tk import time # 输入框是跟程序打交道的一个途径,例如程序要求你输入账号密码,那么它就需要提供两 ...

  10. MySQL 条件查询

    查询条件 having having的功能和where一样,都是用来筛选查询,不同的是,where在分组之前用,having必须在分组之后使用. # 查询每个部门大于30岁的平均工资,并且保留平均工资 ...