jQuery 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>
<!--
这个例子是用于维护区域和行业信息树的
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="所选节点" onclick="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="所选节点" onclick="getselectednodes()"/>
</body>
</html>