jquery treeView工具 简单树形目录工具

zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.
这是zTree的官方网站喜欢的朋友可以多加关注 http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.




treeView.html

<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">    showLine: true, //是否带有虚线      checkable: true //是否带有选择框  };  //数据内容      {"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);  });  <ulid="tree"style="width:300px; overflow:auto;"></ul>
把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据

php异步传输数据:



<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">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;  }  <ulid="tree"style="width:300px; overflow:auto;"></ul>
node.php

<?php ?>  [<?php  if(array_key_exists( 'id',$_REQUEST)) {  }  if(array_key_exists('name',$_REQUEST)) {  }  if ($pId==null || $pId=="") $pId = "0";  if ($pName==null) $pName = "";  for ($i=1; $i<5; $i++) {  echo"{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  }  }  ?>] 
这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧


zTree是不错的树形工具,功能强大异常,不过因此也带来一些问题,使用复杂,体型庞大.

这是zTree的官方网站喜欢的朋友可以多加关注 http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手册,对于老手来说很方便,不过例子里没有附带说明,对于新手立即使用上有些问题.这里我举个最简单例子,用于新手立即使用,以后遇到更多应用时我也会把例子贴上来.




treeView.html

<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">    showLine: true, //是否带有虚线      checkable: true //是否带有选择框  };  //数据内容      {"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);  });  <ulid="tree"style="width:300px; overflow:auto;"></ul>
把以上代码复制到html文件里就可以了,当然你必须把该导入的文件全部导入,至于这些文件去官网下就有了,至于数据内容就得自己想办法组成这样格式就行了,也可以用jquery异步请求json数据

php异步传输数据:



<TITLE> ZTREE DEMO </TITLE><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="demoStyle/demo.css"type="text/css"><linkrel="stylesheet"href="zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="jquery.ztree-2.6.js"></script><SCRIPTLANGUAGE="JavaScript">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;  }  <ulid="tree"style="width:300px; overflow:auto;"></ul>
node.php

<?php ?>  [<?php  if(array_key_exists( 'id',$_REQUEST)) {  }  if(array_key_exists('name',$_REQUEST)) {  }  if ($pId==null || $pId=="") $pId = "0";  if ($pName==null) $pName = "";  for ($i=1; $i<5; $i++) {  echo"{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  }  }  ?>] 
这是简单异步请求数据,这是原本zTree里的一个demo,我把这个和第一个例子改写了下,比原来的例子简单了许多,如果想要进一步的功能可以看下原来的例子,这个很简单就不多做说明了,又不懂就留言吧


http://blog.163.com/gwbjx@126/blog/static/20910067201162005214342/