<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeIcons.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.4.js"></script>
<!--
这个例子是用于维护区域和行业信息树的
q:每个行业要有用不同的图标显示
a:只要修改zTreeIcons.css这个样式表,
根据行业的标识字段 修改成相应的图片名称 ,
修改treeNodes.txt的内容中的 iconSkin : "sim4" 。
-->
<SCRIPT LANGUAGE="JavaScript">
var zTree;//树
var setting;//参数设置
var zTreeNodes = [] ;//数据
setting = {
async : true,//异步加载
asyncUrl: "treeNodes.txt",//数据文件
showLine: true,//显示虚线
checkable : true,//复选框
//checkType : { "Y": "p", "N": "s" },
//下面的三个属性是同时出现的 用于关联父子节点
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
nameCol : "name",//显示树的名称,默认为"name"
fontCss : {color:"#ff0011"},//字体样式,json形式
editable : true,//设置节点是否可以编辑,同时也会允许拖拽
edit_removeBtn : true,//删除节点
edit_renameBtn : true,//重命名节点
//设置事件
callback : {
click: zTreeOnClick, //1.鼠标点击事件
rightClick: zTreeOnRightClick, //2.鼠标右键点击事件
beforeDrag: zTreeBeforeDrag, //3.拖拽前
drag: zTreeOnDrag, // 拖拽
drop: zTreeOnDrop, // 拖拽完成后
beforeRemove: zTreeBeforeRemove //4.删除前
}
};
//1.鼠标点击事件
function zTreeOnClick(event, treeId, treeNode) {
//alert(treeNode.tId + ", " + treeNode.id + ", " + treeNode.name);
}
//2.鼠标右键点击事件
function zTreeOnRightClick(event, treeId, treeNode) {
if (treeNode)
alert(treeNode.id + ", " + treeNode.iconSkin);
else
alert("is root");
}
//3.拖拽前(设置是否可以拖拽)
function zTreeBeforeDrag(){
//if(confirm("您确定要做此操作吗?")){
// return true;
//}
return true;
}
//拖拽
function zTreeOnDrag(event, treeId, treeNode){
alert(treeNode.tId + ", " + treeNode.name);
}
//拖拽完成后
function zTreeOnDrop(event, treeId, treeNode, targetNode, moveType) {
if (treeNode) alert("treeNode = " + treeNode.tId + ", " + treeNode.name);
if (targetNode) alert("targetNode = " + targetNode.tId + ", " + targetNode.name);
}
function zTreeBeforeRemove(treeId, treeNode){
if(confirm("您确定要做此操作吗?")){
return true;
}
return false;
}
//所选节点
function getSelectedNodes(){
var selectedNode = zTree.getSelectedNode();
alert(selectedNode);
}
$(document).ready(function(){
zTree = $("#tree").zTree(setting, zTreeNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
<input type="button" value="所选节点" οnclick="getSelectedNodes()"/>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeIcons.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.4.js"></script>
<!--
这个例子是用于维护区域和行业信息树的
q:每个行业要有用不同的图标显示
a:只要修改zTreeIcons.css这个样式表,
根据行业的标识字段 修改成相应的图片名称 ,
修改treeNodes.txt的内容中的 iconSkin : "sim4" 。
-->
<SCRIPT LANGUAGE="JavaScript">
var zTree;//树
var setting;//参数设置
var zTreeNodes = [] ;//数据
setting = {
async : true,//异步加载
asyncUrl: "treeNodes.txt",//数据文件
showLine: true,//显示虚线
checkable : true,//复选框
//checkType : { "Y": "p", "N": "s" },
//下面的三个属性是同时出现的 用于关联父子节点
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
nameCol : "name",//显示树的名称,默认为"name"
fontCss : {color:"#ff0011"},//字体样式,json形式
editable : true,//设置节点是否可以编辑,同时也会允许拖拽
edit_removeBtn : true,//删除节点
edit_renameBtn : true,//重命名节点
//设置事件
callback : {
click: zTreeOnClick, //1.鼠标点击事件
rightClick: zTreeOnRightClick, //2.鼠标右键点击事件
beforeDrag: zTreeBeforeDrag, //3.拖拽前
drag: zTreeOnDrag, // 拖拽
drop: zTreeOnDrop, // 拖拽完成后
beforeRemove: zTreeBeforeRemove //4.删除前
}
};
//1.鼠标点击事件
function zTreeOnClick(event, treeId, treeNode) {
//alert(treeNode.tId + ", " + treeNode.id + ", " + treeNode.name);
}
//2.鼠标右键点击事件
function zTreeOnRightClick(event, treeId, treeNode) {
if (treeNode)
alert(treeNode.id + ", " + treeNode.iconSkin);
else
alert("is root");
}
//3.拖拽前(设置是否可以拖拽)
function zTreeBeforeDrag(){
//if(confirm("您确定要做此操作吗?")){
// return true;
//}
return true;
}
//拖拽
function zTreeOnDrag(event, treeId, treeNode){
alert(treeNode.tId + ", " + treeNode.name);
}
//拖拽完成后
function zTreeOnDrop(event, treeId, treeNode, targetNode, moveType) {
if (treeNode) alert("treeNode = " + treeNode.tId + ", " + treeNode.name);
if (targetNode) alert("targetNode = " + targetNode.tId + ", " + targetNode.name);
}
function zTreeBeforeRemove(treeId, treeNode){
if(confirm("您确定要做此操作吗?")){
return true;
}
return false;
}
//所选节点
function getSelectedNodes(){
var selectedNode = zTree.getSelectedNode();
alert(selectedNode);
}
$(document).ready(function(){
zTree = $("#tree").zTree(setting, zTreeNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
<input type="button" value="所选节点" οnclick="getSelectedNodes()"/>
</BODY>
</HTML>