使用easyui进行上左右布局
在后台管理系统开发的过程中，上左右的布局是最常见的页面布局方式，现在我们来看看使用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进行上左右布局的更多相关文章
- easyui页面上字段排序并与后台交互
在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...
- 雷林鹏分享：jQuery EasyUI 窗口 - 窗口与布局
jQuery EasyUI 窗口 - 窗口与布局 Layout 组件可以内嵌在窗口(window)中.我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码.jquery-easyui 框架帮 ...
- easyui页面上显示和PL/SQL编码问题
在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...
- jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作
jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...
- HTML——上中下布局
上中下布局是最主要的布局方式,本比如果用户屏幕分辨率为800*600像素. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font ...
- JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
- 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）
转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...
- ActionBar-PullToRefreshLibs+沉浸式在部分手机上的布局错乱,目前知道的三星
前段时间看见ActionBar-PullToRefreshLibs用来刷新很好看,配合4.4以上支持的沉浸式效果更佳,于是便想配合沉浸式+ActionBar-PullToRefreshLibs做出一个 ...
- el-container 实践上的布局问题
当自己利用element-ui上面的例子来实现整体布局的时候, 就是自己分开成单独的vue组件时,发现布局是不对的,效果是这样的: 代码是这样的,代码一模一样,只是拆开了各个组件,如下图: 后来发现是 ...
随机推荐
- time_formatter writeup
攻防世界time_formatter writeup UAF漏洞和命令注入. 前置知识 1.strdup函数 char * __strdup(const char *s) { size_t len = ...
- C++ //构造函数调用规则 //1.创建一个类，C++编译器会给每个类添加至少3个函数 //默认构造（空实现） //析构函数（空实现） //拷贝函数（值拷贝） //2.如果我们写了有参构造函数 编译器就不会提供默认构造函数 但是会提供拷贝构造函数 //3.如果我们写了拷贝函数 编译器就不再提供 默认 有参 构造函数
//构造函数调用规则 #include <iostream> using namespace std; //1.创建一个类,C++编译器会给每个类添加至少3个函数 //默认构造(空实现) ...
- 大龄程序员的出路在哪里？八年老Android的一点心得
这篇文章,给大家聊聊Android工程师的职业发展规划的一些思考,同时也给不少20多岁.30多岁,但是对自己的职业未来很迷茫的同学一些建议. 笔者希望通过此文,帮大家梳理一下程序员的职业发展方向,让大 ...
- ICCV2021 |重新思考人群中的计数和定位：一个纯粹基于点的框架
论文:Rethinking Counting and Localization in Crowds:A Purely Point-Based Framework 代码:https://github ...
- VRRP协议原理与配置
一.VRRP协议概述 1.1.VRRP协议基本概念 局域网中的用户终端通常采用配置一个默认网关的形式访问外部网络,如果此时默认网关设备发生故障,将中断所有用户终端的网络访问,这很可能会给用户带来不可预 ...
- Pikachu-URL重定向、目录遍历、敏感信息泄露模块
一.不安全的URL跳转 1.概述 不安全的url跳转问题可能发生在一切执行了url地址跳转的地方.如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地 ...
- VsCode安装使用教程和插件安装方法
许多渗透方式都python写脚本,比较方便,写一下vscode和插件的安装办法,虽然不是很复杂,但是写一下做一下笔记: Visual Studio Code (简称 VS Code / VSC) 是一 ...
- STM32—4线SPI驱动SSD1306 OLED
文章目录 一.OLED简介 二.驱动SSD1306所需知识 1.引脚介绍 2.通信时序 3.显存GRAM 4.字库 5.SSD1306基本命令 三.代码讲解 1.相关引脚配置 2.模拟SPI通信 3. ...
- NOIP 模拟 $29\; \rm 最长不下降子序列$
题解 \(by\;zj\varphi\) 观察这个序列,发现模数很小,所以它的循环节很小. 那么可以直接在循环节上做最长上升子序列,但是循环节中的逆序对会对拼接后的答案造成影响. 没有必要找逆序对个数 ...
- .Net Core WebApi(三)--使用 IdentityServer4 4.1.1 踩坑记录
目的:创建IdentityServer 并通过PostMan验证获取token 第一次配置如下 public class Config { public static IEnumerable<A ...