jQuery EasyUI_02 快速入门 tree树形菜单&选项卡

£轻描～淡写°

已于 2022-07-11 08:31:16 修改

阅读量1.5k

点赞数 2

分类专栏： easyui 文章标签： easyui 前端 javascript

于 2022-05-06 22:39:30 首次发布

本文链接：https://blog.csdn.net/m0_60786924/article/details/124620125

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、全局path定义

注意： 在使用jQuery UI的时候需要进行必须要下载导入导入详情：下载导入插件

形式：<base href=""> base:引入路径作用：标准化路径格式为全路径

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面

    <base href = "${pageContext.request.servletContext.contextPath}/static/">    

    var globalPath = "${pageContext.request.servletContext.contextPath}";

二、postman使用

接口测试工具；postman发送请求给服务器，然后从服务器接受响应，最后在postman中展示出来。

三、tree组件实现JSON数据绑定

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

一些案例：

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

标签实现——不推荐
JSON实现

    $('#tt').tree({    
            url:'tree_data.json'   
    });

四、动态添加选项卡

   $(function(){
            //绑定属性菜单绑定数据
            $("#menuTree").tree({    
                //实际开发中这里应该获取的是后台的数据（从servlet中获取）
                url:'tree_data.json',
                //在用户点击一个节点的时候触发。
                onClick: function(node){
                    //alert(node.text);  // 在用户点击的时候提示
                    console.log(node.id,node.text,node.children);
                    if(node.id === "-1"){
                        return;
                    }
                    //判断选项卡是否存在选中
                    var flag = $("#tabs_index").tabs('exists',node.text);
                    //alert(flag);
                    if(flag){
                        $("#tabs_index").tabs('select',node.text);
                        return;
                    }
                    
                    // 添加一个未选中状态的选项卡面板
                    $('#tabs_index').tabs('add',{
                        title: node.text,
                        content:node.text,
                        closable:true,  
                    });
                }
            });  
        });

五、选项卡

Tabs（选项卡）

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

依赖关系

panel
linkbutton

使用案例

创建面板

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});

添加新的选项卡面板

添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。

// add a new tab panel   
$('#tt').tabs('add',{   
    title:'New Tab',   
    content:'Tab Body',   
    closable:true,   
    tools:[{   
        iconCls:'icon-mini-refresh',   
        handler:function(){   
            alert('refresh');   
        }   
    }]   
});

获取选择的选项卡

// get the selected tab panel and its tab object   
var pp = $('#tt').tabs('getSelected');   
var tab = pp.panel('options').tab;    // the corresponding tab object

选项卡面板

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名	属性值类型	描述	默认值
id	string	选项卡面板的ID属性。	null
title	string	选项卡面板的标题文本。
content	string	选项卡面板的内容。
href	string	从URL加载远程数据内容填充到选项卡面板。	null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。	true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题。	null
width	number	选项卡面板宽度。	auto
height	number	选项卡面板高度。	auto
collapsible	boolean	如果为true，则允许选项卡摺叠。	false

下面的是选项卡面板新增且独有的属性。

属性名	属性值类型	描述	默认值
closable	boolean	在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。	false
selected	boolean	在设置为true的时候，选项卡面板会被选中。	false
disabled	boolean	在设置为true的时候，选项卡面板会被禁用。（该属性自1.4.4版开始可用）	false

六、常见事件、属性和方法

属性：

属性名	属性值类型	描述	默认值
width	number	选项卡容器宽度。	auto
height	number	选项卡容器高度。	auto
plain	boolean	设置为true时，将不显示控制面板背景。	false
fit	boolean	设置为true时，选项卡的大小将铺满它所在的容器。	false
border	boolean	设置为true时，显示选项卡容器边框。	true
scrollIncrement	number	选项卡滚动条每次滚动的像素值。	100
scrollDuration	number	每次滚动动画持续的时间，单位：毫秒。	400
tools	array,selector	工具栏添加在选项卡面板头的左侧或右侧。可用的值有： 1. 一个工具菜单数组，每个工具选项都和linkbutton相同。 2. 一个指向<div/>容器工具菜单的选择器。代码示例：通过数组定义工具菜单。 $('#tt').tabs({ tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-save', handler:function(){ alert('保存') } }] }); 通过存在的DOM容器定义工具菜单。 $('#tt').tabs({ tools:'#tab-tools' }); <div id="tab-tools"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a> </div>	null
toolPosition	string	工具栏位置。可用值：'left','right'。（该属性自1.3.2版开始可用）	right
tabPosition	string	选项卡位置。可用值：'top','bottom','left','right'。（该属性自1.3.2版开始可用）	top
headerWidth	number	选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。（该属性自1.3.2版开始可用）	150
tabWidth	number	标签条的宽度。（该属性自1.3.4版开始可用）	auto
tabHeight	number	标签条的高度。（该属性自1.3.4版开始可用）	27
selected	number	初始化选中一个标签页。（该属性自1.3.5版开始可用）	0
showHeader	boolean	设置为true时，显示标签页标题。（该属性自1.3.5版开始可用）	true

事件：

事件名	事件参数	描述
onLoad	panel	在ajax选项卡面板加载完远程数据的时候触发。
onSelect	title,index	用户在选择一个选项卡面板的时候触发。
onUnselect	title,index	用户在取消选择一个选项卡面板的时候触发。（该属性自1.3.5版开始可用）
onBeforeClose	title,index	在选项卡面板关闭的时候触发，返回false取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。 $('#tt').tabs({ onBeforeClose: function(title){ return confirm('您确认想要关闭 ' + title); } }); // 使用异步确认对话框 $('#tt').tabs({ onBeforeClose: function(title,index){ var target = this; $.messager.confirm('确认','你确认想要关闭'+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // 允许现在关闭 $(target).tabs('close',index); opts.onBeforeClose = bc; // 还原事件函数 } }); return false; // 阻止关闭 } });
onClose	title,index	在用户关闭一个选项卡面板的时候触发。
onAdd	title,index	在添加一个新选项卡面板的时候触发。
onUpdate	title,index	在更新一个选项卡面板的时候触发。
onContextMenu	e, title,index	在右键点击一个选项卡面板的时候触发。

方法：

方法名	方法参数	描述
options	none	返回选项卡属性。
tabs	none	返回所有选项卡面板。
resize	none	调整选项卡容器大小和布局。
add	options	添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。添加一个非选中状态的选项卡面板时，记得设置'selected'属性为false。 // 添加一个未选中状态的选项卡面板 $('#tt').tabs('add',{ title: '新选项卡面板', selected: false //... }); （该功能自1.4.2版开始可用） // 在索引为2的位置上插入一个选项卡面板 $('#tt').tabs('add',{ title: '插入的选项卡面板', index: 2 });
close	which	关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。
getTab	which	获取指定选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
getTabIndex	tab	获取指定选项卡面板的索引。
getSelected	none	获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index);
select	which	选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
unselect	which	取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。（该方法自1.3.5版开始可用）
showHeader	none	显示选项卡的标签头。（该方法自1.3.5版开始可用）
hideHeader	none	隐藏选项卡的标签头。（该方法自1.3.5版开始可用）
showTool	none	显示工具栏。（该方法自1.4.3版开始可用）
hideTool	none	隐藏工具栏。（该方法自1.4.3版开始可用）
exists	which	表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
update	param	更新指定的选项卡面板，'param'参数包含2个属性： tab：要更新的选项卡面板。 type：更新类型，可用值有：'header', 'body', 'all'。（该参数自1.4.1版开始可用） options：面板的属性。代码示例： // 更新选择的面板的新标题和内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 $('#tt').tabs('update', { tab: tab, options: { title: '新标题', href: 'get_content.php' // 新内容的URL } }); // 调用 'refresh' 方法更新选项卡面板的内容 var tab = $('#tt').tabs('getSelected'); // 获取选择的面板 tab.panel('refresh', 'get_content.php');
enableTab	which	启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）代码示例： $('#tt').tabs('enableTab', 1); // 启用第二个选项卡面板 $('#tt').tabs('enableTab', 'Tab2'); // 启用标题为Tab2的选项卡面板
disableTab	which	禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）代码示例： $('#tt').tabs('disableTab', 1); // 禁用第二个选项卡面板
scrollBy	deltaX	滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。（该方法自1.3版开始可用）代码示例： // 滚动选项卡标题到左边 $('#tt').tabs('scroll', 10);

七、整体代码部分

easyui 可参考官方文档 ------ 进行使用


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!-- 通过指令进行引入 -->
	<%-- <%@ include file="static/common/NewFile1.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">
<title>Insert title here</title>
<! -- 通过头部引入界面能作用base的内容 -->
<!-- 通过指令进行引入 -->
			<%@ include file="static/common/NewFile1.jsp" %>
 <!-- 通过base引入绝对路径，因为绝对路径为标准格式 -->
<base href="${pageContext.request.servletContext.contextPath }/static"> 
<script type="text/javascript">
$(function(){
	console.log(xPath);
	
	
});
</script>

</head>
<body>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'标题',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'权限',split:true" style="height:100px;">

    </div>   
    <div data-options="region:'west',title:'列表',split:true" style="width:150px;">
  <!-- 树形列表 -->
  <!-- 
    <ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>   -->

	<ul id = "menuTree">
	
	</ul>
    
    </div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
     <!-- 内容——选项卡 -->
    <div id="myTabs" class="easyui-tabs" fit="true">   



</div>  
    
    </div>   
<script type="text/javascript">
//加载函数
	$(function(){
		$('#menuTree').tree({    
		    url: xPath+"/promissionServelt.do",    
		    //设置点击事件
			onClick:function(node){//node指的是节点对象（JSON文件中的对象）
				//console.log(node);
				addMyTabs(node);
			} 
		});  
	
	});
	//封住新增选项卡的方法
	function addMyTabs(node){
		//当单击一级菜单无选项卡出现(通过id)
		//console.log(node.id);
		if(node.id === '1'){
			return;
		}
		//解决问题：重复的选项卡
		//通过exists判断选项是否存在
		let flag = $("#myTabs").tabs('exists',node.text);
		//console.log(flag);
		if(flag){
			//当存在第二次点击的情况的就直接进行选中
			$("#myTabs").tabs('select',node.text);
			return;
		}
		$('#myTabs').tabs('add',{    
		    title:node.text,    //选项卡标题
		    content:"<iframe src='aa.jsp' width=100% height=100%>",    //选项卡内容
		    closable:true	//选项卡能否关闭
		});  
	}
	
	
	
	
</script>

</body> 


<!-- <h3>普通超链接</h3>
<a>超链接</a>
<button>普通按钮</button>
通过jQuery EasyUI 实现把超链接转换 按钮
<a class="easyui-link button" id="abtn">超链接按钮</a>
<script type="text/javascript">
/* 该区域为设置相对应的一些来自 jQuery EasyUI 中的样式设置 */
	$("#abtn").linkbutton({
		width:'100px',
		height:'200px',
		//图标添加
		iconCls:'icon-search',
		//按钮的大小
		size:'large',
		//设置jQuery EasyUI中点击事件
	onClick:function(){
		alert(123);
		//方法调用
		$(this).linkbutton('disable');
	}
	});
</script>
 -->

</body>
</html>

£轻描～淡写°

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery EasyUI_02 快速入门 tree树形菜单&选项卡

一、全局path定义形式：<base href=""> base:引入路径作用：标准化路径格式为全路径base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "......
复制链接

扫一扫