這篇文章主要介紹樹形插件bootstrap-treeview怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯公司專業(yè)IDC數據服務器托管提供商，專業(yè)提供成都服務器托管，服務器租用，大邑服務器托管，大邑服務器托管，成都多線服務器托管等服務器托管服務。

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件，該jQuery插件基于Twitter Bootstrap。寫這篇文章的目的在于記錄下使用方法，以期后用。

一、插件官網：https://jquery-plugins.net/bootstrap-tree-view
二、demo示例：http://jonmiles.github.io/bootstrap-treeview/

三、依賴：

Bootstrap v3.3.4 (>= 3.0.0)
jQuery v2.1.3 (>= 1.9.0)

四、使用方法：

1.html文件引入依賴:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-treeview.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-treeview.min.js" ></script>

2.設置一個DOM元素以接收樹形數據：

<div id="tree"></div>

3.使用格式：

$('#tree').treeview(options);  //其中options選項允許用戶定制treeview的默認外觀和行為。它們在初始化時作為一個對象被傳遞給插件。

4.使用示例(js動態(tài)獲取后臺數據，并渲染樹形結構)：

$(function() {
    $('#tree').treeview({
        data: getTree()//節(jié)點數據
    });
})

function getTree() {
    //節(jié)點上的數據遵循如下的格式：
    var tree = [{
        text: "Node 1", //節(jié)點顯示的文本值  string
        icon: "glyphicon glyphicon-play-circle", //節(jié)點上顯示的圖標，支持bootstrap的圖標  string
        selectedIcon: "glyphicon glyphicon-ok", //節(jié)點被選中時顯示的圖標       string
        color: "#ff0000", //節(jié)點的前景色      string
        backColor: "#1606ec", //節(jié)點的背景色      string
        href: "#http://www.baidu.com", //節(jié)點上的超鏈接
        selectable: true, //標記節(jié)點是否可以選擇。false表示節(jié)點應該作為擴展標題，不會觸發(fā)選擇事件。  string
        state: { //描述節(jié)點的初始狀態(tài)    Object
            checked: true, //是否選中節(jié)點
            /*disabled: true,*/ //是否禁用節(jié)點
            expanded: true, //是否展開節(jié)點
            selected: true //是否選中節(jié)點
        },
        tags: ['標簽信息1', '標簽信息2'], //向節(jié)點的右側添加附加信息（類似與boostrap的徽章）    Array of Strings
        nodes: [{
            text: "Child 1",
            nodes: [{
                text: "Grandchild 1"
            }, {
                text: "Grandchild 2"
            }]
        }, {
            text: "Child 2"
        }]
    }, {
        text: "Parent 2",
        nodes: [{
            text: "Child 2",
            nodes: [{
                text: "Grandchild 3"
            }, {
                text: "Grandchild 4"
            }]
        }, {
            text: "Child 2"
        }]
    }, {
        text: "Parent 3"
    }, {
        text: "Parent 4"
    }, {
        text: "Parent 5"
    }];

    return tree;
}

五、其他說明：

1、參數詳解（可用的參數）：

var options = {
    data: data, //data屬性是必須的，是一個對象數組    Array of Objects.
    color: "", //所有節(jié)點使用的默認前景色，這個顏色會被節(jié)點數據上的backColor屬性覆蓋.        String
    backColor: "#000000", //所有節(jié)點使用的默認背景色，這個顏色會被節(jié)點數據上的backColor屬性覆蓋.     String
    borderColor: "#000000", //邊框顏色。如果不想要可見的邊框，則可以設置showBorder為false。        String
    nodeIcon: "glyphicon glyphicon-stop", //所有節(jié)點的默認圖標
    checkedIcon: "glyphicon glyphicon-check", //節(jié)點被選中時顯示的圖標         String
    collapseIcon: "glyphicon glyphicon-minus", //節(jié)點被折疊時顯示的圖標        String
    expandIcon: "glyphicon glyphicon-plus", //節(jié)點展開時顯示的圖標        String
    emptyIcon: "glyphicon", //當節(jié)點沒有子節(jié)點的時候顯示的圖標              String
    enableLinks: false, //是否將節(jié)點文本呈現為超鏈接。前提是在每個節(jié)點基礎上，必須在數據結構中提供href值。        Boolean
    highlightSearchResults: true, //是否高亮顯示被選中的節(jié)點        Boolean
    levels: 2, //設置整棵樹的層級數  Integer
    multiSelect: false, //是否可以同時選擇多個節(jié)點      Boolean
    onhoverColor: "#F5F5F5", //光標停在節(jié)點上激活的默認背景色      String
    selectedIcon: "glyphicon glyphicon-stop", //節(jié)點被選中時顯示的圖標     String

    searchResultBackColor: "", //當節(jié)點被選中時的背景色
    searchResultColor: "", //當節(jié)點被選中時的前景色

    selectedBackColor: "", //當節(jié)點被選中時的背景色
    selectedColor: "#FFFFFF", //當節(jié)點被選中時的前景色

    showBorder: true, //是否在節(jié)點周圍顯示邊框
    showCheckbox: false, //是否在節(jié)點上顯示復選框
    showIcon: true, //是否顯示節(jié)點圖標
    showTags: false, //是否顯示每個節(jié)點右側的標記。前提是這個標記必須在每個節(jié)點基礎上提供數據結構中的值。
    uncheckedIcon: "glyphicon glyphicon-unchecked", //未選中的復選框時顯示的圖標，可以與showCheckbox一起使用
}

2、方法詳解（可用的方法列表）：

1.  checkAll(options);//選中所有樹節(jié)點
2.  checkNode(node | nodeId, options);  //選中一個給定nodeId的樹節(jié)點
3.  clearSearch();//清除查詢結果
4.  collapseAll(options);//折疊所有樹節(jié)點
5.  collapseNode(node | nodeId, options);//折疊一個給定nodeId的樹節(jié)點和它的子節(jié)點
6.  disableAll(options);//禁用所有樹節(jié)點
7.  disableNode(node | nodeId, options);//禁用一個給定nodeId的樹節(jié)點
8.  enableAll(options);//激活所有樹節(jié)點
9.  enableNode(node | nodeId, options);//激活給定nodeId的樹節(jié)點
10. expandAll(options);//展開所有節(jié)點
11. expandNode(node | nodeId, options);//展開給定nodeId的樹節(jié)點
12. getCollapsed();//返回被折疊的樹節(jié)點數組
13. getDisabled();//返回被禁用的樹節(jié)點數組
14. getEnabled();//返回被激活的樹節(jié)點數組  
15. getExpanded();//返回被展開的樹節(jié)點數組
16. getNode(nodeId);//返回與給定節(jié)點id相匹配的單個節(jié)點對象。
17. getParent(node | nodeId);//返回給定節(jié)點id的父節(jié)點
18. getSelected();//返回被選定節(jié)點的數組。
19. getSiblings(node | nodeId);//返回給定節(jié)點的兄弟節(jié)點數組
20. getUnselected();//返回未選擇節(jié)點的數組
21. remove();//刪除the tree view component.刪除綁定的事件，內部附加的對象，并添加HTML元素。
22. revealNode(node | nodeId, options);//顯示給定的樹節(jié)點，將樹從節(jié)點擴展到根。
23. search(pattern, options);//在樹視圖中搜索匹配給定字符串的節(jié)點，并在樹中突出顯示它們。返回匹配節(jié)點的數組。
24. selectNode(node | nodeId, options);//選擇一個給定的樹節(jié)點
25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked.
26. toggleNodeDisabled(node | nodeId, options);//切換節(jié)點的禁用狀態(tài);
27. toggleNodeExpanded(node | nodeId, options);//切換節(jié)點的展開與折疊狀態(tài)
28. toggleNodeSelected(node | nodeId, options);//切換節(jié)點的選擇狀態(tài)
29. uncheckAll(options);//不選所有節(jié)點
30. uncheckNode(node | nodeId, options);//不選給定nodeId的節(jié)點
31. unselectNode(node | nodeId, options);//不選給定nodeId的節(jié)點

說明：可以通過兩種方式來調用方法：

1、插件包裝器：插件的包裝器可以作為訪問底層方法的代理。

$('#tree').treeview('methodName', args);  

其中，多個參數必須使用數組對象來傳入。

2、直接使用treeview：你可以通過下面兩種方法中的一種來獲取treeview對象實例：

//該方法返回一個treeview的對象實例
$('#tree').treeview(true).methodName(args);

//對象實例也保存在DOM元素的data中， 可以使用'treeview'的id來訪問它。
$('#tree').data('treeview').methodName(args);

3、事件詳解（可用的事件列表）：

1.  nodeChecked (event, node) - 一個節(jié)點被checked.
2.  nodeUnchecked (event, node) - 一個節(jié)點被unchecked.
3.  nodeCollapsed (event, node) - 一個節(jié)點被折疊.
4.  nodeDisabled (event, node) - 一個節(jié)點被禁用.
5.  nodeEnabled (event, node) - 一個節(jié)點被啟用.
6.  nodeExpanded (event, node) - 一個節(jié)點被展開.
7.  nodeSelected (event, node) - 一個節(jié)點被選擇.
8.  nodeUnselected (event, node) - 取消選擇一個節(jié)點.
9.  searchComplete (event, results) - 搜索完成之后觸發(fā).
10. searchCleared (event, results) - 搜索結果被清除之后觸發(fā).

說明：事件的調用有兩種方式：

第 1 種：在參數中使用回調函數來綁定任何事件：
$('#tree').treeview({
    //命名約定：以on為前綴，并將事件名的第一個字母轉為大寫，例如： nodeSelected -> onNodeSelected
    onNodeSelected:function(event, data) {
        // 事件代碼...
    }
});      

第 2 種：使用標準的jQuery .on()方法來綁定事件:
$('#tree').on('nodeSelected',function(event, data) {
    // 事件代碼...
});

以上是“樹形插件bootstrap-treeview怎么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！

當前文章：樹形插件?bootstrap-treeview怎么用
分享URL：http://www.rwnh.cn/article34/gpoose.html

成都網站建設公司_創(chuàng)新互聯，為您提供自適應網站、全網營銷推廣、標簽優(yōu)化、外貿建站、手機網站建設、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯