最近公司项目要用到一款JS树状插件，所以简单研究了一下jstree的官方手册，对用到的自定义右键菜单功能做下简单的总结：
废话不多说先上效果图：
详情可查看插件官网https://www.jstree.com/
选择这个插件主要是因为是hplus后台框架已整合好的，只是缺了右键菜单的功能，所以就想优化一下，可以用来对分类的增删改，不用再另外写个表单处理这些操作了。
引入插件很简单，一个css和js加上jquery就好了，不多说，不会的话就看官方手册
html页面上只要定义一个div要设置一个id属性，用于js对Dom操作，这里分两种初始化
1.普通的ul->li，静态或者服务端传数据渲染出来，我是用这种方式的
2.json格式数据源，这种也不错，就是数据要json格式拼接好
然后就是jquery初始化操作$(function () {$('#jstree_demo_div').jstree();});
jstree括号里可以设置树的主题，样式，使用插件，以及自定义方法
下面是我的代码：
$(document).ready(function() {
$("#jstree1").jstree({
"core": {
"animation" : 0,
"check_callback" : true,
"themes" : { "stripes" : true },
},
"plugins": ["contextmenu", "dnd", "search",
"state", "types", "wholerow"],
"contextmenu": {
"items": {
"create": null,
"rename": null,
"remove": null,
"ccp": null,
"add": {
"label": "新增分类",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
var newNode = inst.create_node(inst.get_node(obj.reference),'请输入分类名称',"after","","");
inst.edit(newNode,newNode.val)
// inst.hide_all(obj.reference,'');
// inst.jstree('create');
}
},
"rename":{
"label": "修改分类",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
inst.edit(obj.reference,clickedNode.val)
// inst.rename_node(obj.reference,clickedNode.id);
}
},
"delete": {
"label": "删除分类",
"action": function (obj) {
var inst = jQuery.jstree.reference(obj.reference);
var clickedNode = inst.get_node(obj.reference);
inst.delete_node(obj.reference);
}
}
}
}
});
});
做下简单说明：
core：不依赖于插件的所有选项都包含在名为的配置对象的键中core，每个插件的选项都包含在与插件名称相同的键中（这里我也不太理解手册的意思，或者说谷歌没翻译好）大概意思应该是类似于配置文件的作用，设置一些默认值和配置项，但是一定要设置"check_callback" : true,否则自定义菜单会失效
plugins：这个是设置选用哪些插件的，是的插件里面还有插件，有点绕，这个可以理解为插件里面的扩展功能，跟自定义有关的主要是contextmenu这个扩展
contextmenu：这个就是对contextmenu扩展的功能重新定义了，就跟平时用别的插件一样，如何使用其实官方demo也有，我是参考了别人的一篇博客http://blog.csdn.net/rongyongfeikai2/article/details/46691173，
contextmenu->items：这里设置需要定义的设置项，前四个都是默认的，后面三个相当于是自定义三个方法应该不难理解，label设置右击之后标签显示内容，action是定义方法
先说一下获取节点信息方式var inst = jQuery.jstree.reference(obj.reference);这一句是参考上述别人博客的，其实官方手册也有，通过reference获取当前选中节点的引用，然后var clickedNode = inst.get_node(obj.reference);这句是通过get_node方法获取节点的信息，类似于实例对象
add新增jstree节点，这个是我折腾比较久的，先开始看手册（没看懂T_T）网上找了很久试了也没用，还是重新看手册（用新的插件官方手册很重要O_0|||），手册API（提供了很多现成的功能）里面有create_node这个方法，但是官方手册有点误导我
按照手册的说法应该传入父节点在父节点下面生成新的节点，而我要做的是在一个节点后面生成一个新节点就行，如果是父节点就生成一个新的父节点（看自己的需求设置，如果需要父节点可以在手册查到用get_parent（）获取父节点信息），我是传入当前节点信息。第二个参数是最坑的，手册上说“为新的节点的数据（有效的JSON对象，或简单的字符串的名称）”，其实这边应该不能动态添加的，应该是默认添加进去的字符串，然后再编辑修改，官方demo也是如此。。。我直接给他赋值了，导致一直报错（T_T|||），第三个参数选择插入位置，“after”和“first”二选一就好了，后面两个不知道干嘛的，可以给空值，注意到新创建的节点会返回节点id，这个很好用，不然你怎么知道创建完怎么找到这个节点修改名称，inst.edit(newNode,newNode.val)这句就是修改名称的，好像直接把修改分类也讲完了，😄😄😄
修改分类：修改实际上是调用rename_node方法，但是如果在节点上修改，首先得编辑吧，所以要先调用edit编辑方法，使内容可编辑，然后调用rename_node修改编辑的值（我是用ajax异步修改的，所以只用edit就够了）
删除分类：获取到节点信息之后直接调用delete_node方法就好了
最后说一下，网上也有很多自定义的教程，但我还是觉得用官方手册的方法最好，既然封装好了这么多方法那就说明有一定的优点，为了避免误导别人，ajax的请求我没放在这里，如果要达到跟服务端交互还要自己补充异步请求，有问题评论中留言。。。
网友评论