Ztree + PHP 무한 노드 재귀 검색
- 伊谢尔伦원래의
- 2016-11-26 16:17:261411검색
1. 서문
인턴십의 몇 가지 원칙과 아이디어를 간략하게 설명하겠습니다. 사실 저는 많은 글을 쓰는데 아이디어가 가장 중요합니다.
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, //数据是否采用简单 Array 格式，默认false 性
showLine : true, //是否显示节点间的连线
checkable : true,
callback: {
onClick: zTreeOnClick
}
};
var zNodes;//数据变量
//ajax提交数据，请求后台PHP处理返回出目录结构json数据
$.ajax({
url:"/admin.php/Ztree",
type: "get",
async: false,
dataType:"json",
success: function (data) {
//alert(data);
zNodes=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은 사용자 인터페이스 파일에 따라 다릅니다.
<?php
//父节点数组
$arr=array();
$arr_str0 = array("name" =>'函数库查询','children'=>$this->SelectSon(1)); //父节点 Pid=1;
$arr_str1 = array("name" =>'数据库查询','children'=>$this->SelectSon(2)); //父节点 Pid=2;
array_push($arr, $arr_str0);
array_push($arr, $arr_str1);//这里是2个父节点。
echo(json_encode($arr)); //这是最后返回给页面，也就是返回给AJAX请求后所得的返回数据 JSON数据
？>//이것은 단지 메소드일 뿐이며 SelectSon() 메소드를 호출하고 배열 컬렉션을 반환합니다! 그러나 재귀가 사용됩니다!
<?php
//查找子节点 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 $data;//一次性返回子节点数组，他们成为同级子节点。
}
else
{
return null;
}
}
?>참고: 저는 thinkphp 프레임워크를 사용하고 있기 때문입니다. 따라서 메소드 호출에는 몇 가지 차이점이 있습니다. 순수 PHP 파일에서는 아이디어가 동일해야 합니다.
첫 번째는 배열을 작성하는 것입니다. 상위 노드의 배열입니다.
두 번째: 메서드를 작성합니다. 전달된 매개 변수는 상위 노드의 ID이고, 하위 노드를 쿼리하고, 하위 노드를 쿼리한 후 최종 쿼리가 나올 때까지 하위 노드의 하위 노드를 재귀적으로 계속 검색합니다. Completed 는 호출 메서드의 상위 노드 배열에 배열을 반환합니다. 그런 다음
echo(json_encode($arr));
JSON으로 트랜스코딩하여 출력합니다. JSON 데이터를 가져오기 위한 AJAX 비동기 액세스입니다.
얻은 후 방금 JS 함수 코드로 돌아가서 트리 디렉터리 구조를 직접 초기화하고 해당 JSON 데이터를 OK에 전달합니다.
요약:
주요 아이디어는 두 단계로 나누어집니다. 첫 번째 단계는 디렉토리를 생성하는 방법입니다. 처음 테스트할 때 정적 데이터를 사용할 수 있습니다.
var node=[
{name:'parent node',children:[{name:'child node',children:null},{name과 유사 :'Similar child node',children:null}]}
]
먼저 이 데이터 문자열을 분석하여 어떤 패턴이 있는지 살펴보겠습니다. 당신은 알게 될 것입니다. 실제로는 매우 규칙적입니다. 무한 노드는 실제로 각 json에 하위 노드가 있고
에도 형제 하위 노드가 있음을 의미합니다.
먼저 고정된 데이터를 사용하여 디렉터리 구조를 생성합니다
디렉터리 구조 데이터를 노드에 동적으로 전송하는 것을 고려할 수 있습니다. 나중에 AJAX 요청이라고 부르는 것입니다. PHP는 JSON 데이터를 가져옵니다.
PHP 처리 중에 재귀 알고리즘을 사용하여 JSON 데이터를 반환합니다. 완료되었습니다. 디렉토리 구조.
아 그렇죠.
$m=M('ztree');
이 코드는 thinkphp에서 데이터 작업 개체를 인스턴스화하는 데 사용됩니다.
은 해당 노드가 데이터베이스에 존재하는지 쿼리하는 데 사용됩니다. 자식 노드가 있으면 자식 노드 배열로 반환하고, 여러 개 있으면 자식 노드 배열에 추가하여 쿼리를 완료합니다. 그런 다음 즉시 돌아오면 동일한 레벨의 하위 노드가 됩니다