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里面更多的示例和说明。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。