本文详细介绍了如何管理和优化EasyUI的选项卡控件，包括如何处理选项卡的增加、重复打开的问题以及非叶子节点不能打开的解决方案，并提供了完整的代码示例，包括实体类、DOA类、PermissionAction类、mvc.xml配置、index.js和jsp界面的实现，旨在帮助读者更好地理解和使用EasyUI选项卡。
选项卡的增加
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
重复打开的问题
解决思路：针对于上面存在的问题进行分析，判断当前是否存在对应的title的选项卡 如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一饿选项卡
解决办法：
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
// 新增选项卡
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
非叶子节点不能打开的解决方法
增加一个if条件
存在问题非叶子节点按照开发角度来说不能打开页面的；
// 非叶子节点都没有跳转界面的
var src=node.attributes.self.url;
if(src){
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
完整代码：
实体类
package com.zhoujun.entity;
public class Permission {
private long id;
private String name;
private String description;
private String url;
private long pid;
private int ismenu;
private long displayno;
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 getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public long getPid() {
return pid;
}
public void setPid(long pid) {
this.pid = pid;
}
public int getIsmenu() {
return ismenu;
}
public void setIsmenu(int ismenu) {
this.ismenu = ismenu;
}
public long getDisplayno() {
return displayno;
}
public void setDisplayno(long displayno) {
this.displayno = displayno;
}
@Override
public String toString() {
return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url
+ ", pid=" + pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
}
doa类
package com.zhoujun.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zhoujun.entity.Permission;
import com.zhoujun.util.BaseDao;
import com.zhoujun.util.BuildTree;
import com.zhoujun.util.PageBean;
import com.zhoujun.vo.TreeVo;
public class PermissionDao extends BaseDao<Permission> {
/**
* 是直接从数据库获取到的数据
* @param permission
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Permission> list(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from t_easyui_permission ";
return super.executeQuery(sql, Permission.class, pageBean);
}
/**
* 能够将数据库中的数据，体现父子结构
* @param permission
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
// public TreeVo<Permission> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
// List<Permission> list=this.list(permission, pageBean);
// List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
// TreeVo treeVo=null;
// for (Permission p : list) {
// treeVo=new TreeVo<>();
// treeVo.setId(p.getId()+"");
// treeVo.setText(p.getName());
// treeVo.setParentId(p.getPid()+"");
// Map<String, Object> attributes=new HashMap<String, Object>();
// attributes.put("self", p);
// treeVo.setAttributes(attributes);
// nodes.add(treeVo);
// }
// return BuildTree.build(nodes);
//
//
// }
public List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Permission> list=this.list(permission, pageBean);
List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
TreeVo treeVo=null;
for (Permission p : list) {
treeVo=new TreeVo<>();
treeVo.setId(p.getId()+"");
treeVo.setText(p.getName());
treeVo.setParentId(p.getPid()+"");
Map<String, Object> attributes=new HashMap<String, Object>();
attributes.put("self", p);
treeVo.setAttributes(attributes);
nodes.add(treeVo);
}
return BuildTree.buildList(nodes,"0");
}
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException, JsonProcessingException {
PermissionDao permissionDao=new PermissionDao();
List<Permission> list=permissionDao.list(null, null);
//通过工具类完成格式的输出
List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
//Permission的格式是不满足easyui的tree组件的展现的数据格式的
//目的：将List<Permission>转化成List<TreeVo<T>>
//实现 将List<Permission>得到的单个Permission转换成TreeVo，将TreeVo加入到nodex
TreeVo treeVo=null;
for (Permission p : list) {
treeVo=new TreeVo<>();
treeVo.setId(p.getId()+"");
treeVo.setText(p.getName());
treeVo.setParentId(p.getPid()+"");
// Map<String, Object> attributes=new HashMap<String, Object>();
// attributes.put("self", p);
// treeVo.setAttributes(attributes);
nodes.add(treeVo);
}
TreeVo<Permission> parent= BuildTree.build(nodes);
ObjectMapper om=new ObjectMapper();
String jsonstr = om.writeValueAsString(parent);
System.out.println(jsonstr);
}
}
PermissionAction类
package com.zhoujun.web;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zhoujun.dao.PermissionDao;
import com.zhoujun.entity.Permission;
import com.zhoujun.util.ResponseUtil;
import com.zhoujun.vo.TreeVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.DispatcherServlet;
import com.zking.framework.ModelDriven;
public class PermissionAction extends ActionSupport implements ModelDriven<Permission> {
private Permission permission=new Permission();
private PermissionDao permissionDao=new PermissionDao();
@Override
public Permission getModel() {
// TODO Auto-generated method stub
return permission;
}
public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
try {
// TreeVo<Permission> topNode = this.permissionDao.topNode(null, null);
// List<TreeVo<Permission>> list=new ArrayList<TreeVo<Permission>>();
// list.add(topNode);
ResponseUtil.writeJson(resp, this.permissionDao.topNode(null, null));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
//结果码的配置就是为了，在mvc.xml中寻找重定向还是转发
return null;
}
}
mvc.xml配置
<action path="/permission" type="com.zhoujun.web.PermissionAction">
<!-- <forward name="index" path="/index.jsp" redirect="false" /> -->
</action>
index.js
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
//点击事件
onClick: function(node){
// alert(node.text); // 在用户点击的时候提示
// debugger;
// 目前存在的问题，重复的tab也反复打开
// 针对于上面存在的问题进行分析，判断当前是否存在对应的title的选项卡
// 如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一饿选项卡
// console.log($('#bookTabs').tabs('exists',node.text));
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
// 新增选项卡
// 存在问题非叶子节点按照开发角度来说不能打开页面的；
// 非叶子节点都没有跳转界面的
var src=node.attributes.self.url;
if(src){
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
}
});
//目前 jsp中有一个静态的首页的选项卡tab 当浏览器请求jsp的时候，会调用下列代码，造成页面段看到连个tab页，但是我们开始的时候只要一个选项卡
// $('#bookTabs').tabs('add',{
// title:'New Tab',
// content:'Tab Body',
// closable:true,
// tools:[{
// iconCls:'icon-mini-refresh',
// handler:function(){
// alert('refresh');
// }
// }]
// });
// $('#tt').tree({
// url:$("#ctx").val()+'/menu.action?methodName=menuTree'
// });
})
jsp界面
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
//点击事件
onClick: function(node){
// alert(node.text); // 在用户点击的时候提示
// debugger;
// 目前存在的问题，重复的tab也反复打开
// 针对于上面存在的问题进行分析，判断当前是否存在对应的title的选项卡
// 如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一饿选项卡
// console.log($('#bookTabs').tabs('exists',node.text));
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
// 新增选项卡
// 存在问题非叶子节点按照开发角度来说不能打开页面的；
// 非叶子节点都没有跳转界面的
var src=node.attributes.self.url;
if(src){
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
}
});
//目前 jsp中有一个静态的首页的选项卡tab 当浏览器请求jsp的时候，会调用下列代码，造成页面段看到连个tab页，但是我们开始的时候只要一个选项卡
// $('#bookTabs').tabs('add',{
// title:'New Tab',
// content:'Tab Body',
// closable:true,
// tools:[{
// iconCls:'icon-mini-refresh',
// handler:function(){
// alert('refresh');
// }
// }]
// });
// $('#tt').tree({
// url:$("#ctx").val()+'/menu.action?methodName=menuTree'
// });
})
运行结果
总结：
争取去写出更加详细的博客，以便看的懂一点
扫一扫
2699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
