$('#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();
2.交互
为了在一个实例中调用一个方法，你必须要获取实例引用然后调用方法，这个例子展示如何获取一个引用然后调取一个方法。
可以查看API获取更多的方法：=(
// 3 ways of doing the same thing $('#jstree').jstree(true) .select_node('mn1'); $('#jstree') .jstree('select_node', 'mn2'); $.jstree.reference('#jstree') .select_node('mn3');
3、插件
jsTree有些功能被移除核心，只有你需要的时候才使用它，为了确保使用插件，需要使用plugins参数配置选项，将插件名称添加到一个数组中。
举个例子确保所有插件都可以使用：（只要设置你需要使用的插件）
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
这里有快速预览每一个插件
3.1、changed plugin (改变插件)
这个插件添加关于选择改变的额外的信息，一旦包含plugins配置选项，每个changed.jstree事件数据将会包含一个新的属性名称为changed,它将给出最后关于seleted和deselected节点的事件（changed.jstree）
$(function () { $("#plugins") .on("changed.jstree", function (e, data) { console.log(data.changed.selected); // newly selected console.log(data.changed.deselected); // newly deselected }) .jstree({ "plugins" : [ "changed" ] }); });
3.2.checked plugin(复选框)
这个插件将会在每个节点前面渲染复选框的图标，使得多选变得更加容易。
它也支持三态，意味着一个节点有些子节点是选中，这个节点将会被渲染成未确定，这个状态可以传播。你可以通过级联配置选项来微调级联选项。
记住级联会复选框会检查所有节点，即使是不可用的节点。
不确定状态是一个自动计算的，但是如果你是使用AJAX加载形成树想要渲染一个节点作为不确定状态通过设置属性“undetermined”:true。
你可以在API找到所有配置复选框的选项
$(function () { $("#plugins1").jstree({ "checkbox" : { "keep_selected_style" : false }, "plugins" : [ "checkbox" ] }); });
3.3 conditionalselect plugin(条件插件)
这个插件重写了activate_node函数（就是用户选择节点将会调用的函数），你可以通过回调避免这个函数被调用。
$(function () { $("#plugins10").jstree({ "conditionalselect" : function (node, event) { return false; }, "plugins" : [ "conditionalselect" ] }); });
3.4(Contextmenu plugin)上下文菜单插件
这插件就是你在一个节点上右键会弹出一个功能列表菜单。
你可以通过API找所有contextmenu插件的配置选项：
$(function () { $("#plugins2").jstree({ "core" : { // so that create works "check_callback" : true }, "plugins" : [ "contextmenu" ] }); });
3.5 (drag&drop)拖拽插件
这个插件可以通过拖拽来重新改变树的结构。
你可以通过API找到更多的配置选项：
3.6.Massloadplugin(惯性负载插件)
这个插件通过一次请求（使用的是延迟加载）加载节点
你可以通过API找到更多的配置选项：
$(function () { $("#plugins10").jstree({ "core" : { "data" : { .. AJAX config .. } }, "massload" : { "url" : "/some/path", "data" : function (nodes) { return { "ids" : nodes.join(",") }; } } "plugins" : [ "massload", "state" ] }); });
3.7.(search plugin) 搜索插件
这个插件可以在一棵树搜索对应的条目。
你可以通过API找到更多的配置选项：