插件?

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

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

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

这里是每个的快速概述。

 插件已更改

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

 Conditionalselect 插件

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

$(function () {
  $("#plugins10").jstree({
    "conditionalselect" : function (node, event) {
      return false;
    },
    "plugins" : [ "conditionalselect" ]
  });
});
  • 根节点
    • 子节点 1
    • 子节点 2

 Contextmenu 插件

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

您可以在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" ]
  });
});
  • 根节点
    • 子节点 1
    • 子节点 2
  • 根节点 2

 Massload 插件

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

您可以在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);
  });
});
  • 根节点
    • 子节点 1
    • 子节点 2
  • 根节点 2

 排序插件

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

$(function () {
  $("#plugins5").jstree({
    "plugins" : [ "sort" ]
  });
});
  • 根节点
    • 2
    • 1
    • 3
    • 0
  • 根节点 2

 状态插件

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

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

$(function () {
  $("#plugins6").jstree({
    "state" : { "key" : "demo2" },
    "plugins" : [ "state" ]
  });
});
  • 根节点
    • A
    • few
    • more
    • nodes
  • 根节点 2

 类型插件

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

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

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

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

 独特的插件

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

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

 Wholerow 插件

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

$(function () {
  $("#plugins9").jstree({
    "plugins" : [ "wholerow" ]
  });
});
  • 根节点
    • 节点
  • 根节点 2
www.jstree.com.cn    jstree中文网    [英文站]