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에서 데이터 작업 개체를 인스턴스화하는 데 사용됩니다.
은 해당 노드가 데이터베이스에 존재하는지 쿼리하는 데 사용됩니다. 자식 노드가 있으면 자식 노드 배열로 반환하고, 여러 개 있으면 자식 노드 배열에 추가하여 쿼리를 완료합니다. 그런 다음 즉시 돌아오면 동일한 레벨의 하위 노드가 됩니다