bootstrap treeview数据回显（预设选中）

维护一个老项目，遇到treeview的一个bug修复，需要将列表树中选中的节点，在查看时进行回显。

1、什么是bootstrap treeview？

一款树形列表插件，相关使用方法参见文档：

https://www.jqueryscript.net/other/Dynamic-Tree-View-Plugin-jQuery-Bootstrap.html

2、TreeView插件选中节点的方法:

$('#default-tree').treeview('checkNode', [ nodeId, { silent:true } ]);

其中nodeId 为列表树的ID。

3、加载的数据报文样版

{
		"text": "西装_53",
		"id": 53,
		"preId": 51,
		"nextId": 57,
		"icon": null,
		"code": "wear-suits",
		"parent": 5,
		"sort": 73,
		"preSort": 51,
		"nextSort": 74,
		"maxSort": 94,
		"selected": false,
		"selectable": true,
		"state": null,
		"nodes": [{
			"text": "西服套装_109",
			"id": 109,
			"preId": null,
			"nextId": 111,
			"icon": null,
			"code": "wear-suits-suits",
			"parent": 53,
			"sort": 110,
			"preSort": null,
			"nextSort": 117,
			"maxSort": 117,
			"selected": false,
			"selectable": true,
			"state": null,
			"nodes": null
		},
		{
			"text": "西装背心_111",
			"id": 111,
			"preId": 109,
			"nextId": null,
			"icon": null,
			"code": "wear-suits-suitsvests",
			"parent": 53,
			"sort": 117,
			"preSort": 110,
			"nextSort": null,
			"maxSort": 117,
			"selected": false,
			"selectable": true,
			"state": null,
			"nodes": null
		}]
	}

这份数据是维护在服务端数据库。

3、数据回显遇到的坑

3.1、方法汇总的nodeId 与数据报文中的id不是同一个概念

方法中的nodeId：TreeView加载数据报文动态生成的，根据加载顺序递增。

数据报文中的id: 服务端定义，TreeView插件不会将其作为nodeId

3.2、 获取树节点

    //获取全量节点（包括收拢未展示节点）
	function getAllTreeNode() {
        var treeViewObject = $('#tree').data('treeview'),
            allCollapsedNodes = treeViewObject.getCollapsed(),
            allExpandedNodes = treeViewObject.getExpanded(),
            allNodes = allCollapsedNodes.concat(allExpandedNodes);
        return allNodes;
    }

4、根据服务端返回的选中数据，依次遍历调用checkNode进行数据回显

备注：此种方式，当树的node足够庞大的时候，可能会出现页面加载缓慢问题。