easyUi 学习笔记 (一) 使用easyui 和ztree 创建前端框架
2024-09-08 05:45:02
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ include file="/common/page.jsp" %> // 这里是引用的公共代码 ,主要是css和js jstl 的引用 easyui核心js都在里面
<!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" href="${pageContext.request.contextPath }/ztree/css/demo.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.core.js"></script>
<style type="text/css">
*{
margin: 0 0 ;
}
</style> <title>Insert title here</title>
</head>
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
<h3>xxx 系统</h3>
</div>
<!-- collapsible 是否显示 可折叠按钮 -->
<div id="west" data-options="region:'west',split:false,title:'West',collapsible:true" style="width:150px;padding:10px;"> <div id="treeDemo" class="ztree"></div> </div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'" id="center" >
//这里是使用easyui 的tabs标签, 每次点击树形菜单(ztree),使用tabs创建一个标签
<div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;"> </div> </body> <script type="text/javascript"> /* $('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
}); function addNode() {
$("#tt").append("<div title='Tab4' data-options='closable:true'style='overflow:auto;padding: 20px;'>这里有个添加问题啊啊啊 </div>");
}
*/
function addTab(title, url){
if ($('#tt').tabs('exists',title)){
$('#tt').tabs('select',title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true,
tools:[{ }]
});
}
}
//ztree的callback 调用的方法
function openTab(event, treeId, treeNode){
if(treeNode.isParent){
return;
}
//调用easyui方法 ,判断是否创建标签
if(!$("#tt").tabs('exists',treeNode.mname)){ // 如果不存在此tab则创建
if(treeNode.url!="")
$("#tt").tabs('add',{
title:treeNode.mname,
href:treeNode.url,
closable:true,
});
}else{ // 如果已经打开则选中
$("#content_tabs").tabs('select',treeNode.mname);
}
} </script>
<SCRIPT type="text/javascript">
//ztree 树的创建方法
var setting = {
data: {
key:{
name: "mname",
url:'_url'
},
simpleData: {
enable: true,
idKey: "mid",
pIdKey: "pmid"
} },
callback:{
onClick:openTab // 单击ztree的响应函数
}
}; $(document).ready(function(){
$.post('loadMenus.action',function(zNodes){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}) }); </SCRIPT>
</html>
最新文章
- Spring学习笔记--环境搭建和初步理解IOC
- Java Interview Test
- W3School-CSS 字体(font)实例
- header的安全配置指南
- top命令 Linux查看CPU和内存使用情况
- [NOIP2013]转圈游戏
- JavaScript学习总结【12】、JS AJAX应用
- CSS3动画变形Animations
- 基于visual Studio2013解决C语言竞赛题之0701排队输出
- NYOJ 745 蚂蚁问题(两)
- Leetcode: Subsets &; SubsetsII
- [置顶]
 MVC输出缓存(OutputCache参数详解)
- Vmware Vsan 部署中如何将非SSD 硬盘标识为SSD
- 关于phpstorm ftp目录乱码
- python str byte 转换
- 『TensorFlow』模型保存和载入方法汇总
- NSA Fuzzbunch中EternalRomance工具复现过程
- 小程序笔记四:表单提交form
- js实现UTC时间转为北京时间,时间戳转为时间
- Win7系统下网站发布IIS配置