bootstrap-table 常用總結-樹形結構（展開和折疊）

　　今天在工作的時候，遇到了一個需求，就是需要一鍵展開或者關閉樹形結構。關於樹形結構的不是很熟悉，然后去百度，結果也不是很准確。最后經過Google才找到。下面分享給大家

直接看代碼：

        var flag = true;//開啟還是關閉的標志位
        function change_tree(target){
            if(flag){
                //$table.treegrid('getRootNodes').treegrid('expand');
                //$table.treegrid('getParentNode').treegrid('expand');
                $table.treegrid('expandAll');
                flag = !flag;
            }else{
                //$table.treegrid('getRootNodes').treegrid('collapse');
                //$table.treegrid('getParentNode').treegrid('collapse');
                $table.treegrid('collapseAll');
                flag = !flag;               
            }
        }

上面的是折疊，下面的是展開。有一個標志位，每次執行不同的代碼。然后把找到的表格貼在下面，方便大家查閱（侵刪）

 常用的配置項，這個表格可以和我上一篇的一起看

參數	類型	默認值	描述
treeColumn	Numeric	0	樹中表格中的哪一列
initialState	String	expanded	初始化時樹的狀態 'expanded' - 所有節點都展開 'collapsed' - 所有節點都折疊
saveState	Boolean	false	如果是true樹的再次加載頁面的時候樹的狀態將保存
saveStateMethod	String	cookie	'cookie' - 保存cookie的狀態 'hash' - 保存hash的狀態
saveStateName	String	tree-grid-state	通過cookie或hash的名字來保存狀態
expanderTemplate	String	<span class="treegrid-expander"></span>	點擊HTML元素時將折疊或展開分支
expanderExpandedClass	String	treegrid-expander-expanded	當它展開的時候可以使用擴展元素
expanderCollapsedClass	String	treegrid-expander-collapsed	當它折疊的時候可以使用擴展元素
indentTemplate	String	<span class="treegrid-indent"></span>	HTML元素將根據深度嵌套節點做填充

然后下面是重頭戲了,就是我們常用到的一些方法，都是有分封裝的。大家可以自行取用

 

方法名稱	描述	示例
getRootNodes	返回樹的根節點	// Expand all root nodes $('.tree').treegrid('getRootNodes').treegrid('expand');
getNodeId	返回節點的id	if($('#node-2').treegrid('getNodeId')===2){   // Do something with node 2 };
getParentNodeId	返回父節點的id或如果節點是根就返回null	if($('#node-2').treegrid('getParentNodeId')===2){   // Do something if parent node Id is 2 };
getAllNodes	返回樹的所有節點	// Find all nodes   $('#tree-1').treegrid('getAllNodes').each(function() {     if ($(this).treegrid("isLast")) {       //Do something with all last nodes     }   });
getParentNode	返回父節點或如果節點是根就返回null	// Expand parent node $('#node-2').treegrid('getParentNode').treegrid('collapse');
getChildNodes	返回節點的子節點或如果節點是葉子節點則返回null	// Expand child nodes $('#node-2').treegrid('getChildNodes').treegrid('expand');
getDepth	返回樹嵌套分支的深度	// Expand all nodes 2nd nesting $('.tree').find('tr').each(function(){   if ($(this).treegrid('getDepth')<2){ $(this).treegrid('expand');   } });
isNode	如果元素是節點則返回true	$('#tree-1').find('tr').each(function() {     if ($(this).treegrid("isNode")) {       //Do something     }   });
isLeaf	該節點有葉子嗎	// hide all files $('.tree').find('tr').each(function(){   if ($(this).treegrid('isLeaf')){ $(this).hide();   } });
isLast	如果節點在最后，則返回true	// hide all last elements $('.tree').find('tr').each(function(){   if ($(this).treegrid('isLast')){ $(this).hide();   } });
isFirst	如果節點在第一個，則返回true	// hide all last elements $('.tree').find('tr').each(function(){   if ($(this).treegrid('isFirst')){ $(this).hide();   } });
isExpanded	節點是展開的嗎	if($('#node-2').treegrid('isExpanded')){   // Do something if node expanded };
isCollapsed	節點是折疊的嗎	if($('#node-2').treegrid('isCollapsed')){   // Do something if node collapsed };
isOneOfParentsCollapsed	至少一個節點是折疊的嗎	if($('#node-2').treegrid('isOneOfParentCollapsed')){   // Do something if one of parent collapsed };
expand	展開節點	$('#node-2').treegrid('expand');
collapse	折疊節點	$('#node-2').treegrid('collapse');
expandRecursive	節點遞歸展開	$('#node-2').treegrid('expandRecursive');
collapseRecursive	節點遞歸折疊	$('#node-2').treegrid('collapseRecursive');
expandAll	展開所有節點	$('#tree').treegrid('expandAll');
collapseAll	折疊所有節點	$('#tree').treegrid('collapseAll');
toggle	當處於展開狀態的時候將節點折疊 當處於折疊狀態的時候將節點展開	$('#node-2').treegrid('toggle');
render	重繪節點及其子節點	$('#node-2').treegrid('render');