jQuery実装レベル表示

データ特徴:JSONデータ処理、多層、親子関係がある.
メソッドの特徴:再帰値
実現機能:最初のレベルのデータを表示して、クリックした後に下級機構が下級機構を展示することがあるならば、クリックして帰って上級機構に戻ることができます
考え方:
1.この機能は主に二つの部分に分けられ、一つは下級機関に入ること、二つは上級機関に戻ることである.
2.下級機関に入る
2.1最初のレベルをロードし、クリックイベントをバインドする
2.2親が第1レベルである場合、親IDを取得し、データを循環し、そのレベルデータのchildren情報を取得し、現在のページデータをクリアし、代わりにchildren情報を追加する.
2.3親が第一級でない場合、親級IDを取得し、children情報を循環し、idが親級idであるか否かを判断し、終了した場合、それ以外の場合は再帰的に実行する
3.上司に戻る
3.1親IDが第1級:データを循環し、親IDが第1級データであると判断し、第1級データをロードする
3.2親IDが第一級でない:第二級から循環し、循環はchildren情報に一致する.現在のidが親である場合、子級循環に入らない.そうでない場合、子級に入って循環判断を行う
注意:ページは単純な静的ページで、jqueryを導入します.min.jsでいいです.

 









	

		

			

		
	
	






var retObj = 
[{"children":[],"id":"20180822151103835002","pid":"-1","text":"     "},
{"children":[{"children":[{"children":[{"children":[{"children":[],"id":"20190322170137232006","pid":"20190322170103732005","text":"  000001"}],"id":"20190322170103732005","pid":"20190322165939531001","text":"  0001"},{"children":[],"id":"20190322173456424007","pid":"20190322165939531001","text":"  0002"}],"id":"20190322165939531001","pid":"20180927164529554022","text":"  01"},{"children":[{"children":[{"children":[],"id":"20190326112109861002","pid":"20190326112048838001","text":"  020201"},{"children":[],"id":"20190326112130798003","pid":"20190326112048838001","text":"  020202"}],"id":"20190326112048838001","pid":"20190322170047449004","text":"  0202"}],"id":"20190322170047449004","pid":"20180927164529554022","text":"  02"}],"id":"20180927164529554022","pid":"20180927162605916002","text":"   "},{"children":[{"children":[],"id":"20190326112017409000","pid":"20180927164544256023","text":"  01"}],"id":"20180927164544256023","pid":"20180927162605916002","text":"  "}],"id":"20180927162605916002","pid":"-1","text":"      "},
{"children":[{"children":[],"id":"20180927164601364024","pid":"20180927162617894003","text":"    "},{"children":[],"id":"20180927164611387025","pid":"20180927162617894003","text":"    "}],"id":"20180927162617894003","pid":"-1","text":"      "}
];
var html1 = '<li>  </li>';
			var html2 = '';
			for (var i = 0; i < retObj.length; i++) {
				unitname = retObj[i].text;
				unittreeid = retObj[i].id;
				pid = retObj[i].pid;
				html2 += '<li onclick="getSon(this);">' +unitname;
				html2 +=' <ol style="display: none" class="unittreeid">'+unittreeid +'</ol>';
				html2 +='<ol style="display: none" class="pid">'+pid +'</ol>';
				html2 += '</li>'
			}
var html = html1 + html2;
$('#tree').append(html);

//  ID       
function getSon(obj){
var id =$(obj).children(".unittreeid").html();
var pid =$(obj).children(".pid").html();
//         
if(pid=='-1'){
var html = '';
html +='<li onclick="goBack(this);" id="firstli">  <a  class="parentID" >'+id +'</a></li>';
children = [];
//       
	for (var i = 0; i < retObj.length; i++) {
		unittreeid = retObj[i].id;
		if(unittreeid==id)
		children = retObj[i].children;	

			}
	if(children.length){
			//       
			for(var i = 0; i < children.length; i++){

			
			
				unitname = children[i].text;
				unittreeid = children[i].id;
				pid = children[i].pid;
				html += '<li onclick="getSon(this);" >'+unitname ;
				html +='<ol style="display: none" class="unittreeid">'+unittreeid +'</ol>';
				html +='<ol style="display: none" class="pid">'+pid +'</ol></li>';
		
		}
	$('#tree').empty();
	$('#tree').append(html);}

	}else{ 
	//         ，       
	for (var i = 0; i < retObj.length; i++) {
		var children = [];
		children = retObj[i].children;
		if(children.length>0)
		getSonInfo(id,children)	;
			
		}
	}



}



//       
function getSonInfo(id,obj){
//       
for(var j=0;j<obj.length;j++){
	unitname = obj[j].text;
	unittreeid = obj[j].id;
	pid = obj[j].pid;
	var child =[];
	child =obj[j].children;
	
	if(unittreeid==id){
		if(child.length>0){
		var html = '';
		html +='<li onclick="goBack(this);" id="firstli">  <a  class="parentID"  >'+id +'</a></li>';
		for(var i=0;i<child.length;i++){
		var unitname = child[i].text;
		var unittreeid = child[i].id;
		var pid = child[i].pid;
		html += '<li onclick="getSon(this);" >'+unitname ;
		html +='<ol style="display: none" class="unittreeid">'+unittreeid +'</ol>';
		html +='<ol style="display: none" class="pid">'+pid +'</ol></li>';
			}
		$('#tree').empty();
		$('#tree').append(html);			
		}	
	return ;
		}else{
	if(child.length>0)	
	getSonInfo(id,child); 
		}
	}
}

//    id        
function goBack(obj){
//    ID
var parentId =$(obj).children(".parentID").html();
//            
var isFirst =false;
var html = '<li>  </li>';
	for (var i = 0; i < retObj.length; i++) {
	unitname = retObj[i].text;
	unittreeid = retObj[i].id;
	pid = retObj[i].pid;
	html += '<li onclick="getSon(this);" >'+unitname ;
	html +='<ol style="display: none" class="unittreeid">'+unittreeid +'</ol>';
	html +='<ol style="display: none" class="pid">'+pid +'</ol>';
	html += '</li>';
	if(unittreeid==parentId) isFirst=true;
	}
  if(isFirst){
	$('#tree').empty();
	$('#tree').append(html);
  }else{
	//        
	for (var i = 0; i < retObj.length; i++) {
	//unitname = retObj[i].text;
	//unittreeid = retObj[i].id;
	//pid = retObj[i].pid;
	//        
	var children = [];
		children = retObj[i].children;
		if(children.length>0)
		getParentInfo(parentId,children)	;
		}
  
  
	}
}

//                     
function getParentInfo(parentId,obj){
var isParent =false;
var html ='';
//       
	for(var j=0;j<obj.length;j++){
	var unitname = obj[j].text;
	var unittreeid = obj[j].id;
	var pid = obj[j].pid;
	var child =[];
	child =obj[j].children;
	html +='<li onclick="goBack(this);" class="goBack" id="firstli">  <a  class="parentID" >'+pid +'</a></li>';
	html += '<li onclick="getSon(this);" >'+unitname ;
	html +='<ol style="display: none" class="unittreeid">'+unittreeid +'</ol>';
	html +='<ol style="display: none" class="pid">'+pid +'</ol></li>';
	if(unittreeid == parentId) {
	isParent =true;
	continue; 
	}
	if(child.length>0){
		getParentInfo(parentId,child);
		}

	}
	if(isParent){
	$('#tree').empty();
	$('#tree').append(html);
	
	var parentIDs =[];
	parentIDs = $('#tree').find(".goBack");
	for(var i=1;i<parentIDs.length;i++){
	$(parentIDs[i]).remove();
	}
	
	}
	
}



//1.           
//2.       
//3.    ，