Bootstrapでツリービューのカテゴリリストを表示する

シェアする

スポンサーリンク

現在作成している株関連のサイトでカテゴリリストをツリービュー(TreeView)の階層形式で表示したかったので試してみました。

Bootstrapを使用して作成したサイトのため、利用したTreeViewは
Bootstrap Tree View

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.

Bootstrap Tree Viewによるデモ表示
を参考に対応しました。


  	<script src="/ツリービューのjsソースの置き場所/bootstrap-treeview.js"></script>
  	<script type="text/javascript">

  		$(function() {
// ajaxを利用して非同期読み込み
        $.ajax({
            type: 'GET',
            url: 'この例ではjsonデータを読み込むphpやjsonファイルのパス',
        }).done(function(data){
            //console.log('done');
            //console.log(data);
            var $tree = $('#treeview').treeview({
              data: data,
              enableLinks: true, // リンク有効
              levels: 1, // Collapsed 階層リストがある場合閉じた(+)状態で表示
              showTags: true, // タグ数を表示
             });
        }).fail(function(){
//            console.log('fail');
        }).always(function(){
//            console.log('ajax finish');
        });

  		});
  	</script>

ツリービューを表示したい箇所に以下のように記述する


            <div id="treeview" class=""></div>



error: