Introduction to JavaScript framework (xmlplus) components (Nine) Tree (Tree)

xmlplus is a JavaScript framework for rapid development of front-end and back-end projects. This article mainly introduces the tree of the xmlplus component design series, which has certain reference value. Interested friends can refer to it

The tree component is a component with a hierarchical structure and is widely used in various kind of scene. This chapter will implement a simple tree component. Although its functionality is limited, you can extend it to implement the tree component you need.

Data source

The data source of the tree component can be a data object in JSON format, or it can be a XML structured data or other hierarchical structured data. This chapter will use data objects with the following JSON format.

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

In the above data source, the name value will be displayed as the name of the tree node, and the array containing children represents the children of the node.

Design of recursive structure

The object is composed of the list elements ul and li in HTML. It has a natural tree structure. We might as well use them as Basic elements for building tree components. The outermost layer of the tree component must be a ul element, so we can temporarily define the tree component as follows:

Tree: {
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

The undefined component Item here is a sub-item component that needs to be defined recursively. It will be based on The provided data recursively generates descendant objects. The following is a possible design:

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" }
}

Note that the above neme object is used to display the name attribute. The expand object is used to expand or close child object entries. Child object entries are set up to require lazy instantiation, and will only be instantiated when the user clicks on the expand object to expand the child.

Loading and rendering of data

As mentioned in the previous section, we set the child object entries to be instantiated lazily. Therefore, the data setting interface provided for the sub-item Item should not instantiate the entries immediately. Below we first give the data interface function.

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 };
 }
}

This interface function val only sets the content related to the current node. Next we listen to the click event of the expand object and complete the instantiation of the component object entries in a timely manner.

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 };
 }
}

The above code contains an open parameter, which records whether the current node is in an expanded state for use by related listeners.

Dynamicly adding nodes

Now we make a small extension to the above component so that it supports the function of dynamically adding tree nodes. First, we add a trigger button to the child of the entries object and name it 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" }
}

Secondly, you need to listen to the click event of the add object and complete the addition of the object in the listener.

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);
  });
  // 其余代码同前
 }
}

It should be noted here that the listening method for the add object cannot be used directly: sys.add.on("click",...), but the proxy method should be used, otherwise an error will be reported. . Because its parent is a lazy-instantiated component, the add object is not visible until the entries object is instantiated.

Complete tree component

Based on the above content, a complete version of the tree component is now given:

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 };
 }
}

In The tree component in actual applications will have more functions than here. You can further improve it based on the above code, such as adding some ICON icons, making sub-items draggable, etc. However, it is very necessary to avoid complicating the code as much as possible during the improvement process. It is necessary to appropriately strip off some code and encapsulate it into components.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

【Related recommendations】

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (Nine) Tree (Tree). For more information, please follow other related articles on the PHP Chinese website!