BootStrap TreeView展开节点时，动态的加载子节点

最近有个功能需要一个树形菜单，但是数据量比较大，一次全部加载需要很久。所以自己做了一个功能，当用户展开节点的时候去动态的加载子节点。

<div id="NationalPatent"></div>	//指定treeview的容器


<script>
  	//加载根节点
    function getTree() {
        var tree = null;
        $.ajax({
            type: "post",
            url: "/GuideSeach/InitIPCTreeView",
            async: false,
            dataType: 'json',
            data: {
            },
            beforeSend: function () {
                layer.load();
            },
            complete: function () {
                layer.closeAll('loading'); //关闭loading
            },
            success: function (data) {
                tree = data;
            }
        })
        return tree;
    }
    

    $(function () {
		
	    //初始化treeview
        $('#NationalPatent').treeview({
            data: getTree(),
            showTags: true,
            enableLinks: true,
            levels: 2,
            showTags: true
        });
	    
	    //treeview节点展开事件
        $('#NationalPatent').on('nodeExpanded', function (event, data) {
            console.log(data);			//data 当前行的数据
            var id = data['nodeId'];		//获取节点的nodeid （nodeid是treeview自动生成的，每个节点不同）
            $.ajax({					//异步加载当前节点的子节点数据
                type: "post",
                url: "/GuideSeach/InitIPCTreeViewByFatherID",
                async: false,
                dataType: 'json',
                data: {
                    PIPC: data['text']
                },
                beforeSend: function () {
                    layer.load();
                },
                complete: function () {
                    layer.closeAll('loading'); //关闭loading
                },
                success: function (result) {
                	  //再添加节点前，需要清空展开节点下的子节点，否则会累计很多节点。
                    $("#NationalPatent").treeview("deleteChildrenNode", id);	//删除当前节点下的所有子节点
                    //根据返回的数据源，添加子节点
                    for (var i = 0; i < result.length; i++) {
                    //result[i]的格式如下图
                        $("#NationalPatent").treeview("addNode", [id, { node: result[i], silent: true 				    }
                        ]); 
                    }
                }
            })
        });
    });
</script>

添加的数据格式，nodes属性一定要设置，可设置为空。如果不添加的话，treeview默认没有子节点，节点就不能打开，如果不能打开就无法触发事件去加载下一级。

添加节点和删除节点需要在源码中添加。
原文地址：https://www.mxpeng.com/p/171