jQuery zTree树插件简单使用教程
前言
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。
支持静态和Ajax异步加载节点数据.
在开发中我们常需要用到树状的展示.
下载地址：zTree
静态zTree开发流程
引入资源
<linkrel="stylesheet"href="../../../css/zTreeStyle/zTreeStyle.css"type="text/css"> <scripttype="text/javascript"src="../../../js/jquery-1.4.4.min.js"></script> <scripttype="text/javascript"src="../../../js/jquery.ztree.core.js"></script>
html元素
<div> <ulid="treeDemo"class="ztree"></ul> </div>
JS方式一-简单json数据格式
<SCRIPTtype="text/javascript">
<!--
varsetting={
data:{
simpleData:{
enable:true
}
}
};
varzNodes=[
{id:1,pId:0,name:"父节点1-展开",open:true},
{id:11,pId:1,name:"父节点11-折叠"},
{id:111,pId:11,name:"叶子节点111"},
{id:112,pId:11,name:"叶子节点112"},
{id:113,pId:11,name:"叶子节点113"},
{id:114,pId:11,name:"叶子节点114"},
{id:12,pId:1,name:"父节点12-折叠"},
{id:121,pId:12,name:"叶子节点121"},
{id:122,pId:12,name:"叶子节点122"},
{id:123,pId:12,name:"叶子节点123"},
{id:124,pId:12,name:"叶子节点124"},
{id:13,pId:1,name:"父节点13-没有子节点",isParent:true},
{id:2,pId:0,name:"父节点2-折叠"},
{id:21,pId:2,name:"父节点21-展开",open:true},
{id:211,pId:21,name:"叶子节点211"},
{id:212,pId:21,name:"叶子节点212"},
{id:213,pId:21,name:"叶子节点213"},
{id:214,pId:21,name:"叶子节点214"},
{id:22,pId:2,name:"父节点22-折叠"},
{id:221,pId:22,name:"叶子节点221"},
{id:222,pId:22,name:"叶子节点222"},
{id:223,pId:22,name:"叶子节点223"},
{id:224,pId:22,name:"叶子节点224"},
{id:23,pId:2,name:"父节点23-折叠"},
{id:231,pId:23,name:"叶子节点231"},
{id:232,pId:23,name:"叶子节点232"},
{id:233,pId:23,name:"叶子节点233"},
{id:234,pId:23,name:"叶子节点234"},
{id:3,pId:0,name:"父节点3-没有子节点",isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
//-->
</SCRIPT>
JS方式二-标准json数据格式
<SCRIPTtype="text/javascript">
<!--
varsetting={};
varzNodes=[
{name:"父节点1-展开",open:true,
children:[
{name:"父节点11-折叠",
children:[
{name:"叶子节点111"},
{name:"叶子节点112"},
{name:"叶子节点113"},
{name:"叶子节点114"}
]},
{name:"父节点12-折叠",
children:[
{name:"叶子节点121"},
{name:"叶子节点122"},
{name:"叶子节点123"},
{name:"叶子节点124"}
]},
{name:"父节点13-没有子节点",isParent:true}
]},
{name:"父节点2-折叠",
children:[
{name:"父节点21-展开",open:true,
children:[
{name:"叶子节点211"},
{name:"叶子节点212"},
{name:"叶子节点213"},
{name:"叶子节点214"}
]},
{name:"父节点22-折叠",
children:[
{name:"叶子节点221"},
{name:"叶子节点222"},
{name:"叶子节点223"},
{name:"叶子节点224"}
]},
{name:"父节点23-折叠",
children:[
{name:"叶子节点231"},
{name:"叶子节点232"},
{name:"叶子节点233"},
{name:"叶子节点234"}
]}
]},
{name:"父节点3-没有子节点",isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
//-->
</SCRIPT>
异步zTree加载
前面的配置相同,在此不再阐述.主要是js不同.
异步JS
varsetting={
//可勾选
check:{
enable:true
},
data:{
simpleData:{
enable:true
}
}
};
functioninitTree(){
varpayFreq=$("#payFreq").val();
varfyType=$('#fyType').val();
varsetHzType=$('#setHzType').val();
$.ajax({
url:"/demo/initTree",
data:{payFreq:payFreq,
fyType:fyType,
setHzType:setHzType
},
success:function(object){
varnodes="";
//拼接simple格式的json字符串
$.each(object.data,function(i,item){
nodes+="{id:'"+item.id+"',pId:'"+item.pid+"',name:'"+item.name+"',isParent:'"+item.isParent+"'},";
});
varzNodes="["+nodes+"]";
varjson=eval('('+zNodes+')');
//console.log(json);
zTreeInit(json);
}
});
}
/*初始化树*/
functionzTreeInit(json){
$.fn.zTree.init($("#treeDemo"),setting,json);
varzTree=$.fn.zTree.getZTreeObj("treeDemo");
//全部展开
zTree.expandAll(true);
//Y代表勾选时,N代表取消勾选p代表父节点,s代表字节点
setting.check.chkboxType={"Y":"ps","N":"ps"};
}
java代码
Controller层
@RequestMapping("initTree")
@ResponseBody
publicDataMessageinitTree(StringsetHzType,StringpayFreq,StringfyType){
params.put("setHzType",setHzType);
params.put("fyType",fyType);
params.put("fkmattr_xt",fkmattr_xt);
//获取treeinfo列表
List<TreeInfo>treeInfos=feeTransferService.initTree(params);
returnDataMessage.successData(treeInfos);
}
tree实体类
publicclassTreeInfo{
privateStringid;
privateStringpid;
privateStringname;
privateStringisParent;
}
说明
更多实例可以参看zTree中文文档
或参见zTreeGitHub里面更多的示例和说明。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。