jQuery zTree

来源：互联网发布：python return 编辑：程序博客网时间：2024/05/28 11:48

<!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>


<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="所选节点" onclick="getSelectedNodes()"/>
</BODY>
</HTML>