jQuery zTree

kingmxj

浏览: 182394 次
性别:
来自: 北京

最近访客更多访客>>

neoneus

victor036

ljbupc

a1309003199

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery json CSS HTML

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

zTree_test.rar (158.6 KB)
下载次数: 339

分享到：

JPA命令 | 开启sqlserver2005 已禁用代理XP 的方法

2011-02-27 16:38
浏览 5599
评论(2)
分类:Web前端
查看更多

2 楼九牛一毛 2012-02-14

var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠", open:true,
						children: [
							{ name:"叶子节点111",open:true,children:[{name:"11111"}]},
							{ name:"叶子节点112"}
						]},
					{ name:"父节点12 - 折叠",
						children: [
							{ name:"叶子节点121叶子节点121叶子节点121叶子节点121<br>叶子节点121叶子节点121叶子节点121叶子节点121叶子节点121叶子节点121叶子节点121叶子节点121叶子节点121"},
							{ name:"<table><tr><td>sssssssss</td></tr></table>"}
						]}
				]}
		];

1 楼 decano 2011-03-18

getSelectedNodes()貌似有问题，怎么选都是null

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery zTree

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery zTree

评论

发表评论

相关推荐

jquery常用代码段

最近访客更多访客>>