<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content=""> <SCRIPT LANGUAGE="JavaScript">
var zNodes = <%=jsonDicts%>;
var zTree1;
var setting;
setting = {
checkable : true,
};
$(document).ready(function (){
refreshTree();
});
function refreshTree(){
setting.callback.onClick();
zTree1 = $("#treeDemo").zTree(setting, clone(zNodes));
}</SCRIPT>
</head> <body>
<td width=200 align=left >
<ul id="treeDemo" class="tree"></ul>
</td>
</body>
</html>
页面如下
我点击复选框，点击事情要把该广东的信息赋值到右边的文本框里面
复选框是不需要的，请先去掉。比如：你勾选了两了个市，你说右边应该如何反应？在zTree中，点击文字时，底色会变成黄色，此时视为选中。
只需要按选中的事情来就可以了。
<html>
<head>
<title>ZTREE DEMO - Standard Data </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
view: {
selectedMulti: false //禁止多点选中
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: function(treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeNode);
var selectedNode = treeObj.getSelectedNodes()[0];
$("#txtId").val(selectedNode.id);
$("#txtAddress").val(selectedNode.name);
}
}
};
var zNodes =[
{id:1, pId:0, name:"广东", open:true},
{id:101, pId:1, name:"广州", file:"core/standardData"},
{id:102, pId:1, name:"深圳", file:"core/simpleData"},
{id:103, pId:1, name:"东莞", file:"core/noline"}
]; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<div style="float:left;" >
<ul id="treeDemo" class="ztree">
</ul>
</div>
<div style="float:left;" >
id: <input id="txtId" type="text" value="" /><br />
地名：<input id="txtAddress" type="text" value="" />
</div>
</body>
</html>ztree3.4下载地址： http://jquerytree.googlecode.com/files/JQuery%20zTree%20v3.4.zip
ztree api: http://www.ztree.me/v3/api.php