이 글은 2019-7-11 11:20에 szxiaxiaojun이 마지막으로 편집했습니다.
일상적인 웹 프로젝트 개발에서는 종종 데이터베이스에서 얻은 트리 구조 데이터가 트리 형태로 표시되는 것을 접하게 됩니다. 편의를 위해, 앞으로 재사용할 수 있는 자바스크립트용 크로스 브라우저 트리 제어를 작성할 수 있습니다. 이 섹션은 직접 개발한 JS 트리 플러그인을 공유하며, 도움이 필요한 친구들을 위해 직접 다운로드할 수 있습니다. 트리 플러그인을 구현해야 합니다 (1) 데이터를 자동으로 하위 관계로 조직하여 상급자와 부하 관계 간 관계를 수동으로 추가하거나 프론트엔드에서 데이터베이스에서 데이터를 얻지 않아도 됩니다 (2) 사용자 지정 로딩 디렉터리 트리 지원 XML 및 JSON 형식의 데이터 로드 (3) 트리 노드 선택 기능(단일 선택, 다중 선택 [연쇄 선택])을 구현합니다. (4) 빅데이터 일회성 로드 지원 。。。。。。 제가 만든 Tree 플러그인을 공유해 보겠습니다: 이 플러그인은 Jquery를 기반으로 하며 참조가 필요합니다
첫째: 플러그인 내 각 트리 노드의 파라미터 JSON 객체는 아래에 표시됩니다 nodeItem: 함수 () {
반환 {
nodeCode: "", // nodecode
nodetext: "", // 노드 텍스트 [노드 표시 텍스트]
nodetitle: "", // 노드 제목 [마우스 이동용 노드 텍스트 구식 표시]
supnodecode: "", // 상위 노드 코드 [이 노드가 속한 부모 노드 코드를 정의하고 이 코드를 통해 하위 관계를 형성하기]
nodeURL: "", // node URL은 현재 노드가 커스터마이즈한 링크 URL 주소를 나타냅니다
iconexpand: "", // 노드 확장 아이콘 [디렉터리 트리 노드에 사용자 지정 확장 상태로 표시된 아이콘, 비어 있으면 기본 아이콘이 사용됨]
iconcollapse: "" // 노드 축소 아이콘 [디렉터리 트리 노드에 사용자 지정 축소 상태로 표시되는 아이콘, 비어 있으면 기본 아이콘이 사용됨]
}
} 둘째: 디렉터리 트리를 불러오는 세 가지 방법 1. loadJson(Json) JSON 객체 디렉터리 트리 노드 배열 (한 번에 완료됨) JSON 형식은 nodeItem 객체의 각 항목에 대한 인수 배열입니다
[ { nodecode: "", nodetext: "", nodetitle: "", supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML 문자열 형식 노드 데이터 (일회성 완료)
참고: XML 문자열 형식 사용 nodeName: nodecode, nodetext 등 태그는 변경할 수 없으며, 프로그램은 이 이름을 직접 사용하여 생성됩니다
<root>
<item> // 각 노드는 여러 데이터 값을 포함합니다
<nodecode><![CDATA[노드 인코딩 값]></nodecode>
<nodetext><![CDATA[노드 이름 텍스트]]></nodetext>
<nodetitle><![CDATA[노드 마우스 이동 표시 프롬프트 텍스트]]></nodetitle>
<supnodecode><![CDATA[노드 부모 인코딩]></supnodecode>
<nodeurl><![CDATA[노드 연관 링크 주소]></nodeurl>
<iconexpand><![CDATA[노드 확장 시 아이콘 경로 표시]></iconexpand>
<iconcollapse><![CDATA[노드가 축소될 때 아이콘 경로 표시]></iconcollapse>
</item> ... ...
</root>
3. addNodeItem(nodeItem) 메서드를 통해 플러그인 객체 메서드를 통해 노드 아이템을 하나씩 수동으로 추가합니다(완료까지 두 단계)
makeTree()라는 플러그인 객체를 통해 이 메서드를 수동으로 호출하여 트리를 만들 수 있습니다.
셋째: 디렉터리 트리 내 부하와 부하 관계 재조직을 위한 이벤트 방법 이 방법을 통해 프론트엔드가 부하와 부하 관계에 따라 구분할 필요가 없는 문제를 해결할 수 있습니다. 넷째: 위의 내용은 트리의 주요 로딩 및 재조직 방법에 대한 간단한 소개입니다. 아래에는 코드 내 상세한 주석과 함께 전체 JS 플러그인 코드를 게시하겠습니다 플러그인 기능: 체크, 싱글, 확장, 접기, 노드 연결 표시/숨기기, 노드 삽입, 삭제, 노드 아이콘 맞춤 설정, 노드 선택 설정, 디렉터리 트리 선택 노드 획득(XML, JSON 지원 등) 오른쪽 클릭 메뉴 (팝업 레이어를 사용해야 하므로 현재 지원되지 않음, 이 기능은 차단 및 제거됨) 노드 클릭, 더블 클릭, 노드 선택 변경 이벤트 지원 최종 디스플레이 효과 첨부 자료 다운로드:
Tree_Demo.rar
(54.71 KB, 다운로드 횟수: 1)
| 
게시됨 2019. 7. 11. 오전 11:20:12
|
|
|
|
