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"]
});