easyui tree 예제

트리 구성 요소는

    태그에 정의되고 트리 노드 데이터는 URL « tree_data.json »에서 로드됩니다. 이 자습서에서는 트리에 노드를 추가하는 방법을 보여 주며 우리는 과일과 야채 노드를 포함하는 식품 나무를 만든 다음 기존 과일 노드에 다른 과일을 추가합니다. 트리그리드는 그리드에서 계층 적 데이터를 표시하는 데 사용됩니다. 데이터 그리드를 기반으로 트리뷰와 편집 가능한 그리드를 결합합니다. treegrid를 사용하면 사용자 지정 가능하고 비동기화 확장 가능한 행을 만들고 멀리절 열에 계층 데이터를 표시할 수 있습니다. 트리는 웹 페이지의 트리 구조에 계층 데이터를 표시합니다. 사용자가 확장, 축소, 드래그 앤 드롭, 편집 및 비동기 로드 기능을 제공합니다. 우선, 우리는 식품 트리를 만들고, 코드는 다음과 같습니다 : 속성은 datagrid에서 확장되고 아래는 treegrid에 대한 추가 속성입니다. 트리에는 URL `get_data.php`가 로드됩니다. 로드할 자식 노드는 상위 노드 상태에 따라 달라집니다. 닫힌 노드를 확장할 때 노드에 로드된 자식 노드가 없는 경우 위에 정의된 URL을 통해 `id`라는 http request 매개 변수로 노드 ID 값을 서버로 보내자 자식 노드를 검색합니다.

    $.fn.datagrid.defaults에서 확장합니다. 기본값을 $.fn.treegrid.defaults로 재정의합니다. 당신이 볼 수 있듯이, 노드를 부화 에 easyui의 트리 플러그인을 사용하는 것은 어렵지 않다. HTML 태그에서 트리그리드를 만듭니다. 대부분의 경우 트리그리드는 데이터 그리드와 동일한 구조 및 서식을 따릅니다. 이 자습서에서는 비동기 트리 만들기를 사용하여 필요에 따라 트리 데이터를 반환하는 서버 코드를 작성하는 방법을 보여 주시면 됩니다. 트리는

      요소에서 해제할 수 있습니다. 태그는 리프와 자식을 정의할 수 있습니다. 노드는 ul 목록 내의

    • 요소가 됩니다. 다음은 ul 요소 내에 트리 노드를 중첩하는 데 사용되는 요소를 보여 주어집니다.

      많은 메서드가 `id`라는 매개 변수를 사용하며, 이 매개 변수는 트리 노드 값을 나타냅니다. 트리는 사용자가 빈 트리를 만든 다음 비동기 및 필요에 따라 트리를 채우는 데 사용할 JSON 데이터를 동적으로 반환하는 서버 측을 지정하는 기본 제공 비동기 로드 모드를 지원합니다. 다음은 예제입니다: getSelected 메서드의 반환 결과는 id, 텍스트, 특성 및 대상 속성이 있는 자바스크립트 개체입니다. 대상 속성은 선택한 노드를 굴절하는 DOM 개체이며, 이 경우 부속 메서드는 자식 노드를 부화하는 데 사용합니다. . 그런 다음 다른 과일 데이터를 더해 줄 노드를 클릭하여 과일 노드를 선택합니다. getSelected 메서드를 호출하여 노드에서 핸들을 가져옵니다: 노드 1과 노드 2가 닫혀 있고 노드 1을 확장할 때 자식 노드가 직접 표시됩니다. 노드 2를 확장하면 값(2)을 서버로 보내 자식 노드를 검색합니다. 아래 코드는 선택한 노드 앞에 새 노드를 삽입하는 방법을 보여 주며, 많은 이벤트 콜백 함수는 다음 속성을 포함하는 `노드` 매개 변수를 취할 수 ASP.NET 웹 서비스에서 json 데이터를 처리합니다.

Ce contenu a été publié dans Non classé. Vous pouvez le mettre en favoris avec ce permalien.

Les commentaires sont fermés.