前端動態菜單-bootstrap-treeview

時間 2019-12-11

標籤前端動態菜單 bootstrap treeview 欄目 Bootstarp 简体版

原文原文鏈接

1、bootstrap-treeview

官網javascript

Democss

bootstrap-treeview是一款效果很是酷的基於bootstrap的jQuery多級列表樹插件。該jQuery插件基於Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。html

插件依賴java

Bootstrap v3.0.3
jQuery v2.0.3

2、使用方法

首先要在頁面中引入依賴文件和 bootstrap-treeview.js文件。node

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

可使用任何HTML DOM元素來做爲該列表樹的容器：jquery

 <div id="treeview">

該列表樹插件最基本的調用方法以下：git

var defaultData = [
  {
    text:"Parent 1", // text 定義菜單標題
    nodes: [  // nodes 定義子菜單
      {
        text:"Child 1",  // 子菜單標題
        nodes: [  // 子菜單的子菜單
          {
            text:"Grandchild 1"
          },
          {
            text:"Grandchild 2"
          }
        ]
      },
      {
        text:"Child 2"
      }
    ]
  },
  {
    text:"Parent 2"
  },
  {
    text:"Parent 3"
  },
  {
    text:"Parent 4"
  },
  {
    text:"Parent 5"
  }
];                 


$('#treeview').treeview({
    data: defaultData,
});

最簡單的樹結構能夠只有一個節點，使用一個帶text屬性的js對象來實現便可：github

{
    text:"Node 1"
}

節點屬性介紹npm

下面的參數可用於樹節點的屬性定義，如節點的文本、顏色和標籤等。bootstrap

參數名稱	參數類型	參數描述
text	String(必選項)	列表樹節點上的文本，一般是節點右邊的小圖標。
icon	String(可選項)	列表樹節點上的圖標，一般是節點左邊的圖標。
selectedIcon	String(可選項)	當某個節點被選擇後顯示的圖標，一般是節點左邊的圖標。
href	String(可選項)	結合全局enableLinks選項爲列表樹節點指定URL。
selectable	Boolean. Default: true	指定列表樹的節點是否可選擇。設置爲`false`將使節點展開，而且不能被選擇。
state	Object(可選項)	一個節點的初始狀態。
state.checked	Boolean，默認值`false`	指示一個節點是否處於checked狀態，用一個checkbox圖標表示。
state.disabled	Boolean，默認值`false`	指示一個節點是否處於disabled狀態。（不是selectable，expandable或checkable）
state.expanded	Boolean，默認值`false`	指示一個節點是否處於展開狀態。
state.selected	Boolean，默認值`false`	指示一個節點是否能夠被選擇。
color	String. Optional	節點的前景色，覆蓋全局的前景色選項。
backColor	String. Optional	節點的背景色，覆蓋全局的背景色選項。
tags	Array of Strings. Optional	經過結合全局showTags選項來在列表樹節點的右邊添加額外的信息。

全局參數

參數名稱	參數類型	默認值	描述
data	Array of Objects	無	列表樹上顯示的數據。
backColor	String	全部合法的顏色值，Default: inherits from Bootstrap.css。	設置全部列表樹節點的背景顏色。
borderColor	String	全部合法的顏色值，Default: inherits from Bootstrap.css。	設置列表樹容器的邊框顏色，若是不想要邊框能夠設置`showBorder`屬性爲false。
checkedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-check"	設置處於checked狀態的複選框圖標。
collapseIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-minus"	設置列表樹可收縮節點的圖標。
color	String	全部合法的顏色值，Default: inherits from Bootstrap.css。	設置列表樹全部節點的前景色。
emptyIcon	String：class名稱	Bootstrap Glyphicons定義的"glyphicon"。	設置列表樹中沒有子節點的節點的圖標。
enableLinks	Boolean	false	是否使用當前節點的文本做爲超連接。超連接的`href`值必須在每一個節點的data結構中給出。
expandIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-plus"	設置列表樹可展開節點的圖標。
highlightSearchResults	Boolean	true	是否高亮搜索結果。
highlightSelected	Boolean	true	當選擇節點時是否高亮顯示。
onhoverColor	String	全部合法的顏色值， Default: '#F5F5F5'。	設置列表樹的節點在用戶鼠標滑過期的背景顏色。
levels	Integer	Default: 2	設置繼承樹默認展開的級別。
multiSelect	Boolean	false	是否能夠同時選擇多個節點。
nodeIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設置全部列表樹節點上的默認圖標。
selectedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設置全部被選擇的節點上的默認圖標。
searchResultBackColor	String	全部合法的顏色值， Default: undefined, inherits。	設置搜索結果節點的背景顏色。
searchResultColor	String	全部合法的顏色值， Default: '#D9534F'	設置搜索結果節點的前景顏色。
selectedBackColor	String	全部合法的顏色值， Default: '#428bca'	設置被選擇節點的背景顏色。
selectedColor	String	全部合法的顏色值， Default: '#FFFFFF'。	設置列表樹選擇節點的背景顏色。
showBorder	Boolean	true	是否在節點上顯示邊框。
showCheckbox	Boolean	false	是否在節點上顯示checkboxes。
showIcon	Boolean	true	是否顯示節點圖標。
showTags	Boolean	false	是否在每一個節點右邊顯示tags標籤。tag值必須在每一個列表樹的data結構中給出。
uncheckedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-unchecked"	設置圖標爲未選擇狀態的checkbox圖標。

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

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

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

    showBorder: true, //是否在節點周圍顯示邊框
    showCheckbox: false, //是否在節點上顯示覆選框
    showIcon: true, //是否顯示節點圖標
    showTags: false, //是否顯示每一個節點右側的標記。前提是這個標記必須在每一個節點基礎上提供數據結構中的值。
    uncheckedIcon: "glyphicon glyphicon-unchecked", //未選中的複選框時顯示的圖標，能夠與showCheckbox一塊兒使用
};

例如：

$('#treeview').treeview({
    data: defaultData,
    color: "#4F4F4F",
    expandIcon: 'glyphicon glyphicon-chevron-right',
    collapseIcon: 'glyphicon glyphicon-chevron-down',
    nodeIcon: 'glyphicon glyphicon-bookmark',
    enableLinks: true,
    levels: 1,
    showIcon:false,
    selectedBackColor: "",
    selectedColor: "#333"
});

3、使用方法

一、你能夠經過兩種方式來調用方法

一、插件包裝器：插件的包裝器能夠做爲訪問底層方法的代理。

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

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

二、直接使用treeview：你能夠經過下面兩種方法中的一種來獲取treeview對象實例。

// 該方法返回一個treeview的對象實例
$('#treeview').treeview(true)
  .methodName(args);
// 對象實例也保存在DOM元素的data中，
// 可使用'treeview'的id來訪問它。
$('#treeview').data('treeview')
  .methodName(args);

二、treeview方法列表

checkAll(options)：選擇全部的節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'checkAll' 
          , { silent:  
          true  
          });

觸發nodeChecked事件，傳入silent來阻止其它事件。

checkNode(node | nodeId, options)：選擇指定的節點，接收節點或節點ID。

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

觸發nodeChecked事件，傳入silent來阻止其它事件。

clearSearch()：清空之前的搜索結果。例如清除它們的高亮狀態。

$( '#treeview' ).treeview( 'clearSearch' );

觸發searchCleared事件。

collapseAll(options)：摺疊全部的節點，摺疊整個樹。

 
          $( 
          '#treeview' 
          ).treeview( 
          'collapseAll' 
          , { silent:  
          true  
          });

觸發nodeCollapsed事件，傳入silent來阻止其它事件。

collapseNode(node | nodeId, options)：摺疊指定節點和它的子節點。若是不想摺疊子節點，能夠設置{ ignoreChildren: true }。

 
          $( 
          '#treeview' 
          ).treeview( 
          'collapseNode' 
          , [ nodeId, { silent:  
          true 
          , ignoreChildren:  
          false  
          } ]);

觸發nodeCollapsed事件，傳入silent來阻止其它事件。

disableAll(options)：禁用全部的節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'disableAll' 
          , { silent:  
          true  
          });

觸發nodeDisabled事件，傳入silent來阻止其它事件。

disableNode(node | nodeId, options)：禁用指定的節點，接收節點或節點ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'disableNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeDisabled事件，傳入silent來阻止其它事件。

enableAll(options)：啓用全部的節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'enableAll' 
          , { silent:  
          true  
          });

觸發nodeEnabled事件，傳入silent來阻止其它事件。

enableNode(node | nodeId, options)：啓用指定的節點，接收節點或節點ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'enableNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeEnabled事件，傳入silent來阻止其它事件。

expandAll(options)：展開全部的樹節點。也能夠展開任何給定級別的樹節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'expandAll' 
          , { levels: 2, silent:  
          true  
          });

觸發nodeExpanded事件，傳入silent來阻止其它事件。

expandNode(node | nodeId, options)：展開指定的樹節點，接收節點或節點ID。也能夠展開任何給定級別的樹節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'expandNode' 
          , [ nodeId, { levels: 2, silent:  
          true  
          } ]);

觸發nodeExpanded事件，傳入silent來阻止其它事件。

getCollapsed()：返回摺疊節點的數組。例如state.expanded = false。

$( '#treeview' ).treeview( 'getCollapsed' , nodeId);
getDisabled()：返回被禁用節點的數組。

$( '#treeview' ).treeview( 'getDisabled' , nodeId);
getEnabled()：返回可用節點的數組。

$( '#treeview' ).treeview( 'getEnabled' , nodeId);
getExpanded()：返回全部展開節點的數組。

$( '#treeview' ).treeview( 'getExpanded' , nodeId);
getNode(nodeId)：返回給定節點ID的單一節點對象。

$( '#treeview' ).treeview( 'getNode' , nodeId);
getParent(node | nodeId)：返回給定節點的父節點，若是沒有則返回undefined。

$( '#treeview' ).treeview( 'getParent' , node);
getSelected()：返回全部被選擇節點的數組，例如：state.selected = true。

$( '#treeview' ).treeview( 'getSelected' , nodeId);
getSiblings(node | nodeId)：返回給定節點的兄弟節點的數組，若是沒有則返回undefined。

$( '#treeview' ).treeview( 'getSiblings' , node);
getUnselected()：返回沒有被選擇節點的數組。例如：state.selected = false。

$( '#treeview' ).treeview( 'getUnselected' , nodeId);
remove()：移除列表樹容器。移除附加的事件、附加對象和額外的html元素。

$( '#treeview' ).treeview( 'remove' );

revealNode(node | nodeId, options)：顯示一個樹節點，展開從這個節點開始到根節點的全部節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'revealNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeExpanded事件，傳入silent來阻止其它事件。

search(pattern, options)：搜索匹配是很是的指定樹節點，並高亮它們。返回配平節點的數組。

 
          $( 
          '#treeview' 
          ).treeview( 
          'search' 
          , [  
          'Parent' 
          , { 
         
          ignoreCase: 
          true 
          ,     
          // case insensitive 
         
          exactMatch: 
          false 
          ,    
          // like or equals 
         
          revealResults: 
          true 
          ,  
          // reveal matching nodes 
         
          }]); 
         
          $('##treeview').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]); 
         
          value:值， 
         
          attr:須要查詢的屬性

觸發searchComplete事件。

selectNode(node | nodeId, options)：選擇一個給定的樹節點，接收節點或節點ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'selectNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeSelected事件，傳入silent來阻止其它事件。

toggleNodeChecked(node | nodeId, options)：切換節點的Check狀態。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeChecked' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeChecked事件或nodeUnchecked事件，傳入silent來阻止其它事件。

toggleNodeDisabled(node | nodeId, options)：切換一個節點的可用和不可用狀態。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeDisabled' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeDisabled事件或nodeEnabled事件，傳入silent來阻止其它事件。

toggleNodeExpanded(node | nodeId, options)：切換一個節點的展開和摺疊狀態。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeExpanded' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeExpanded事件或nodeCollapsed事件，傳入silent來阻止其它事件。

toggleNodeSelected(node | nodeId, options)：切換一個節點的選擇狀態。

 
          $( 
          '#treeview' 
          ).treeview( 
          'toggleNodeSelected' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeSelected事件或nodeUnselected事件，傳入silent來阻止其它事件。

uncheckAll(options)：Uncheck全部的節點。

 
          $( 
          '#treeview' 
          ).treeview( 
          'uncheckAll' 
          , { silent:  
          true  
          });

觸發nodeUnchecked事件，傳入silent來阻止其它事件。

uncheckNode(node | nodeId, options)：Uncheck一個給定的節點，接收節點或節點ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'uncheckNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeUnchecked事件，傳入silent來阻止其它事件。

unselectNode(node | nodeId, options)：不選擇指定的節點，接收節點或節點ID。

 
          $( 
          '#treeview' 
          ).treeview( 
          'unselectNode' 
          , [ nodeId, { silent:  
          true  
          } ]);

觸發nodeUnselected事件，傳入silent來阻止其它事件。

4、事件

你能夠在參數中使用回調函數來綁定任何事件，或者使用標準的jQuery.on()方法來綁定事件。

在參數中調用的示例

$('#treeview').treeview({
  // The naming convention for callback's is to prepend with `on`
  // and capitalize the first letter of the event name
  // e.g. nodeSelected -> onNodeSelected
  onNodeSelected:function(event, data) {
    // 事件代碼...
});

使用jQuery.on()方法：

$('#treeview').on('nodeSelected',function(event, data) {
  // 事件代碼...
});

可用事件列表

nodeChecked (event, node)：一個節點被checked。
nodeCollapsed (event, node)：一個節點被摺疊。
nodeDisabled (event, node)：一個節點被禁用。
nodeEnabled (event, node)：一個節點被啓用。
nodeExpanded (event, node)：一個節點被展開。
nodeSelected (event, node)：一個節點被選擇。
nodeUnchecked (event, node)：一個節點被unchecked。
nodeUnselected (event, node)：取消選擇一個節點。
searchComplete (event, results)：搜索完成以後觸發。
searchCleared (event, results)：搜索結果被清除以後觸發。

5、Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>treeviewDemo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<div id="treeview"></div>


<script type="text/javascript">

    // $(function(){...})這個是在頁面DOM文檔加載完成後加載執行的，等效於$(document).ready(function(){...});
    // 優於window.onload，後者必須等到頁面內包括圖片的全部元素加載完畢後才能執行

    $(function () {
        var defaultData = [
            {
                text: 'Parent 1',
                tags: ['2'],
                nodes: [
                    {
                        text: 'Child 1',
                        tags: ['3'],
                        nodes: [
                            {
                                text: 'Grandchild 1',
                                tags: ['6']
                            },
                            {
                                text: 'Grandchild 2',
                                tags: ['3']
                            }
                        ]
                    },
                    {
                        text: 'Child 2',
                        tags: ['3']
                    }
                ]
            },
            {
                text: 'Parent 2',
                tags: ['7']
            },
            {
                text: 'Parent 3',
                icon: 'glyphicon glyphicon-earphone',
                href: '#demo',
                tags: ['11']
            },
            {
                text: 'Parent 4',
                icon: 'glyphicon glyphicon-cloud-download',
                href: '/demo.html',
                tags: ['19'],
                selected: true
            },
            {
                text: 'Parent 5',
                icon: 'glyphicon glyphicon-certificate',
                color: 'pink',
                backColor: 'red',
                href: 'http://www.tesco.com',
                tags: ['available', '0']
            }
        ];

        $('#treeview').treeview({
            data: defaultData,
            color: "#4F4F4F",
            expandIcon: 'glyphicon glyphicon-chevron-right',
            collapseIcon: 'glyphicon glyphicon-chevron-down',
            nodeIcon: 'glyphicon glyphicon-bookmark',
            enableLinks: true,
            levels: 1,
            showIcon: false,
            selectedBackColor: "",
            selectedColor: "#333"
        });


        $('#treeview').on('nodeSelected', function (event, data) {
            console.log(data);
        })
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。