[JQUERY] 어떻게 자바 스크립트 계층 멀티 레벨의 데이터 테이블을 구현하는 방법?

어떻게 자바 스크립트 계층 멀티 레벨의 데이터 테이블을 구현하는 방법?

해결법

1. ---

   1.나는 바닐라 자바 ​​스크립트와이를 달성 생각할 수있는 가장 간단한 방법은 객체의 수정 깊이 우선 탐색 될 것이다 :

   나는 바닐라 자바 ​​스크립트와이를 달성 생각할 수있는 가장 간단한 방법은 객체의 수정 깊이 우선 탐색 될 것이다 :

   함수 renderJSON JSON () { CONST 래퍼 = document.createElement ( "DIV '); CONST 스택 = [{ 노드 : JSON, 이름 : '뿌리' parentEl : 래퍼 }]; 반면 (stack.length> 0) { ) (현재 =이 stack.pop하자; currentObj = current.node하자; currentParentEl = current.parentEl하자; 할 수준 = document.createElement ( 'DIV'); ( '레벨') level.classList.add; level.textContent current.name + = ''; 경우 (currentObj.renderContent) { 사용자 정의 HTML 콘텐츠를 렌더링 // currentObj.renderContent (레벨); } 다른 경우 (! (currentObj instanceof를 객체)) { level.textContent + = currentObj; } currentParentEl.append (레벨); 경우 (currentObj instanceof를 객체) { 키 = Object.keys (currentObj)를 보자; 만약 (! currentObj.skipChildren) { // 역으로 푸시는 키 순서를 유지하는 {- 위해 (; I> = 0 난 - I = 1 keys.length하자) [I] = 키 키하자; 노드 = currentObj [키]하자; {(stack.push 노드 : 노드, 이름 : 키, parentEl : 레벨 }); } } } } 래퍼를 반환; } // 예 사용 사례 : CONST 권한 = 권한 함수 () { this.skipChildren 사실 =; this.view = 거짓; this.edit = 거짓; this.delete = 거짓; }; Permissions.prototype = { renderContent (엘) { CONST 필드 = '뷰', '수정', '삭제']; 에 대한 {(필드의 필드를하자) CONST 라벨 = document.createElement ( "라벨"); label.textContent = 필드; CONST 선택란 = document.createElement ( "입력"); checkbox.type = '체크 박스'; 이 checkbox.checked = [분야]; label.appendChild (체크 박스); el.appendChild (라벨); } } }; CONST 렌더링 renderJSON = ({ 에서 element1 : { A : 네, B : 6, C : 24 element1a : { A : '안녕하세요' } }, 이 element2 : { A : 'ABC', 권한 : 새로운 권한 () }, element3 : "첫 번째", "두 번째", "세 번째"] }); (렌더링) document.body.append; .level { 마진 왼쪽 : 1em을; }

   당신이 당신의 필요에 따라이 코드의 분기 할 수있는 다른 방법이 많이있다. 당신이 시작하는 JSON 문자열을 제공하고 있기 때문에, 당신은 당신이 원하는 결과를 생성하는 자바 스크립트 객체에 있음을 변환 할 수있는 방법을 찾아야합니다.

from https://stackoverflow.com/questions/52039222/how-to-implement-hierarchical-multilevel-datatable-in-javascript by cc-by-sa and MIT license