jsTree - jQuery tree plugin3.3.8

插件?

jsTree的某些功能已移出核心，因此您只能在需要时使用它。要启用插件，请使用plugins 配置选项 ，并将该插件的名称添加到数组中。

例如，启用所有插件可以通过以下方式完成： (仅启用您需要的插件)

"plugins" : [
	"checkbox",
	"contextmenu",
	"dnd",
	"massload",
	"search",
	"sort",
	"state",
	"types",
	"unique",
	"wholerow",
	"changed",
	"conditionalselect"
]

这里是每个的快速概述。

该插件添加了有关选择更改的其他信息。一旦包含在plugins配置选项, 每个changed.jstree事件数据将包含一个名为的新属性changed，该属性将提供有关自上一个事件以来的selected 和 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" ]
    });
});

该插件在每个节点的前面呈现复选框图标，使多项选择变得更加容易。
它还支持三态行为，这意味着如果节点上有几个子节点处于选中状态，它将被呈现为不确定状态，并且状态将向上传播。您也可以使用级联配置选项微调级联选项。
请记住，级联复选框将检查甚至禁用的节点。

未确定的状态是自动计算的，但是如果您正在使用AJAX并按需加载，并且想要"undetermined" : true 在其状态下将节点渲染为低通通道。

您可以在API中找到所有复选框插件配置选项.

$(function () {
  $("#plugins1").jstree({
    "checkbox" : {
      "keep_selected_style" : false
    },
    "plugins" : [ "checkbox" ]
  });
});

该插件覆盖了该activate_node函数（当用户尝试选择一个节点时会调用该函数），并允许通过使用回调来防止函数调用。

$(function () {
  $("#plugins10").jstree({
    "conditionalselect" : function (node, event) {
      return false;
    },
    "plugins" : [ "conditionalselect" ]
  });
});

该插件可以右键单击节点，并在菜单中显示可配置操作的列表。

您可以在API中找到所有contextmenu插件配置选项。

$(function () {
  $("#plugins2").jstree({
     "core" : {
       // so that create works
       "check_callback" : true
     },
    "plugins" : [ "contextmenu" ]
  });
});

该插件可以拖放树节点并重新排列树。

您可以在API中找到所有dnd插件配置选项.

$(function () {
  $("#plugins3").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "dnd" ]
  });
});

该插件可以在单个请求中加载节点（用于延迟加载）。

您可以在API中找到所有massload插件配置选项。

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

这个插件增加了搜索树中项目甚至只显示匹配节点的可能性。

您可以在API中找到所有搜索插件配置选项.

$(function () {
  $("#plugins4").jstree({
    "plugins" : [ "search" ]
  });
  var to = false;
  $('#plugins4_q').keyup(function () {
    if(to) { clearTimeout(to); }
    to = setTimeout(function () {
      var v = $('#plugins4_q').val();
      $('#plugins4').jstree(true).search(v);
    }, 250);
  });
});

该插件根据比较配置选项功能自动排列所有同级节点，默认为字母顺序。

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

此插件将所有打开的节点和选定的节点保存在用户浏览器中，因此当返回同一棵树时，将恢复以前的状态。

您可以在API中找到所有状态插件配置选项。选择并刷新此页面以查看更改是否保留。

$(function () {
  $("#plugins6").jstree({
    "state" : { "key" : "demo2" },
    "plugins" : [ "state" ]
  });
});

该插件可以为节点组添加预定义类型，这意味着可以轻松控制每个组的嵌套规则和图标。

要设置节点的类型，可以使用节点数据set_type或为其提供type属性。

您可以在API中找到所有类型的插件配置选项和功能。

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

强制没有同名节点可以与同级共存。这个插件没有选项，只是防止重命名节点并将节点移动到已包含相同名称节点的父节点。

$(function () {
  $("#plugins8").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "unique", "dnd" ]
  });
});

使每个节点显示为块级别，这使选择更加容易。可能会导致旧浏览器中的大树变慢。

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