JavaScript 프레임워크(xmlplus) 구성요소 소개(나인) 트리(Tree)
- 零下一度원래의
- 2017-05-06 15:29:152227검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!