jstree的使用

1.從官網下載好插件

https://www.jstree.com/

2.複製到項目中,並導入jquery插件.

3.使用配置:

<link rel="stylesheet" href="jstree/vakata-jstree-bb0473a/dist/themes/default/style.min.css" />
<script src="jstree/vakata-jstree-bb0473a/dist/libs/jquery.min.js"></script>
<script src="jstree/vakata-jstree-bb0473a/dist/jstree.min.js"></script>

4.建立實例:

<div id="jstree">
	<ul>
		<li>Root 1
			<ul>
				<li>Child 1</li>
				<li>Child 2</li>
			</ul>
		</li>
		<li>Root 2
			<ul>
				<li>Child 1</li>
				<li>Child 2</li>
			</ul>
		</li>
	</ul>
</div>

<scripe>
        $(function(){
	        $('#jstree').jstree();
	})
</scripe>

5.監聽事件

$('#jstree').on("changed.jstree", function(e, data) {
	console.log(data.selected);
});

6.實例交互

$('button').on('click', function() {
	$('#jstree').jstree(true).select_node('child_node_1');
	//$('#jstree').jstree('select_node', 'child_node_1');
	//$.jstree.reference('#jstree').select_node('child_node_1');
});

7.配置實例

//默認配置
$('#jstree').jstree();

//設置全部屬性默認值
$.jstree.defaults.core.themes.variant = "large";

//加載插件
$('#jstree').jstree({
  "plugins" : [ "wholerow", "checkbox" ]
});

//複選框
$('#jstree').jstree({
  "core" : {
    "themes" : {
      "variant" : "large"
    }
  },
  "checkbox" : {
    "keep_selected_style" : false
  },
  "plugins" : [ "wholerow", "checkbox" ]
});

8.html使用jstree

<!-- 基本標記 -->
<div id="html1">
  <ul>
    <li>Root node 1</li>
    <li>Root node 2</li>
  </ul>
</div>
<script>
$('#html1').jstree();
</script>

<!-- 子節點 -->
<div id="html1">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

<!-- 設置初始狀態和class -->
<li class="jstree-open" id="node_1">Root
  <ul>
    <li>
      <a href="#" class="jstree-clicked">Child</a>
    </li>
  </ul>
</li>

<!-- 設置初始狀態和屬性 -->
<li data-jstree='{"opened":true,"selected":true}'>Root
  <ul>
    <li data-jstree='{"disabled":true}'>Child</li>
    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>
      Child</li>
    <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
      Child</li>
  </ul>
</li>

<!-- 使用ajax加載-->
$(function() {
    $('#jstree').jstree({
        'core' : {
            'data' : {
                "url" : URL,
                "dataType" : "json",
                "data" : function(node) {
                    return {
                        "id" : node.id
                    };
                }	
             }
        }
    });
});

9.使用json屬性

{
  id          : "string"  // 若是省略，將會自動生成
  parent      : "string"  // 父節點
  text        : "string"  // 文本
  icon        : "string"  // 圖標
  state       : {
    opened    : boolean   // 是否能夠打開
    disabled  : boolean   // 是否禁用節點
    selected  : boolean   // 是否選擇節點
  },
  children    : []        // 子節點
  li_attr     : {}        // 生成li節點的屬性
  a_attr      : {}        // 生成a節點的屬性
}

10.json生成

<!-- 1 -->
$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });

<!-- 2 -->
$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

<!-- ajax -->
$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});

<!-- 函數-->
$('#tree').jstree({
    'core' : {
	'data' : function(obj, cb) {
	    cb.call(this, [ 'Root 1', 'Root 2' ]);
	}
    }
});

11.監聽事件

$('#jstree')
  // listen for event
  .on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  })
  // create the instance
  .jstree();

12.插件

1.checkbox

複選框

$("#tree").jstree({
  "plugins" : ["checkbox"]
});

2.contextmenu

添加右鍵菜單。

$('#container').jstree({
  "core" : { "check_callback" : true }, // so that operations work
  "plugins" : ["contextmenu"]
});

3.dnd

使可以拖放樹節點並從新排列這棵樹。

$("#tree").jstree({
  "core" : { "check_callback" : true }, // so that operations work
  "plugins" : ["dnd"]
});

4.massload

加載多個節點實現懶加載

$("#tree").jstree({
  "core" : {
    "data" : { .. AJAX config .. }
  },
  "massload" : {
    "url" : "/some/path",
    "data" : function (nodes) {
      return { "ids" : nodes.join(",") };
    }
  },
  "plugins" : [ "massload", "state" ]
});

5.search

搜索的樹和可能的匹配節點。它也有 AJAX 回調，因此該搜索將工做懶加載樹

<form id="s">
  <input type="search" id="q" />
  <button type="submit">Search</button>
</form>
<script>
$("#container").jstree({
  "plugins" : ["search"]
});
$("#s").submit(function(e) {
  e.preventDefault();
  $("#container").jstree(true).search($("#q").val());
});
</script>

6.sort

將節點排序,默認按字母

$("#tree").jstree({
  "plugins" : ["sort"]
});

7.state

保存全部打開的並在用戶的瀏覽器中選擇節點，所以返回到同一棵樹上時將恢復之前的狀態。

$("#tree").jstree({
  // the key is important if you have multiple trees in the same domain
  "state" : { "key" : "state_demo" },
  "plugins" : ["state"]
});

8.types

添加 type ,以方便地控制嵌套規則和圖標而不是單獨的節點組的節點。

$("#tree").jstree({
  "types" : {
    "default" : {
      "icon" : "glyphicon glyphicon-flash"
    },
    "demo" : {
      "icon" : "glyphicon glyphicon-ok"
    }
  },
  "plugins" : ["types"]
});

9.unique

具備相同名稱的節點能夠做爲兄弟姐妹共存-防止重命名和移動到已包含具備相同名稱的節點的父節點。

$("#tree").jstree({
  "plugins" : ["unique"]
});

10.wholerow

選擇節點變得更容易。在老的瀏覽器可能會致使慢下來的

$("#tree").jstree({
  "plugins" : ["wholerow"]
});