zTREE使用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp" %>
<%@taglib prefix="page" uri="/WEB-INF/pageTag.tld" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Border Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="./js/jquery-easyui-1.2.5/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/jquery-easyui-1.2.5/themes/icon.css">
<script type="text/javascript" src="./js/jquery-easyui-1.2.5/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-easyui-1.2.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./js/jquery-easyui-1.2.5/easycommon.js"></script>
<link rel="stylesheet" href="${ctx}/js/JQuery zTree v3.0/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.0/js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.0/js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.0/js/jquery.ztree.exedit-3.0.js"></script>
<style type="text/css">
/* ztree样式重写 */
.ztree li button.noline_open{
background: url('./js/jquery-easyui-1.2.5/themes/gray/images/tree_arrows.gif') no-repeat -18px 0px;
}
.ztree li button.noline_close {
background: url('./js/jquery-easyui-1.2.5/themes/gray/images/tree_arrows.gif') no-repeat 0px 0px;
}
.ztree li button.pIcon02_ico_open,.ztree li button.pIcon02_ico_close{
margin-right:2px; background: url('${ctx}/js/JQuery zTree v3.0/css/zTreeStyle/img/diy/2.png') no-repeat scroll 0 0 transparent;
vertical-align:top;?
*vertical-align:middle;
}
</style>
<script type="text/javascript">
$(function(){
bindTabEvent(); ?
? ?bindTabMenuEvent(); ?
$('#tt2').datagrid({
title:'My Title',
iconCls:'icon-save',
width:600,
height:350,
nowrap: false,
striped: true,
fit: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
? ? ? ? ? ? ? ?{field:'ck',checkbox:true},
? ? ? ? ? ? ? ?{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
? ? ? ?{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true
});
$('#tt1').tree({
checkbox: false,
url: './data/tree_data.json',
onClick:function(node){
$(this).tree('toggle', node.target);
//alert('you click '+node.text);
},
onContextMenu: function(e, node){
e.preventDefault();
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
//zTree 开始 --------
var setting = {
data: {
simpleData: {
enable: true
}
},
async: {
enable: true,
url:"${ctx}/system/toGetZtreeData.action"
},
view: {
showLine: false
},
callback: {
/* beforeClick: beforeClick,
beforeCollapse: beforeCollapse,
beforeExpand: beforeExpand,
onCollapse: onCollapse,
onExpand: onExpand */
}
};
var zNodes =[
{ id:1, pId:0, name:"zTree Home",iconOpen:"/img/open.gif"},
{ id:2, pId:1, name:"zTree in Google"},
{ id:3, pId:2, name:"zTree in Iteye"},
{ id:12, pId:11, name:"zTree in Google"},
{ id:13, pId:12, name:"zTree in Iteye"},
{ id:4, pId:2, name:"Nothing..."}
];
$.fn.zTree.init($("#treeDemo"), setting);
});
//zTree回调函数
function zTreeOnClick(event, treeId, treeNode) {
//alert("${ctx}/"+treeNode.tabUrl);
? ?//alert(treeNode.tId + ", " + treeNode.name+", " + treeNode.url);
? ?if(treeNode.tabUrl && treeNode.tabUrl != null){
? ? ? ?addTab(treeNode.name,"${ctx}/"+treeNode.tabUrl);
? ?}
}
</script>
</head>
<body title="North Title" split="true" style="height:100px;">
<div>
<input type="button" onclick="addTabs();" name="addNavTabs" value="添加面板"/>
<input type="button" onclick="addTab('用户管理','datagrid.jsp');" name="addNavTabs" value="获取面板"/>
<input type="button" onclick="addTab1('用户12管理','datagrid.jsp');" name="addNavTabs" value="获取面板"/>
<a href="${ctx}/system/login.action">系统主页面</a>
<p>The north content.</p>
</div>
</div>
<div region="south" title="South Title" split="true" style="height:100px;padding:10px;background:#efefef;">
<div fit="true" style="background:#ccc;">
<div region="center">sub center</div>
<div region="east" split="true" style="width:200px;">sub center</div>
</div>
</div>
<div region="west" split="true" title="菜单列表" style="width:280px;padding1:1px;overflow:hidden;">
<div fit="true" border="false">
<div title="系统管理" style="padding:10px;">
<ul id="tt1" animate="true" dnd="true">
<li>
<span>Folder</span>
<ul>
<li state="closed">
<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>
<li>File 4</li>
<li>File 5</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
</div>
<div title="产品管理" style="padding:10px" selected="true">
<ul id="treeDemo" title="Main Title" style="overflow:hidden;">
<div id="mm" style="width:150px;"> ?
<div id="m-refresh">刷新</div>
? ? ? ?<div id="mm-tabclose">关闭</div> ?
? ? ? ?<div fit="true" border="false">
<div title="我的主页" style="padding:20px;overflow:hidden;">?
<div style="margin-top:20px;">
<h3>jQuery EasyUI framework help you build your web page easily.</h3>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>?
<li>using easyui you don't write many javascript code, instead you defines user-interface by writing some HTML markup.</li>?
<li>easyui is very easy but powerful.</li>?
<%-- <page:pageInfo pageSize="1" url="index.jsp" totalPage="20" curPage="2"></page:pageInfo> --%>
</div>
</div>
</div>
</div>
</body>
</html>
?
package com.grace.project.test.pojo;
?
public class SimpleTree {
?
private Long id;
private Long pId;
private String name;
private boolean open;
private String iconSkin;
private boolean isParent = false;
public SimpleTree(){}
public SimpleTree(Long id, Long pId, String name, boolean open) {
super();
this.id = id;
this.pId = pId;
this.name = name;
this.open = open;
}
?
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public Long getpId() {
return pId;
}
public void setpId(Long pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
?
public String getIconSkin() {
return iconSkin;
}
?
public void setIconSkin(String iconSkin) {
this.iconSkin = iconSkin;
}
?
public boolean getIsParent() {
return isParent;
}
?
public void setIsParent(boolean isParent) {
this.isParent = isParent;
}
}
