初始化bootstrap treeview樹節點

最近在作啓明星圖庫時，使用了Jquery Bootstrap  Treeview插件。可是，遇到了一個初始化的問題。先看效果以下：

當用戶打開圖庫時，左邊分類第一個類別是「全部分類」，默認須要選中。

 

TreeView的數據源來自後臺JSON格式，以下：由於分類的數據庫格式是ID格式，且是整數自增行。全部，在生成JSON時，會強制在JSON頭部增長一個ID爲-1的類別，表示「全部分類」

[{"href":"#-1","link":"false","text":"全部類別","c":"1"},{"href":"#1","link":"false","text":"公司活動","c":"1"},{"href":"#2","link":"false","text":"部門活動","c":"1",
"nodes":[{"href":"#3","link":"false","text":"人事部圖庫","c":"1"},
{"href":"#4","link":"false","text":"財務部圖庫","c":"1"}]},{"href":"#5","link":"false","text":"其它活動","c":"1"}]

 

可是，直接把JSON數據源賦值給treeview，第一行並不會默認選中。

最後修改代碼以下：

        $(document).ready(function ()
        {


            var aj = $.ajax({
                url: 'treejson.aspx?initcatid='+<%=Request.QueryString["catid"]%>,
                cache: false,
                dataType: 'json',
                success: function (datasource) {
                    $('#tree').treeview({
                        levels: 2,
                        data: datasource,
                        enableLinks: false,
                         

                      

                        onNodeSelected: function (event, key) {                         
                           alert("node click");                          }
                          
                      
                         
                    });
                

                     var id = -1;
                       
                    var treeViewObject = $('#tree').data('treeview'),
                        allCollapsedNodes = treeViewObject.getCollapsed(),
                        allExpandedNodes = treeViewObject.getExpanded(),
                        allNodes = allCollapsedNodes.concat(allExpandedNodes);
                    for (var i = 0; i < allNodes.length; i++) {
                            
                        if (allNodes[i].href != ("#"+id))
                        {
                            continue;
                        }
                        var selectNode = allNodes[i]; 
                        $('#tree').treeview('revealNode', [selectNode, { silent: true }]);
                        treeViewObject.selectNode(selectNode);
                        break;
                    }





                }

                ,
                error: function () { 
                    alert("異常！");
                }
            });

 

在代碼裏，增長了初始化選中的ID，例如經過URL傳遞 catid=2，表示我打開這個網址時，類別ID爲2的 部門活動須要被選中 ，效果以下圖

請注意代碼裏的：  $('#tree').treeview('revealNode', [selectNode, { silent: true }]); 這句話讓樹的節點自動展開。例如若是你設置樹默認只展開level爲1，而你須要展開的節點在2級，

那麼'revealNode'將會把該節點自動展開。