1. First, use a div to store drop-down trees.

<div id ='itemtree'></div>

2. Reference to bootstrap js file and css file

<script src="../bootstrap-treeview.js"></script>
<link rel="stylesheet" href="../bootstrap-treeview.css">

3. Modify bootstrap-treeview.js and add addNode and deleteNode methods

3.1 Add the following code to the return of the var Tree = function (element, options) method:

// Adding Node Method
addNode: $.proxy(this.addNode, this),
// Delete Node Method
deleteNode: $.proxy(this.deleteNode, this),
deleteChildrenNode: $.proxy(this.deleteChildrenNode, this),

3.2 Under the var Tree = function (element, options) method, add and delete new methods. The code is as follows:

    // Adding child nodes to nodes
	Tree.prototype.addNode = function (identifiers, options) {
	    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
	            this.setAddNode(node, options);
	    }, this));

	    this.setInitialStates({ nodes: this.tree }, 0);
	    this.render();
	};

	//Add child nodes
	Tree.prototype.setAddNode = function (node, options) {
        /*If the parent node to insert a child node currently does not have any children, then [] is assigned to the parent node.
	      Otherwise, node.nodes will have undefined errors*/
	    if (node.nodes == null) {
	    	node.nodes = [];
	    }
	    if (options.node) {
	        node.nodes.push(options.node);
	    }
	};
	/**
	 * Delete a node if the root node cannot be deleted
	 * Gets the parent node of the node,
	 * Delete oneself from the parent node nodes collection according to Id
	 * Refresh parent node
	 * @param identifiers
	 * @param options
	 */
	Tree.prototype.deleteNode = function (identifiers, options) {
	    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
	        var parentNode = this.getParent(node);
	        if(parentNode && parentNode.nodes != null ){
	            for(var i = parentNode.nodes.length-1; i >= 0; i--){
	                if(parentNode.nodes[i].nodeId == node.nodeId){
	                    parentNode.nodes.splice(i, 1);
	                }
	            }
	            this.setInitialStates({ nodes: this.tree }, 0);
	            this.render();
	        }else{
	            console.log('Root node cannot be deleted');
	        }
	    }, this));
	};
	/**
	 * Delete child nodes
	 * Vacant child node refresh node
	 * @param node
	 * @param options
	 */
	Tree.prototype.deleteChildrenNode = function (identifiers, options) {
	    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
	        if ( node.nodes != null){
	            node.nodes = null;
	            this.setInitialStates({ nodes: this.tree }, 0);
	            this.render();
	        }
	    }, this));
	};

4. Call methods to add and delete subnodes

//Delete all child nodes under the current node
$("#itemtree").treeview("deleteChildrenNode", id);	
//Add child nodes
var addNodes = new Array();
addNodes[0] = id;
addNodes[1] = {node: {text: "New menu", href: "001005" }};
$("#itemtree").treeview("addNode", addNodes);
//Of course, it can also be written like this.
$("#itemtree").treeview("addNode", [id,{node: {text:" new menu ", href:" 001005 "}]);

5. Obtaining node id

In the code for adding and deleting child nodes mentioned above, using the id of the parent node, we can get the id with onNode Selected (selected node) and onNode Expanded (expanded node) of bootstrap-treeview. The code is as follows:

 $('#itemtree').treeview({
    onNodeExpanded : function(event,data){
        var id = data['nodeId']; //Gets the node Id of the node, which is automatically generated and the unique identity of the node
    }
    onNodeSelected : function(event,data){
        var id = data['nodeId']; //Get nodeId of the node
    }
});

Finally, link the resources of bootstrap-treev.js and bootstrap-treev.css.

Link: https://pan.baidu.com/s/1 ErwzDUVE0rpFXUtNCT7RNw
Extraction code: 68u1