JavaScript 프레임워크(xmlplus) 구성요소 소개(나인) 트리(Tree)

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=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

여기서 정의되지 않은 구성 요소 Item은 재귀적으로 정의해야 하는 하위 항목 구성 요소입니다. 제공된 데이터를 기반으로 하위 개체를 반복적으로 생성합니다. 가능한 디자인은 다음과 같습니다.

Item: {
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;/>
   </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=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</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=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>`,
 map: { defer: "entries" },
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id=&#39;add&#39;]", function () {
   var stuff = {name: &#39;new stuff&#39;};
   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을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.

【관련 추천】

1. 무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼

위 내용은 JavaScript 프레임워크(xmlplus) 구성요소 소개(나인) 트리(Tree)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!