ZTreeDemo
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<base href="<%=basePath%>">
<title>ZTree</title>
<script type="text/javascript">
var setting={
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "", "N": ""}
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck,
onClick: zTreeOnClick,
beforeCheck: zTreeBeforeCheck
}
};
var s="";
function zTreeBeforeCheck(treeId, treeNode) {
if(treeNode!=null){
for(var i=0;i<treeNode.length;i++){
s+=treeNode[i].name+",";
}
}
};
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treedemo");
var select = $("#select").val();
if(select==0){
alert("请选择一个选取类型..");
treeNode.checked=false;
}
if(select==1){
s=treeNode.name+",";
if(!treeNode.checked){
var nodes = treeNode.children;
if(nodes!=null){
for(var i=0;i<nodes.length;i++){
if(nodes[i].checked==true){
zTree.checkAllNodes(false);
}
}
}
}else{
zTree.checkAllNodes(false);
var nodes = treeNode.children;
zTree.checkNode(treeNode, !treeNode.checked, true);
if(nodes!=null){
for(var i=0;i<nodes.length;i++){
zTree.checkNode(nodes[i], !nodes[i].checked, true);
s+=nodes[i].name+",";
}
}
}
}
if(select==2){
var node= treeNode.getParentNode();
if(treeNode.checked==true){
if(!node.checked==true){
var nodes1 = zTree.getCheckedNodes(true);
if(nodes1!=null){
var node1 = nodes1[0];
var nodes2=node1.children;
if(nodes2!=null){
var flags=false;
for(var i=0;i<nodes2.length;i++){
if(treeNode.name==nodes2[i].name){
flags=true;
}
}
if(!flags){
zTree.checkAllNodes(false);
}
}
}
zTree.checkNode(node, !node.checked, true);
zTree.checkNode(treeNode, true, true);
s=node.name+","+treeNode.name+",";
}else{
var nodes1 = zTree.getCheckedNodes(true);
var node1 = nodes1[0];
var nodes2=node1.children;
s+=treeNode.name+",";
var flags=false;
for(var i=0;i<nodes2.length;i++){
if(treeNode.name==nodes2[i].name){
flags=true;
}
}
if(!flags){
zTree.checkAllNodes(false);
zTree.checkNode(node, !node.checked, true);
zTree.checkNode(treeNode, !treeNode.checked, true);
}
}
}
}
$("#text").attr("value", s.substring(0,s.length-1));
};
function zTreeOnClick(event, treeId, treeNode,clickFlag) {
//alert(treeNode.tId + ", " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treedemo");
//var nodes = zTree.getNodes();
var nodes = treeNode.children;
var s=treeNode.name+",";
for(var i=0;i<nodes.length;i++){
s+=nodes[i].name+",";
}
$("#text").attr("value", s);
};
var znodes=[
{id:1,pId:0,name:"山东",open:true},
{id:11,pId:1,name:"临沂"},
{id:12,pId:1,name:"青岛"},
{id:111,pId:11,name:"平邑",open:true},
{id:112,pId:11,name:"费县"},
{id:1111,pId:111,name:"流峪"},
{id:1112,pId:111,name:"仲村"},
{id:11111,pId:1111,name:"日本"}
];
$(function(){
$.fn.zTree.init($("#treedemo"),setting,znodes);
});
</script>
</head>
<body>
This is my JSP page. <br>
<input type="text" id="text"/>
<div id="treedemo" class="ztree"></div>
<input type="button" value="button" onclick="showCheckeds()"/>
<input type="hidden" value="0" id="select"/>
<input type="button" value="根据上级部门选取" onclick="selectByParent()"/>
<input type="button" value="根据下级部门选取" onclick="selectByChild()"/>
<script type="text/javascript">
function selectByParent(){
if($("#select").val()==2){
var zTree = $.fn.zTree.getZTreeObj("treedemo");
zTree.checkAllNodes(false);
}
$("#select").attr("value",1);
alert(1);
}
function selectByChild(){
if($("#select").val()==1){
var zTree = $.fn.zTree.getZTreeObj("treedemo");
zTree.checkAllNodes(false);
}
$("#select").attr("value",2);
alert(2);
}
function showCheckeds(){
var zTree = $.fn.zTree.getZTreeObj("treedemo");
var nodes = zTree.getCheckedNodes(true);
var s="";
for(var i=0;i<nodes.length;i++){
s+=nodes[i].name+",";
}
alert(s);
}
</script>
</body>
</html>
{id:12,pId:1,name:"青岛"} pId中I是大写
class="ztree" 是必须的
$(function(){
$.fn.zTree.init($("#treedemo"),setting,znodes);
});
初始化树的方法
callback: {
onClick: zTreeOnClick
}
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
};
点击的callback事件
实现了点击节点，他的子节点（不包含孙子节点）也同时选中或取消，在点击了这个节点（定为1）后，点击其他节点，1节点及其子节点如果是选中状态则取消选中状态。
返回此节点及其子节点的name && id。
当一个节点1与他的子节点被选中后，点击字节点时，这个子节点11及其他本身的自己点不会选中，11节点变成为选中状态
返回checked的节点属性。
brforeCheck方法实现通过子节点找父节点1，再添加1的多个子节点，以及取消功能
实现点击不是父节点1的子节点2时，取消所选中选项，将节点2及其父节点选中！
子找父，父找子 之间切换先取消树的所有选项框的选中状态
解决刚开始时获取选中项时空值导致不能选择父节点的问题。判断获得的集合是否为空。
解决一开始子节点不能选中的问题。顺序乱，想的不周全
callback: {
onClick: onClick
}
};
function onClick(event, treeId, treeNode,clickFlag) {
alert(treeNode.tId + ", " + treeNode.name);//点击直接返回节点对象treeNode
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//var nodes = zTree.getNodes();
var nodes = zTree.getSelectedNodes();
alert(nodes[0].name);//返回被选中节点对象
};
获得checked或selected节点 详细查看API
需求实现