easyUI的tab选项卡以及右击菜单

最新推荐文章于 2022-04-07 18:56:12 发布

Jiang呀

最新推荐文章于 2022-04-07 18:56:12 发布

阅读量514

点赞数

分类专栏：前端框架文章标签： js tab easyui html

本文链接：https://blog.csdn.net/JiangHu_Java/article/details/106931618

版权

这篇博客介绍了如何在easyUI中实现点击tree叶子节点时动态添加选项卡的效果。首先展示了一个默认开启的首页选项卡，接着在JavaScript中为tree添加点击事件。当点击叶子节点时，如果存在路径，则新增选项卡，否则切换到对应选项卡。同时，文章提到了选项卡的右击菜单实现，提供了部分js代码，并展示了最终效果。文章鼓励读者如有问题可留言交流。

摘要由CSDN通过智能技术生成

前言

之前的博客讲过了MySQL+mvc实现动态的tree组件，这次，我们来讲讲点击tree的叶子节点后出现的选项卡效果如何实现。

（用之前讲述tree的话来说，叶子节点就是辈分最小的一个）

实现

首先看看实现效果：
在这里插入图片描述
首先，我们思考，我们一般进入类似的界面，都是有一个默认打开的首页界面，所以我们需要在jsp界面写一个easyUI中的选项卡组件：

  <div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">   
	 <div   title="首页" style="padding:20px;display:none;">   
		首页一般在后台管理，放各种数据指标（各个模块的使用情况、数据量、报表）   
		
		//这个菜单是用来做右击菜单的
		<div id="rcmenu" class="easyui-menu" style="">
		<div data-options="iconCls:'icon-cancel'" id="closecur">
			关闭
		</div>
		
		<div