BinaryDevelop
  1. ホーム
  2. js

bootstrap-treeview ツリーパラメータ詳細

2022-02-09 08:42:56
簡単なチュートリアル

bootstrap-treeview は、ブートストラップの jQuery 多階層リストツリープラグイン。このjQueryプラグインはTwitter Bootstrapをベースにしており、ビューツリーやリストツリーなど、継承された数多くのツリー構造をシンプルかつエレガントに表示します。

 プラグインの依存性

  • Bootstrap v3.0.3
  • jQuery v2.0.3

上記2つの外部依存は正常に動作することが確認されていますが、他のバージョンのBootstrapについては別途テストが必要です。このプラグインは、Bootstrap 2 をサポートしていません。

 使用方法

まず、依存ファイルおよび bootstrap-treeview.js ファイルをページに導入してください。

<テーブル 
<! -- Required Stylesheets -->

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">



src="https://code.jquery.com/jquery-3.2.1.min.js">


src="js/bootstrap-treeview.js">



id="tree1">
 HTMLの構造

このリストツリーのコンテナとして、任意の HTML DOM 要素を使用することができます。

<テーブル
$('#tree1').treeview({ data:defaultData }) 
var defaultData = [
     {
         text: 'Parent 1',
         href: '#parent1',
         tags: ['4'],
         nodes: [
             {
                 text: 'Child 1',
                 href: '#child1',
                 tags: ['2'],
                 nodes: [
                     {
                         text: 'Grandchild 1',
                         href: '#grandchild1',
                         tags: ['0']
                     },
                     {
                         text: 'Grandchild 2',
                         href= '#grandchild2',
                         tags: ['0']
                     }
                 ]
             },
             {
                 text: 'Child 2',
                 href: '#child2',
                 tags: ['0']
             }
         ]
     },
     {
         text: 'Parent 2',
         href: '#parent2',
         tags: ['0']
     },
     {
         text: 'Parent 3',
         href: '#parent3',
         tags: ['0']
     },
     {
         text: 'Parent 4',
         href: '#parent4',
         tags: ['0']
     },
     {
         text: 'Parent 5',
         href: '#parent5' ,
         tags: ['0']
     }
 ];



text
 プラグインを呼び出す

このリストツリープラグインの最も基本的な起動方法は、以下の通りです。

<テーブル
{ text: "Node 1" }                  
{
text:
"Node 1"
,
icon:
"glyphicon glyphicon-stop"
,
selectedIcon:
"glyphicon glyphicon-stop"
,
color:
"#000000"
,
backColor:
"#FFFFFF"
,
href:
"#node-1"
,
selectable:
true
,
state: {
checked:
true
,
disabled:
true
,
expanded:
true
,
selected:
true
},
tags: [
'available'
],
nodes: [
{},
...
]
}                


false

 データ構造

ツリーの継承構造を作成するために、このリストツリープラグインにネストした構造化jsオブジェクトを用意する必要があります。例えば

<テーブル 
false

最も単純なツリー構造は、1つのノードを持つだけで、そのノードに false オブジェクトに以下の属性を与えます。

<テーブル 
false

さらにカスタマイズが必要な場合は、以下を参考にしてください。

<テーブル 
false

 ノードのプロパティ

以下のパラメータを使用して、ノードのテキスト、色、ラベルなど、ツリーノードの属性を定義することができます。

<テーブル パラメータ名 パラメータタイプ パラメータの説明 テキスト 文字列(必須) リストツリーのノードのテキスト、通常はノードの右側に小さなアイコンが表示されます。 アイコン 文字列(オプション) リストツリーのノード上のアイコンで、通常はノードの左側にあるアイコンを指します。 選択されたアイコン 文字列(オプション) ノードが選択されたときに表示されるアイコンで、通常はノードの左側に表示されるアイコンです。 ハイフ 文字列(オプション) グローバルなenableLinksオプションと連動して、リストツリーノードのURLを指定します。 選択可能 ブール値。デフォルト：true リストツリーのノードが選択可能かどうかを指定する。に設定する。 $('#tree1').treeview({ color: "#428bca", //backColor: "black",backgroundColor //borderColor:'green', collapseIcon: "glyphicon glyphicon-minus",//shrinkable node icon nodeIcon: "glyphicon glyphicon-user", //emptyIcon: "glyphicon-glyphicon-ban-circle",// Set the icon of the node without children in the list tree expandIcon: "glyphicon glyphicon-plus", //Set the icon of the node with children in the list highlightSearchResults:true,//whether to highlight search results default true highlightSelected:true, //whether to highlight selected onhoverColor: "#f5f5f5", //the color of the mouse slide over levels: 0 , //Set the initial menu levels to expand the default is 2 selectedIcon: 'glyphicon glyphicon-tint', // selectedBackColor: 'black', // set the background color of the selected node //selectedColor : 'red', //set the font and icon color of the selected node showBorder:true, //show border or not showCheckbox:false, //Whether to show the multi-select box //uncheckedIcon:'', //set the icon of the unchecked node data:defaultData, showTags:true,//show badges }) を指定すると、ノードが展開され、選択できなくなります。 状態 オブジェクト(オプション) ノードの初期状態。 state.checked ブール値、デフォルト値 showBorder ノードがチェック状態であるかどうかを示す。 状態無効 ブール値、デフォルト値 href ノードが無効状態であるかどうかを示す。(選択可能、拡張可能、チェック可能ではありません）。 ステート.エキスパンド ブール値、デフォルト値 $( '#tree' ).treeview( 'methodName' , args)  ノードが展開状態であるかどうかを示す。 状態選択 ブール値、デフォルト値 //This method returns an instance of the treeview object $( '#tree' ).treeview( ノードが選択可能かどうかを示す。 色 文字列。オプション ノードの前景色。グローバルな前景色オプションを上書きする。 バックカラー 文字列。オプション ノードの背景色。グローバルな背景色オプションを上書きする。 タグ 文字列の配列。 グローバルなshowTagsオプションと組み合わせることで、リストツリーノードの右側に追加情報を追加します。

 グローバルパラメータ

パラメータを使用すると、ツリービューのデフォルトの外観と動作をカスタマイズすることができます。パラメータは、プラグインの初期化の間に渡されるオブジェクトを使用します。

<テーブル 

$('#tree1').treeview({
    color: "#428bca",
    //backColor: "black",backgroundColor
    //borderColor:'green',
    collapseIcon: "glyphicon glyphicon-minus",//shrinkable node icon
    nodeIcon: "glyphicon glyphicon-user",
    //emptyIcon: "glyphicon-glyphicon-ban-circle",// Set the icon of the node without children in the list tree
    expandIcon: "glyphicon glyphicon-plus", //Set the icon of the node with children in the list
    highlightSearchResults:true,//whether to highlight search results default true
    highlightSelected:true, //whether to highlight selected
    onhoverColor: "#f5f5f5", //the color of the mouse slide over
    levels: 0 , //Set the initial menu levels to expand the default is 2
    selectedIcon: 'glyphicon glyphicon-tint',
   // selectedBackColor: 'black', // set the background color of the selected node
    //selectedColor : 'red', //set the font and icon color of the selected node
    showBorder:true, //show border or not
    showCheckbox:false, //Whether to show the multi-select box
    //uncheckedIcon:'', //set the icon of the unchecked node
    data:defaultData,
    showTags:true,//show badges
})
<テーブル パラメータ名 パラメータタイプ デフォルト値 説明 データ オブジェクトの配列 なし リストツリーに表示されるデータです。 バックカラー 文字列 すべての合法的なカラー値 デフォルト：Bootstrap.cssを継承しています。 すべてのリストツリーノードの背景色を設定します。 ボーダーカラー 文字列 すべての合法的なカラー値 デフォルト：Bootstrap.cssを継承しています。 リストツリーコンテナのボーダーカラーを設定します。ボーダーが不要な場合は showBorder 属性をfalseに設定します。 チェックアイコン 文字列：クラス名 ブートストラップ・グリフィコン glyphicon-check"で定義されています。 チェック状態になっているチェックボックスアイコンを設定します。 折りたたみアイコン 文字列：クラス名 ブートストラップ・グリフィコン グリフィコン・グリフィコン・マイナスで定義されています。 リストツリーの縮小可能なノードのアイコンを設定します。 カラー 文字列 すべての合法的なカラー値 デフォルト：Bootstrap.cssを継承しています。 リストツリー内の全ノードの前景色を設定します。 エンプティアイコン 文字列：クラス名 ブートストラップ・グリフィコン グリフィコンで定義されています。 リストツリーで、子ノードを持たないノードのアイコンを設定します。 有効リンク数 ブーリアン 虚偽 現在のノードのテキストをハイパーリンクとして使用するかどうか。ハイパーリンク先の href の値は、各ノードのデータ構造で与えなければならない。 エキスパンドアイコン 文字列：クラス名 ブートストラップ・グリフィコン グリフィコン・グリフィコンプラスで定義されています。 リストツリー内の展開可能なノードにアイコンを設定します。 ハイライト検索結果 ブール値 真 検索結果をハイライト表示するかどうか。 ハイライト選択 ブーリアン 真 ノードが選択されたときにハイライト表示するかどうか。 オンホバーカラー 文字列 すべての合法的なカラー値 デフォルトは「#F5F5F5」です。 リストツリーのノードの上にユーザーがマウスをスライドさせたときの背景色を設定します。 レベル 整数 デフォルト：2 継承ツリーのデフォルトの展開レベルを設定します。 マルチセレクト ブーリアン 虚偽 複数のノードを同時に選択できるかどうか。 ノードアイコン 文字列：クラス名 ブートストラップ・グリフィコン グリフィコンglyphicon-stop"で定義されています。 すべてのリストツリーノードのデフォルトアイコンを設定します。 選択されたアイコン 文字列：クラス名 ブートストラップ・グリフィコン グリフィコンglyphicon-stop"で定義されています。 選択されたすべてのノードのデフォルトアイコンを設定します。 検索結果背景色 文字列 すべての合法的なカラー値 デフォルト：未定義、継承。 検索結果ノードの背景色を設定します。 検索結果色 文字列 すべての合法的なカラー値 , 初期値：'#D9534F' 検索結果ノードの前景色を設定します。 セレクテッドバックカラー 文字列 すべての合法的なカラー値 デフォルト: '#428bca' 選択されたノードの背景色を設定します。 選択色 文字列 すべての合法的なカラー値 デフォルトは「#FFFFFF」です。 リストツリーの選択ノードの背景色を設定します。 ショーボーダー ブーリアン 真 ノードにボーダーを表示するかどうか。 ショーチェックボックス ブーリアン 虚偽 ノードにチェックボックスを表示するかどうか。 ショーアイコン ブーリアン 真 ノードアイコンを表示するかどうか。 ショータグ ブーリアン 虚偽 各ノードの右側にタグtagを表示するかどうか。タグの値は、各リストツリーのデータ構造で指定する必要があります。 アンチェックIcon 文字列：クラス名 ブートストラップ・グリフィコン glyphicon glyphicon-unchecked"で定義されています。 チェックボックスアイコンのチェックをはずした状態を設定します。

 利用可能なメソッド

メソッドを呼び出すには、2つの方法があります。

  • 1. プラグインラッパー。プラグインのラッパーは、基礎となるメソッドにアクセスするためのプロキシとして動作することができます。
    <テーブル 
    $(

'#tree'

).treeview(

'methodName'

, args) 

    複数のパラメータを渡す場合は、配列オブジェクトを使用する必要があります。

  • 2. ツリービューを直接使用する。以下の2つのメソッドのいずれかで、treeviewオブジェクトのインスタンスを取得することができます。
    <テーブル 
    //This method returns an instance of the treeview object


$(

'#tree'

).treeview(

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します