jsTree使用记录实例

介绍jstree使用技巧，轻松构建带复选框的树形结构

你是否曾经遇到过需要展示一个带复选框的树形结构，并能够实时获取用户选择的数据的场景？今天，我将通过实例为你详细介绍如何使用jstree，帮助你轻松实现这一功能。

一、ajax请求生成jsTree

我们需要通过ajax请求获取树形结构的数据。在JavaScript中，我们可以使用$.ajax方法来发送请求。例如，当页面某个地方被点击时，我们可以调用showPermitTree(id)函数，向后台发送带有id参数的ajax请求。我们的项目使用的是springmvc框架，后台会返回一个经过JSONArray.toString处理的数据。

二、创建jsTree

当ajax请求成功返回数据后，我们可以调用createPermitTree(datastr)函数来创建jsTree。在创建jsTree时，我们需要指定一些参数，如插件、核心配置和节点类型等。在插件部分，我们使用了wholerow、checkbox和types插件，以支持整行选择、复选框和不同类型节点。在核心配置部分，我们设置了主题和数据。数据部分就是后台返回的数据。

三、监听事件

在jsTree创建完成后，我们需要监听'changed.jstree'事件，以便在用户选择节点时获取选中的节点ID。当用户选择节点时，我们会将选中的节点ID存储到数组r中。

四、保存选择

我们需要在页面上添加一个按钮，点击后触发saveTree函数。这个函数会发送一个ajax请求给后台，将当前选择的节点ID发送给后台进行保存。

总结一下，jstree是一个功能强大的树形结构插件，通过简单的配置就可以实现带复选框的树形结构。通过ajax请求获取数据，创建jsTree，并监听用户的选择事件，我们可以轻松地获取用户选择的数据并发送给后台进行保存。希望这篇文章能对你有所帮助，如果你有任何问题，欢迎随时向我提问。jsTree：自定义上下文菜单的魅力

你是否想过在jsTree中拥有独特的上下文菜单？今天，让我们一起如何定制jsTree的contextmenu plugin，赋予它新的功能。

想象一下，你在网页上看到一个精美的jsTree结构，点击右键时，弹出的不再是默认的菜单，而是你自己定义的菜单，是不是感觉很棒？

我们先来看一下这段代码：

```javascript

$('jstree').jstree({

core: {

check_callback: true,

data: [

{ "id": "1", "parent": "", "text": "root" },

{ "id": "2", "parent": "1", "text": "child 1" },

{ "id": "3", "parent": "1", "text": "child 2" }

]

},

plugins: ["wholerow","contextmenu"],

"contextmenu": {

"items": {

// ...省略其他项，只展示自定义的"add"和"delete"操作

"add": {

"label": "添加",

"action": function (obj) {

var inst = jQuery.jstree.reference(obj.reference);

var clickedNode = inst.get_node(obj.reference);

alert("执行添加操作，选中的节点ID是：" + clickedNode.id);

}

},

"delete": {

"label": "删除",

"action": function (obj) {

var inst = jQuery.jstree.reference(obj.reference);

var clickedNode = inst.get_node(obj.reference);

alert("执行删除操作，选中的节点ID是：" + clickedNode.id);

}

}

}

}

}).on("ready.jstree", function (e, data) {

datastance.open_all();

});

```

在这段代码中，我们使用了jsTree的核心功能，并启用了“wholerow”和“contextmenu”插件。关于contextmenu的配置部分，我们自定义了“add”和“delete”两个操作。当用户在jsTree中右击某个节点并选择“添加”或“删除”时，会弹出一个提示框，显示被点击节点的ID。

这只是一个简单的示例，你可以根据自己的需求进一步定制菜单项，比如添加一个编辑功能、移动节点等等。jsTree的contextmenu plugin功能强大，能满足大部分需求。

自定义jsTree的上下文菜单不仅可以提升用户体验，还能让jsTree的功能更加丰富多彩。希望这篇文章能对你有所帮助，也希望大家多多支持狼蚁SEO！让我们一起更多jsTree的奥秘。