Introduction to the xmlplus component (9) Tree)

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the tree of the xmlplus component design series, which has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the tree of the xmlplus component design series, which has some reference value. If you are interested, please refer to it.

Tree components are hierarchical components that are widely used in various scenarios. In this chapter, we will implement a simple tree component. Despite its limited functions, you can extend it to implement the tree component you need.

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

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

In the preceding data source, the name value is displayed as the name of the Tree node, and an array containing children represents the child level of the node.

Recursive Structure Design

Objects composed of the list elements ul and li in HTML have a natural tree structure. We may wish to use them as the basic elements for building tree components. The outermost layer of the tree component must be an ul element. Therefore, we can temporarily define the tree component as follows:

Tree: { xml: `
 
 
   
     
  
 
 
`}

The undefined component Item is a child component that needs to be recursively defined. It recursively generates child objects based on the provided data. The following is a possible design:

Item: { xml: `
   
 
   
  
  

    `, 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 the child object entries. The sublevel object entries is set to require delayed instantiation. This object is instantiated only when you click the expand object to expand the sublevel.

Data Loading and rendering

As described in the previous section, we set that the child-level object entries needs to be delayed for instantiation. Therefore, the data setting interface provided for the subitem Item should not be immediately instantiated for entries. The following describes the data interface functions.

Item: {// css, xml, map items are the same as 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 };}}

The val function only sets the content related to the current node. Next, we will listen on the expand object click events and instantiate the component object entries in a timely manner.

Item: {// css, xml, map items are the same as 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 preceding Code contains an open parameter, which records whether the current node is in the expanded state for the listener.

Add nodes dynamically

Now we make a small extension for the above components to support dynamic addition of Tree nodes. First, we add a trigger button at the sublevel of the object entries and name it "add.

Item: { xml: "
   
 
   
  
  
 
   
+
 
  
   
", map: { defer: "entries" }}

Next, you need to listen to the Click Event of the add object and add the object in the listener.

Item: {// css, xml, and map items are the same as the previous 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) ;}); // other codes are the same as before }}

Note that the add object cannot be listened directly: sys. add. on ("click ",...), the proxy method should be used; otherwise, an error will be reported. Because its parent level is a delayed instantiation component, the add object is invisible between entries objects that are not instantiated.

Complete tree components

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

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: `
 
 
   
     
  
 
 
`, fun: function (sys, items, opts) {  return items.item; }},Item: { css: "#item { cursor: pointer; }", xml: `
   
 
   
  
  
 
   
+
 
  
   
`, 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 }; }}

In practical applications, tree components are richer than the functions provided here. You can make further improvements based on the above Code, such as adding ICON icons and making sub-items scalable. However, it is necessary to avoid Code complexity during the improvement process. It is necessary to extract some code and encapsulate it as a component.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.