初始化bootstrap treeview树节点

最近在作启明星图库时,使用了Jquery Bootstrap  Treeview插件。可是,遇到了一个初始化的问题。先看效果以下:javascript

当用户打开图库时,左边分类第一个类别是“全部分类”,默认须要选中。java

 

TreeView的数据源来自后台JSON格式,以下:由于分类的数据库格式是ID格式,且是整数自增行。全部,在生成JSON时,会强制在JSON头部增长一个ID为-1的类别,表示“全部分类”node

[{"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,第一行并不会默认选中。ajax

最后修改代码以下:数据库

        $(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的 部门活动须要被选中 ,效果以下图json

请注意代码里的:  $('#tree').treeview('revealNode', [selectNode, { silent: true }]); 这句话让树的节点自动展开。例如若是你设置树默认只展开level为1,而你须要展开的节点在2级,url

那么'revealNode'将会把该节点自动展开。spa

相关文章
相关标签/搜索