jQuery를 EasyUI 트리 메뉴 - 트리 메뉴는 노드를 추가하는
이 튜토리얼은 어떻게 트리 메뉴 (트리)에 노드를 연결하는 방법을 보여줍니다. 우리는 과일과 야채가 들어있는 음식 트리 노드를 만든 다음 기존의 과일 노드에 다른 과일을 추가합니다.
음식 트리 만들기
첫째, 우리가 음식 트리를 만들려면 다음 코드는 다음과 같습니다
<사업부 스타일 = "폭 : 200 픽셀, 높이 : 자동; 국경 : 1 픽셀 고체 #ccc;"> <UL 아이디 = "TT"클래스 = "easyui 트리"URL = "tree_data.json"> </ UL> </ DIV>
트리 (나무) 구성 요소가 <UL> 태그에 정의되어 있습니다, 트리 노드 데이터는 URL "tree_data.json"에서로드.
부모 노드를 가져옵니다
그런 다음 노드를 클릭하여 과일 노드를 선택, 우리는 몇 가지 다른 과일 데이터를 추가합니다. 이그제큐티브 통해 getSelected 처리 노드를 얻을 :
VAR 노드 = $ ( '#의 TT') 나무 ( '통해 getSelected');
반환 결과를 통해 getSelected 방법은 아이디, 텍스트가 자바 스크립트 객체 인 재산을 대상으로. 타겟 속성이 노드가 선택되어있는 DOM 오브젝트 참조, 그 APPEND 방법은 추가 자식 노드를 위해 사용될 것이다.
추가 노드
VAR 노드 = $ ( '#의 TT') 나무 ( '통해 getSelected'); 경우 (노드) { VAR 노드들 = { "ID": 13, "텍스트": "딸기" }, { "ID": 14, "텍스트": "멜론" }]; $ ( '# 고작'). 트리 ( 'APPEND', { 부모 : node.target, 데이터 : 노드 }); }
당신은 어떤 열매를 추가 할 때, 당신은 볼 수 있습니다 :
당신이 볼 수 있듯이, easyui 트리를 사용하여 (트리) 플러그인을 추가 노드로하는 것은 그렇게 어려운 일이 아니다.