jQuery zTree

最新推荐文章于 2020-11-03 10:24:53 发布

最新推荐文章于 2020-11-03 10:24:53 发布 · 122 阅读

文章标签：

#java #工作

java 专栏收录该内容

112 篇文章

订阅专栏

本文展示了如何使用ZTree实现动态展示区域和行业信息的树形结构，包括自定义图标显示和节点操作。

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