<!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>
<!--
這個(gè)例子是用于維護區域和行業(yè)信息樹(shù)的
q:每個(gè)行業(yè)要有用不同的圖標顯示
a:只要修改zTreeIcons.css這個(gè)樣式表，
根據行業(yè)的標識字段 修改成相應的圖片名稱(chēng) ，
修改treeNodes.txt的內容中的 iconSkin : "sim4" 。
-->
<SCRIPT LANGUAGE="JavaScript">
var zTree;//樹(shù)
var setting;//參數設置
var zTreeNodes = [] ;//數據
setting = {
async : true,//異步加載
asyncUrl: "treeNodes.txt",//數據文件
showLine: true,//顯示虛線(xiàn)
checkable : true,//復選框
//checkType : { "Y": "p", "N": "s" },
//下面的三個(gè)屬性是同時(shí)出現的 用于關(guān)聯(lián)父子節點(diǎn)
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
nameCol : "name",//顯示樹(shù)的名稱(chēng)，默認為"name"
fontCss : {color:"#ff0011"},//字體樣式，json形式
editable : true,//設置節點(diǎn)是否可以編輯，同時(shí)也會(huì )允許拖拽
edit_removeBtn : true,//刪除節點(diǎn)
edit_renameBtn : true,//重命名節點(diǎn)
//設置事件
callback : {
click: zTreeOnClick, //1.鼠標點(diǎn)擊事件
rightClick: zTreeOnRightClick, //2.鼠標右鍵點(diǎn)擊事件
beforeDrag: zTreeBeforeDrag, //3.拖拽前
drag: zTreeOnDrag, // 拖拽
drop: zTreeOnDrop, // 拖拽完成后
beforeRemove: zTreeBeforeRemove //4.刪除前
}
};
//1.鼠標點(diǎn)擊事件
function zTreeOnClick(event, treeId, treeNode) {
//alert(treeNode.tId + ", " + treeNode.id + ", " + treeNode.name);
}
//2.鼠標右鍵點(diǎn)擊事件
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;
}
//所選節點(diǎn)
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="所選節點(diǎn)" onclick="getSelectedNodes()"/>
</BODY>
</HTML>
