中国领先的IT技术网站
51CTO旗下网站
Ztree + PHP 无限极节点 递归查找节点法
用来查询数据库中，节点是否存在。就是存在子节点，就返回给子节点数组，有几个就加入子节点数组中，查询完了。然后一次性返回，他们就成了同级子节点了。
作者：SlikeType来源：oschina| 09:51
简单的描述一下，实习几个原理，思想，其实写很多东西，思想算是最重要的。
1、目标：将写一个无限节点的树形目录结构，如下图
1、你的下载 插件& ztree。然后布置在你的项目中。
&script&src=&__PUBLIC__/js/jquery-1.4.4.min.js&&&/script&&&script&src=&__PUBLIC__/js/jquery.ztree.core-3.5.js&&&/script&&
2、相关CSS
&link&rel=&stylesheet&&href=&__PUBLIC__/css/zTreeStyle/zTreeStyle.css&&type=&text/css&&&&link&rel=&stylesheet&&href=&__PUBLIC__/css/zTree.css&&type=&text/css&&&
以上CSS 和JS 以你自己的为准。
3、目录结构DIV
&div&class=&content_wrap&&&style=&background:#666;&&&&&&&&div&class=&zTreeDemoBackground&left&&&&&&&&&&&&ul&id=&treeDemo&&class=&ztree&&&/ul&&&&&&&/div&&&/div&&&div&class=&content-text&&id=&text&&&/div&&
4，自己单独js中的代码
&SCRIPT&&src=&__PUBLIC__/js/ztreeonload.js&&&/SCRIPT&&
里面写的相关功能 及配置！
&var&setting&=&{&&&&&&isSimpleData&:&true,&&&&&&&&&&&&&&&&&&&&showLine&:&true,&&&&&&&&&&&&&&&&&&&&&&&&checkable&:&true,&&&&&&&&&callback:&{&&&&&&&&&&onClick:&zTreeOnClick&&&&&&&&&&&&}&&};&&&var&zN&&&&&&&$.ajax({&&&&&&url:&/admin.php/Ztree&,&&&&&&type:&&get&,&&&&&&async:&false,&&&&&&dataType:&json&,&&&&&&&&success:&function&(data)&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&zNodes=&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&error:&function&(){&&&&&&&&&&alert('请求失败');&&&&&&&&},&&&&})&&&&&&&$(document).ready(function(){&&&&&&&&&&&&$.fn.zTree.init($(&#treeDemo&),&setting,&zNodes);&&});&
5、后台PHP 递归算法，从数据库中查找目录结构并且生成 JSON数据
地址：如4中，AJAX所请求的 【/admin.php/Ztree】我这里是用的ThinkPHP框架，所以url是这个样子，以你自己的接口文件为准！
&?php&&&&&&&&&&&&&&&&&&&&&&&&&&$arr=array();&&&&&&&&&&&&&$arr_str0&=&array(&name&&=&'函数库查询','children'=&$this-&SelectSon(1));&&&&&&&&&&&&&&&&&&&&$arr_str1&=&<span class="keyword简单的描述一下，实习几个原理，思想，其实写很多东西，思想算是最重要的。
1、目标：将写一个无限节点的树形目录结构，如下图
1、你的下载 插件
ztree。然后布置在你的项目中。
&script src="__PUBLIC__/js/jquery-1.4.4.min.js"&&/script&
&script src="__PUBLIC__/js/jquery.ztree.core-3.5.js"&&/script&
2、相关CSS
&link rel="stylesheet" href="__PUBLIC__/css/zTreeStyle/zTreeStyle.css" type="text/css"&
&link rel="stylesheet" href="__PUBLIC__/css/zTree.css" type="text/css"&
以上CSS 和JS 以你自己的为准。
3、目录结构DIV
&div class="content_wrap"
style="background:#666;"&
&div class="zTreeDemoBackground left"&
&ul id="treeDemo" class="ztree"&&/ul&
&div class="content-text" id="text"&&/div&
4、自己单独js中的代码
src="__PUBLIC__/js/ztreeonload.js"&&/SCRIPT&
里面写的相关功能及配置！
var setting = {
isSimpleData : true,
//数据是否采用简单 Array 格式，默认false
showLine : true,
//是否显示节点间的连线
checkable : true,
callback: {
onClick: zTreeOnClick
var zN//数据变量
//ajax提交数据，请求后台PHP处理返回出目录结构json数据
url:"/admin.php/Ztree",
type: "get",
async: false,
dataType:"json",
success: function (data) {
//alert(data);
//将请求返回的数据存起来
//alert(zNodes);
error: function (){//请求失败处理函数
alert('请求失败');
//初始化ztree目录结构视图！
$(document).ready(function(){
//alert("111");
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
5、后台PHP 递归算法，从数据库中查找目录结构并且生成 JSON数据
地址：如4中，AJAX所请求的 【/admin.php/Ztree】我这里是用的ThinkPHP框架，所以url是这个样子，以你自己的接口文件为准！
//父节点数组
$arr=array();
$arr_str0 = array("name" =&'函数库查询','children'=&$this-&SelectSon(1));
$arr_str1 = array("name" =&'数据库查询','children'=&$this-&SelectSon(2));
array_push($arr, $arr_str0);
array_push($arr, $arr_str1);//这里是2个父节点。
echo(json_encode($arr)); //这是最后返回给页面，也就是返回给AJAX请求后所得的返回数据 JSON数据
//这里仅仅是一个方法，一个调用SelectSon()方法，返回一个数组集合！但其中用的是递归！
//查找子节点
Pid=父节点ID
private function SelectSon($Pid){
$m=M('ztree');
if(($info=$m-&where("Pid='$Pid'")-&select())) //查找该父ID下的子ID
$data=array();
for ($i=0; $i & count($info) ; $i++)
$da=array("name" =&$info[$i]['name'],'children'=&$this-&SelectSon($info[$i]['id']));
//递归算法！
array_push($data, $da);//加入子节点数组
return $//一次性返回子节点数组，他们成为同级子节点。
注意：由于我是用的thinkphp框架。所以在方法调用上 有些不同，纯PHP文件中，思路应该是一样的，
首先是： 写一个数组。一个父节点的数组。
写一个方法，传递的参数是 父节点的ID，查询其子节点，在子节点中查询之后，用递归的方式继续查找子节点的子节点，直到最后查询完毕之后，返回数组给调用方法的父节点数组。然后再
echo(json_encode($arr));
转码成 JSON 将其输出，以便于AJAX异步访问，得到JSON数据。
得到之后，回到刚刚的JS功能代码中，直接初始化树目录结构，将其JSON数据传入OK。
其主要思想分2步走。第一步，是如何能把目录生成出来。先测试时，可以用静态数据。类似于
var node=[
{name:'父节点',children:[{name:'子节点',children:null},{name:'同级子节点',children:null}]}
先分析一下，这串数据，他有什么规律。你就会发现。其实很有规律。无限节点，其实就是每个json中，有children，而且
还有同级子节点。
你先用固定数据 生成目录结构之后
你就可以开始考虑，动态的向node传目录结构的数据了。就是我们后面所谓的 AJAX请求 PHP得到JSON数据，
PHP处理中，我用的是递归算法，返回JSON数据。及完成了。目录结构。
$m=M('ztree');
这句代码是thinkphp 实例化 数据操作对象的。
用来查询数据库中，节点是否存在。就是存在子节点，就返回给子节点数组，有几个就加入子节点数组中，查询完了。然后一次性返回，他们就成了同级子节点了ztree 添加节点
ztree 添加节点
最近在做的项目中有关ztree的开发，遇到了一个问题，当弹出ztree树的时候，是这样的：这个时候点击新增按钮，会弹出一个隐藏的框框，添加完信息后，把新添加的节点添加到ztree树中。
可是在调用addNodes方法的时候会出现节点添加两次的现象，大家在网上可能会找到很多有关ztree添加节点重复的问题，这个我就不提了。
现在给出不一样的解决方案，我们首先知道，为什么会出现重复添加的问题。
原因在于：我们异步加载了一次，然后再addNodes 这样就添加了两个节点。（这里如果我们调用展开节点方法，expendNode 这个方法貌&#20284;是不好使的，我也没搞清楚这是为什么，当我们调用reAsyncChildNodes方法的时候会自动展开树）
所以本人就不去调用addNodes方法了，这样就不会出现重复添加的问题了，但是怎么才能把添加的节点自动勾选上呢？
这个真是个问题，所以采用后台添加的方式：
&& &&& &&& &autoParam:[&id&],
&& &&& &&& &enable:true,
&& &&& &&& &url : getUrl
在ztree的属性中添加这个，其中的getUrl为自己定义的一步方法的url。
这里先提供自身在弹出页面填写后ajax返回的操作方法：
if($(&#customerForm&).valid()){
&& &&& &$('#customerForm').ajaxSubmit({
&& &&& &&& &type:&post&,
&& &&& &&& &dataType: &json&,
&& &&& &&& &async : false,
&& &&& &&& &url: '${ctx}/system/cusCustomerInfo/saveAndReturnJSON.action',
&& &&& &&& &success: function(data){
&& &&& &&& &&& &var oldNode = zTreeObj.getNodeByParam(&id&,$(&#customerId&).val());
&& &&& &&& &&& &if(oldNode){
&& &&& &&& &&& &&& &oldNode.checked =
&& &&& &&& &&& &&& &zTreeObj.updateNode(oldNode);
&& &&& &&& &&& &}
&& &&& &&& &&& &$(&#customerId&).val(data.id);
&& &&& &&& &&& &var node = zTreeObj.getNodeByParam(&id&,panyProfession);
&& &&& &&& &&& &node.isParent =
&& &&& &&& &&& &zTreeObj.reAsyncChildNodes(node, &refresh&);
&& &&& &&& &&& &closeAddDiv();
&& &&& &&& &}
&& &&& &});
&& &}else{
&& &&& &$.watermark.showAll();
这里会看见，&$(&#customerId&).val(data.id); 这个赋&#20540;就个为了下方& zTreeObj.reAsyncChildNodes(node, &refresh&);刷新的时候调用一步方法的url的参数。
function getUrl(treeId,treeNode){
&& &var idsStr = pId == '1' ? $(&#customerId&).val() : $(&#partcId&).val();
&& &return &${ctx}/system/cusContactInfo/toSetCustomerToContact.action?idsStr=&&#43;idsS
红色字体就是自动选中的隐藏域id。
这时在后台遍历添加上checked=true就ok了。}
我的热门文章
即使是一小步也想与你分享zTree v3.1获取选中节点的值并赋给隐藏域 - 天浩 - ITeye技术网站
博客分类：
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("testtree"),
nodes = zTree.getCheckedNodes(true),
for (var i=0, l=nodes. i&l; i++) {
v += nodes[i].name + ",";
alert(nodes[i].id);
//获取选中节点的id值
document.getElementById('test').value=nodes[i].
if (v.length & 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
&input type="hidden" name="test" id="test"&
&div id="menuContent" class="menuContent" style="display: position:"& &ul id="testtree" class="ztree" style="margin-top:0; width:280 height: 300"&&/ul&&/div&
浏览 12391
论坛回复 /
(0 / 3964)
浏览: 366389 次
来自: 宁波
大神在不，我这边生成完html转成PDF时中文直接没有了：
不 ...
做了好多个模板后客户要求加页码，这种方式导出pdf网上没找到解 ...
哥们,cas跨域的域名怎么单点登录啊! 比如A网站:www.a ...
唱歌给你昌哥听 写道密码为在163邮箱设置上的客户端授权码,而 ...
密码为在163邮箱设置上的客户端授权码,而不是你登陆邮箱时候的 ...