xmlplus는 프런트엔드 및 백엔드 프로젝트의 신속한 개발에 사용되는 JavaScript 프레임워크입니다. 이번 글에서는 참고할만한 가치가 있는 xmlplus 컴포넌트 디자인 시리즈의 트리를 주로 소개합니다. 관심 있는 친구들은
을 참고하세요. 트리 컴포넌트는 계층적 구조를 가진 컴포넌트로 다양한 장면에서 널리 사용됩니다. 이 장에서는 기능이 제한되어 있지만 이를 확장하여 필요한 트리 구성 요소를 구현할 수 있는 간단한 트리 구성 요소를 구현합니다.
데이터 소스
트리 구성요소의 데이터 소스는 JSON 형식의 데이터 객체일 수 있습니다. XML 구조 데이터 또는 기타 계층 구조 데이터가 있는 데이터 개체일 수 있습니다. 이 장에서는 다음 JSON 형식의 데이터 개체를 사용합니다.
var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'child folder', children: [ { name: 'alice' } ] } ] };
위 데이터 소스에서 name 값은 트리 노드의 이름으로 표시되며, 자식을 포함하는 배열은 노드의 자식을 나타냅니다.
재귀 구조 설계
객체는 HTML의 ul 및 li 목록 요소로 구성됩니다. 트리 구성요소를 구축하기 위한 기본 요소로 사용하세요. 트리 구성 요소의 가장 바깥쪽 레이어는 ul 요소여야 하므로 다음과 같이 임시로 트리 구성 요소를 정의할 수 있습니다.
Tree: { xml: `<ul id='tree'> <Item id='item'/> </ul>` }
여기서 정의되지 않은 구성 요소 Item은 재귀적으로 정의해야 하는 하위 항목 구성 요소입니다. 제공된 데이터를 기반으로 하위 개체를 반복적으로 생성합니다. 가능한 디자인은 다음과 같습니다.
Item: { xml: `<li id='item'> <p id='content'> <span id='neme'/><span id='expand'/> </p> <ul id='entries'/> </li>`, map: { defer: "entries" } }
위의 neme 개체는 이름 속성을 표시하는 데 사용됩니다. 확장 개체는 하위 개체 항목을 확장하거나 닫는 데 사용됩니다. 하위 개체 항목은 지연 인스턴스화를 요구하도록 설정되며 사용자가 하위 항목을 확장하기 위해 확장 개체를 클릭할 때만 인스턴스화됩니다.
데이터 로드 및 렌더링
이전 섹션에서 언급했듯이 하위 개체 항목이 지연 인스턴스화되도록 설정했습니다. 따라서 하위 항목 Item에 대해 제공되는 데이터 설정 인터페이스는 항목을 즉시 인스턴스화해서는 안 됩니다. 아래에서는 먼저 데이터 인터페이스 기능을 제공합니다.
Item: { // css, xml, map 项同上 fun: function (sys, items, opts) { var data; function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; } }
이 인터페이스 함수 val은 현재 노드와 관련된 내용을 설정합니다. 다음으로 확장 개체의 클릭 이벤트를 수신하고 적시에 구성 요소 개체 항목의 인스턴스화를 완료합니다.
Item: { // css, xml, map 项同上 fun: function (sys, items, opts) { var data, open; sys.expand.on("click", function () { open = !open; sys.expand.text(open ? " [-]" : " [+]"); open ? (sys.entries.show() && load()) : sys.entries.hide(); }); function load() { if ( sys.entries.children().length == 0 ) for ( var item of data.children ) sys.add.before("Item").value().val(item); } function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; } }
위 코드에는 현재 노드가 관련 리스너가 사용할 수 있도록 확장된 상태인지 여부를 기록하는 open 매개변수가 포함되어 있습니다.
동적으로 노드 추가
이제 위 구성 요소를 약간 확장하여 트리 노드를 동적으로 추가하는 기능을 지원합니다. 먼저 항목 개체의 하위 항목에 트리거 버튼을 추가하고 이름을 add로 지정합니다.
Item: { xml: "<li id='item'> <p id='content'> <span id='neme'/><span id='expand'/> </p> <ul id='entries'> <li id='add'>+</li> </ul> </li>", map: { defer: "entries" } }
둘째, 추가 개체의 클릭 이벤트를 수신하고 리스너에서 개체 추가를 완료해야 합니다.
Item: { // css, xml, map 项同前 fun: function (sys, items, opts) { var data, open; sys.item.on("click", "//*[@id='add']", function () { var stuff = {name: 'new stuff'}; data.children.push(stuff); sys.add.before("Item").value().val(stuff); }); // 其余代码同前 } }
여기서 add 개체에 대한 수신 메서드를 직접 사용할 수 없다는 점에 유의해야 합니다: sys.add.on("click",...). 그러나 프록시 메서드를 사용해야 합니다. 그렇지 않으면 오류가 보고됩니다. 해당 부모는 지연 인스턴스화된 구성 요소이므로 항목 개체가 인스턴스화될 때까지 추가 개체는 표시되지 않습니다.
완전한 트리 구성 요소
위 내용을 기반으로 이제 트리 구성 요소의 완전한 버전이 제공됩니다:
Tree: { css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; } #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`, xml: `<ul id='tree'> <Item id='item'/> </ul>`, fun: function (sys, items, opts) { return items.item; } }, Item: { css: "#item { cursor: pointer; }", xml: `<li id='item'> <p id='content'> <span id='neme'/><span id='expand'/> </p> <ul id='entries'> <li id='add'>+</li> </ul> </li>`, map: { defer: "entries" }, fun: function (sys, items, opts) { var data, open; sys.item.on("click", "//*[@id='add']", function () { var stuff = {name: 'new stuff'}; data.children.push(stuff); sys.add.before("Item").value().val(stuff); }); sys.expand.on("click", function () { open = !open; sys.expand.text(open ? " [-]" : " [+]"); open ? (sys.entries.show() && load()) : sys.entries.hide(); }); function load() { if ( sys.entries.children().length == 1 ) for ( var item of data.children ) sys.add.before("Item").value().val(item); } function val(value) { data = value; sys.neme.text(data.name); data.children && data.children.length && sys.expand.show().text(" [+]"); } return { val: val }; } }
실제 애플리케이션의 트리 구성 요소에는 위의 코드를 기반으로 일부 ICON 아이콘 추가, 하위 항목 드래그 가능 등을 추가로 개선할 수 있습니다. 그러나 개선 과정에서 코드를 최대한 복잡하게 만들지 않는 것이 매우 필요하며, 일부 코드를 적절하게 제거하여 컴포넌트로 캡슐화하는 것이 필요합니다.
이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.
【관련 추천】
3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼
위 내용은 JavaScript 프레임워크(xmlplus) 구성요소 소개(나인) 트리(Tree)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!