나는 종종 디렉토리 구조 표시와 같은 나무 구조에 문제가 발생합니다.
대부분의 경우 배경은 다음과 같이 그러한 데이터를 반환합니다.
[{id : 19, pid : 0, name : 'nodejs'}, {id : 20, pid : 19, name : 'express'}, {id : 21, pid : 19, name : 'mongodb'}, {id : 60, pid : 20, 'ejs'}, {id : 59, pid : 0 : '}, {<, {id : <id : 59, 이름 : 'JavaScript'}, {id : 71, pid : 59, name : 'css'}, {id : 72, pid : 59, name : 'html'}, {id : 73, pid : 59, 'bootsprap'}, {id : 61, pid : 0 : '},}, pid :'}, pid : 0 : '},} 61, 이름 : '웹 디자인'},]이 데이터 구조는 백그라운드에서 처리하기 쉽지만 프론트 데스크는 처리하기가 어렵습니다. 다음과 같이 트리 JSON 데이터로 먼저 변환해야합니다.
[{id : 19, pid : 0, name : 'nodejs', children : [{id : 20, pid : 19, name : 'express', children : [{id : 60, pid : 20, 'ejs'}]}, {id : 21, pid : 19, 'mongodb'}]}, {id : 59, pid : 0, reenc ' {id : 70, pid : 59, name : 'javascript'}, {id : 71, pid : 59, name : 'css'}, {id : 72, pid : 59, name : 'html'}, {id : 73, pid : 59, 이름 : 'bootstrap'}}, {id : 61, pid : 0, pid : 0, pid : 0. Design ', Children : [{id : 63, pid : 61, name :'Web Design '}]},]이로 인해 재귀 적으로 사용하여 트리 모양의 구성 요소를 제작하는 것이 매우 편리합니다.
배경 이이 구조를 직접 반환 할 수있는 것이 가장 좋습니다. 그렇지 않으면 프론트 데스크가 변환을 수행해야합니다.
1. 목록 배열 구조의 데이터를 트리 구조 json으로 변환합니다.
// 트리에 목록 jsonFunction ListTotree (list, pid) {var ret = []; // 임시 배열 (var i in list) {if (list [i] .pid == pid) {// 현재 항목의 상위 ID가 검색 할 학부모 ID와 동일하면 [i] istotree (list, list, list, list, list, list, list, list [i]); ret.push (list [i]); // 임시 배열에서 현재 항목을 저장}} return reto; // 재귀가 끝난 후 결과를 반환} var tree = listtotree (list, 0); // 함수를 호출하고 변환 할 목록 배열을 전환하고 pidconsole.log (tree);2. 트리 구조 JSON 데이터를 기반으로 드롭 다운 상자 생성
// 웹 페이지에 드롭 다운 박스 컨테이너를 추가하십시오 <select id = "selectbox"name = ""> </select> // js 스크립트, 재귀 적으로 // 컨테이너 객체 var var selectbox = document.getElementById ( "selectBox"); // 스패닝 트리 드롭 메뉴 var j = "-"; // prefix 기호는 부모-자녀 관계를 표시하는 데 사용됩니다. 다른 기호는 여기서 기능을 사용할 수 있습니다. for (var i = 0; i <d.length; i ++) {if (d [i] .children.length) {// 서브 세트 옵션+= "<옵션 값 = '+d [i] .id+"'> "+j+d [i] .name+"</옵션> "; J+= "-"; // 접두사 기호 옵션 옵션+= CreateRectTree (d [i] .Children)의 기호 추가 j = j.slice (0, j.length-1); // 재귀 종료가 우수한 것으로 되돌릴 때마다 하나의 기호로 분장해야 할 때마다 {// 옵션 옵션 {// 옵션 옵션 {// prefix 기호는 옵션 {// 옵션+= <옵션 {// subset j = j.slice (0, j.length-1); // value = ' "+d [i] .id+"'> "+j+d [i] .name+"</옵션> "; }} return 옵션; // 최종 HTML 결과를 반환} // 함수를 호출하고 드롭 다운 박스 컨테이너에 구조를 입력하고 빠져 나옵니다. selectbox.innerhtml = createRectTree (tree);여전히 깊이있는 학습을 원한다면 jQuery 드롭 다운 박스 효과 요약 및 JavaScript 드롭 다운 상자 효과 요약을 클릭하여 학습 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.