The tree structure of the front end frame layui

1. Import Plug

layui the need to use imported layui js and css:

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

2. Details

2.1 basic parameters

1) elem Type: String / Object, directed selector container.

2) data type: Array, the data source.

3) id Type: String, the setting example of unique index used for the base parameter passing method.

4) showCheckbox type: Boolean, whether to display box.

5) edit Type: Boolean / Array. Whether to open the operation node icon, default false. If true, the default display "change delete" icon; if the display state sequence array may be freely configurable operation icon, the icon is currently supported operations: the Add , Update , del , such as: edit: [ 'add' , 'update', 'del' ].

6) accordion types: Boolean, accordion mode is turned on by default false.

7) onlyIconControl Type: Boolean, whether to allow only the left node icons control the expansion contraction. Default false (ie, click on the node itself can also be controlled). If true, it can only shrink by icons on the left to expand the node.

8) isJump type: Boolean, whether to allow a new window pops up click on a node when the jump. Default false, if enabled, the parameter needs to be set link (url value format) in the node data.

9) showLine Type: Boolean, whether to open the connection line. Default true, if set to false, then the node triangle icon appears to the left.

10) text Type: Object, supported formats are:

text: { 
  defaultNodeName: ' Unnamed '  // node default name 
  , none: ' No data '  // data as a tooltip when empty 
}

2.2 Data parameter data source

1) title Type: String