zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.
这是zTree的官方网站喜欢的朋友可以多加关注 http://www.baby666.cn/hunter/zTree.html
zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.
treeView.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.4.2.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.ztree-2.6.js"></script> <SCRIPT LANGUAGE="JavaScript"> var setting = { showLine: true, //是否带有虚线 checkable: true //是否带有选择框 }; //数据内容 var zTreeNodes = [ {"id":1, "pId":0, "name":"test1"}, {"id":11, "pId":1, "name":"test11"}, {"id":12, "pId":1, "name":"test12"}, {"id":111, "pId":11, "name":"test111"} ]; $(document).ready(function(){ setting.isSimpleData = true; //是否为简单数组数据 这里还可以用json数据 setting.treeNodeKey = "id"; setting.treeNodeParentKey = "pId"; //以那个下标标识父节点 var zTree = $("#tree").zTree(setting, zTreeNodes); }); </SCRIPT> </HEAD> <BODY> <ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul> </BODY> </HTML>
把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据
php异步传输数据:
zTree.hmtl
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.4.2.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.ztree-2.6.js"></script> <SCRIPT LANGUAGE="JavaScript"> var setting = { showLine: true, async: true, //异步加载 asyncUrl: "asyncData/node.php", //获取节点数据的URL地址 asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式) asyncDataFilter : dataFilter, //异步加载数据函数名 }; var zNodes =[]; //先定义接收数据的数组 $(document).ready(function(){ var zTree = $("#tree").zTree(setting, zNodes); }); function dataFilter(treeId, parentNode, childNodes) { if (childNodes) { for(var i =0; i<childNodes.length; i++) { childNodes[i].name += "_filter"; } } return childNodes; } </SCRIPT> </HEAD> <BODY> <ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul> </BODY> </HTML>node.php
<?php ?> [<?php $pId = "1"; $pName = "hello world"; if(array_key_exists( 'id',$_REQUEST)) { $pId=$_REQUEST['id']; } if(array_key_exists('name',$_REQUEST)) { $pName=$_REQUEST['name']; } if ($pId==null || $pId=="") $pId = "0"; if ($pName==null) $pName = ""; for ($i=1; $i<5; $i++) { $nId = $pId.$i; $nName = "tree".$nId; echo "{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}"; if ($i<4) { echo ","; } } ?>]这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦