目录
一，选项卡
1，查找layui的选项卡页面布局代码---静态
在管网上选择选项卡：
复制代码：
放在eclipse上:
完整代码：
element.tabAdd('demo', {
title:'新选项'+(Math.random()*1000|0),//用于演示
content:'内容'+(Math.random()*1000|0),
id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
})
2，动态的添加选项卡
添加一个点击事件：
完整代码：
let $,element;//扩大作用域
layui.use(['jquery','element'], function(){
$ = layui.jquery,
element = layui.element;
$.ajax({
url:'${pageContext.request.contextPath }/permission.action?methodName=menus',
dataType:'json',
success:function(data){
console.log(data);
let htmlstr='';
$.each(data,function(i,n){
htmlstr +='<li class="layui-nav-item layui-nav-itemed">';
htmlstr +='<a class="" href="javascript:;">'+data[i].text+'</a>';
//判断节点是否存在子节点
if(data[i].hasChildren){
htmlstr +='<dl class="layui-nav-child">';
let children = data[i].children;
$.each(children,function(index,node){
htmlstr +='<dd><a href="javascript:;" onClick="openTabs();">'+children[index].text+'</a></dd>';
});
htmlstr +='</dl>';
}
htmlstr +='</li>';
});
$("#menu").html(htmlstr);
}
});
});将增加选项卡的放进有个函数中：
完整代码：
function openTabs(title,url,id){
let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);
//新增一个tab项
element.tabAdd('demo', {
title:'新选项'+(Math.random()*1000|0),//用于演示
content:'内容'+(Math.random()*1000|0),
id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
})
}效果（这张图是我敲完代码最后的完整图片，按道理现在的选项卡应该是一个随机数）：
3，将选项卡名称换成菜单名
替换一下点击事件的代码：
代码：
htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';再修改：
function openTabs(title,url,id){
let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);
//新增一个tab项
element.tabAdd('demo', {
title:title,//用于演示
content:'内容'+(Math.random()*1000|0),
id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
})
}效果：
4，重复的选项卡不重复添加，改为选中
function openTabs(title,url,id){
let $node = $("li[lay-id='"+id+"']");
//新增一个Tab项
if($node.length==0){
element.tabAdd('demo', {
title: title //用于演示
,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
element.tabChange('demo',id);
}
5，跳转页面
后台代码：
user:
package com.zking.entity;
public class User {
private Long id;
private String name;
private String loginName;
private String pwd;
private Long rid;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public Long getRid() {
return rid;
}
public void setRid(Long rid) {
this.rid = rid;
}
public User() {
super();
// TODO Auto-generated constructor stub
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
}
}userDao:
package com.zking.dao;
import java.util.List;
import com.zking.entity.User;
import com.zking.util.BaseDao;
public class UserDao extends BaseDao<User>{
public User login(User user) throws Exception {
String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
List<User> users = super.executeQuery(sql, User.class,null);
//根据sql查询符合条件的用户，通常只会返回一条数据
return users == null || users.size() ==0 ? null : users.get(0);
//return super.executeQuery(sql, clz, pageBean);
}
}
userAction:
package com.zking.web;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User>{
private User user = new User();
private UserDao userdao = new UserDao();
//写一个方法处理前台的请求
// public String login(HttpServletRequest req,HttpServletResponse resp) {
//
// Map<String, Object> map = new HashMap<String, Object>();
// if("ruojuan".equals(user.getUsername())&& "1234567".equals(user.getPassword())) {
// //登陆成功
// map.put("code", 200);
// map.put("msg","登陆成功");
// }
// else {
// //登陆失败
// map.put("code", 0);
// map.put("msg","登陆失败");
// }
// try {
// ResponseUtil.writeJson(resp, map);
// } catch (Exception e) {
// // TODO Auto-generated catch block
// e.printStackTrace();
// }
// //return super.execute(req, resp);
// return null;
//
// }
public String login(HttpServletRequest req,HttpServletResponse resp) {
try {
User u = userdao.login(user);
if(u !=null) {
//登陆成功
//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","登陆成功"));
ResponseUtil.writeJson(resp,R.ok(200, "成功"));
}
else {
//登陆失败
//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","登陆失败"));
ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
@Override
public User getModel() {
// TODO Auto-generated method stub
return user;
}
}
配置文件：
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/user" type="com.zking.web.UserAction">
</action>
</config>
登陆界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 导入文件 -->
<%@ include file = "commom/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all">
<script src="static/js/login.js"></script>
<title>Insert title here</title>
<style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style>
</head>
<body class="tx-login-bg">
<div class="tx-login-box">
<div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
<ul class="tx-form-li row">
<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
<li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li>
<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>登陆界面封装的js：
layui.use(['jquery','layer'],function(){
let $ = layui.jquery,
layer = layui.layer;
$("#login").click(function(){
$.ajax({
url:"user.action?methodName=login",
dataType:'json',
data:{
loginName:$("#username").val(),
pwd:$("#password").val()
},
success:function(data){
//console.log(data);
if(data.code == 200){
layer.alert(data.msg,{icon:1})
location.href = "mian.jsp";
}
else{
layer.alert(data.msg,{icon:2})
}
}
});
});
});效果：
输入正确的密码
可以跳转界面：
点击左侧菜单可以跳转页面：
二，页面代码
主界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="commom/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<script src="static/js/mian.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<!-- 登录用户信息 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="-1">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页内容</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script>
</script>
</body>
</html>
封装的主界面：
完整代码：
//JavaScript代码区域
let $,element;
layui.use(['jquery','element'], function(){
$ = layui.jquery,
element = layui.element;
$.ajax({
url:'${pageContext.request.contextPath }/permission.action?methodName=menus',
dataType:'json',
success:function(data){
console.log(data);
let htmlstr='';
$.each(data,function(i,n){
htmlstr +='<li class="layui-nav-item layui-nav-itemed">';
htmlstr +='<a class="" href="javascript:;">'+data[i].text+'</a>';
//判断节点是否存在子节点
if(data[i].hasChildren){
htmlstr +='<dl class="layui-nav-child">';
let children = data[i].children;
$.each(children,function(index,node){
//htmlstr +='<dd><a href="javascript:;" onClick="openTabs();">'+children[index].text+'</a></dd>';
htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';
});
htmlstr +='</dl>';
}
htmlstr +='</li>';
});
$("#menu").html(htmlstr);
}
});
});
/*
* 1，查找layui的选项卡页面布局代码---静态
* 2，动态的添加选项卡
* 3，将选项卡名称换成菜单名
* 4，重复的选项卡不重复添加，改为选中
* 5，跳转页面
*/
function openTabs(title,url,id){
let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);
//新增一个tab项
// element.tabAdd('demo', {
// title:'新选项'+(Math.random()*1000|0),//用于演示
// content:'内容'+(Math.random()*1000|0),
// id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
// })
//新增一个Tab项
if($node.length==0){
element.tabAdd('demo', {
title: title //用于演示
,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
element.tabChange('demo',id);
}
6799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
