easyui(Tree前端)

目录

动态添加选项卡

​编辑 

解决页面缓存问题

页面搭建

树形菜单tree的使用

推荐一款接口测试工具：postman

---

1.全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面
    <base href = "${pageContext.request.servletContext.contextPath}/static/">    

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

2.tree组件实现JSON数据绑定

 标签实现——不推荐
    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,  
			    	});
				}
			});  
		});

1.通过标签创建选项卡

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

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20p