<!DOCTYPE html>
<html>
<head>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreecss/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/common/jquery.ztree.core.js"></script>
<script src="js/common/jquery.ztree.excheck.min.js"></script>
<script LANGUAGE="JavaScript">
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
view: {
dblClickExpand: false
},
data: {
key: {
children: "children",
name: "name",
title: "id",
url: "link"
},
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
var zNodes =[
{id:4, pId:0, name:"河北省", open:true, nocheck:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:true, nocheck:true},
{id:51, pId:5, name:"广州"},
{id:100, pId:51, name:"广州下一级"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:true, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"}
];
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo3");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
var cid=-1;
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo3"),
nodes = zTree.getCheckedNodes(true),
v = "";
if(nodes[0]!=undefined){
cid = nodes[0].id
}else{
cid = -1;
}
console.log(cid);
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo3"), setting, zNodes);
});
</script>
</head>
<body>
<ul id="treeDemo3" class="ztree"></ul>
</body>
</html>