layui tree structure

Recently, I have contacted the layui framework, and I feel it's not bad. Let's summarize the use of the tree structure in using the layui.
When viewing on the official website, it is found that the use of layui is statically added code. If I want to dynamically add a tree node, I encounter a big problem. The static example code of the official website is as follows:
layui.use(['tree', 'layer'], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: '#demo1 '/ / specify element
    ,target: '_blank' //Whether to open a new tab (for example, the node is valid only when it returns to the href)
    ,click: function(item){ //Click node callback
      layer.msg('Current section name:'+ item.name + '<br>All parameters:'+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //node
      {
        name: 'Common folders'
        ,id: 1
        ,alias: 'changyong'
        ,children: [
          {
            name: 'All unread (set jump)'
            ,id: 11
            ,href: 'http://www.layui.com/'
            ,alias: 'weidu'
          }, {
            name: 'Top mail'
            ,id: 12
          }, {
            name: 'Label mail'
            ,id: 13
          }
        ]
      }, {
        name: 'My email'
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: 'QQ mailbox'
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: 'Inbox '
                ,id: 211
                ,children: [
                  {
                    name: 'All unread'
                    ,id: 2111
                  }, {
                    name: 'Top mail'
                    ,id: 2112
                  }, {
                    name: 'Label mail'
                    ,id: 2113
                  }
                ]
              }, {
                name: 'Sent messages'
                ,id: 212
              }, {
                name: 'Spam'
                ,id: 213
              }
            ]
          }, {
            name: 'Alibaba cloud post'
            ,id: 22
            ,children: [
              {
                name: 'Inbox '
                ,id: 221
              }, {
                name: 'Sent messages'
                ,id: 222
              }, {
                name: 'Spam'
                ,id: 223
              }
            ]
          }
        ]
      }
      ,{
        name: 'Favorites'
        ,id: 3
        ,alias: 'changyong'
        ,children: [
          {
            name: 'Love action movie'
            ,id: 31
            ,alias: 'love'
          }, {
            name: 'Technology stack'
            ,id: 12
            ,children: [
              {
                name: 'front end'
                ,id: 121
              }
              ,{
                name: 'Full end'
                ,id: 122
              }
            ]
          }
        ]
      }
    ]
  });

In the nodes node is the data we need to add. It can be seen that it is a json array situation. When I spliced the data into the above string and passed it in, I found that it can't dynamically compile it into the required one, instead, it parsed every character of the string.
I had to find another way. In the Forum on its official website, I found that someone wrote a string that needed to be converted into a json array. When I transferred the string into a json array and passed it in, I found that I didn't get the expected result, so I thought whether I could pass in an array or not, so I spliced it according to my understanding.
The code is as follows:
function createTree(data) {
	var node = [];
	for (var i = 0; i< data.length; i++) {
		node.push({
			name:'' + data[i].name,
			id: data[i].id
		});
		if (data[i].vehicles.length > 0) {
			var child = [];
			for(var j = 0; j< data[i].vehicles.length; j++) {
				if(isOnLine(data[i].vehicles[j].vin)) {
					child.push({
					name:data[i].vehicles[j].number + '(on-line)',
					id: data[i].vehicles[j].vin
					});
				} else {
					child.push({
					name:data[i].vehicles[j].number + '(off-line)',
					id: data[i].vehicles[j].vin
					});
				}
				arr.push(data[i].vehicles[j]);
			}
			node[i].children = child;
		}
	}
The tree structure can be displayed by passing in the node node.
It's a little rushed. Please understand




Tags: JSON JQuery

Posted on Sun, 31 May 2020 11:20:40 -0400 by amycrystal123