继续上一篇:

1.数据

按照官网的json数据返回格式: 有两种格式,我使用的格式如下:

$('#jstree1').jstree({ 'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
]
} });

这里data是后台返回的

//我这里由于项目原因稍微处理了下,/getData是后台数据返回的路径
$.post('/getData',null,function(data){
if(data.result && data.result.status=='200'){
cb.call($this, data.result.datas);//data.result.datas的值是json数据
}else{
alert(data.result.message);
}
});

2.右键菜单

(1)在jstree的源码中已经预定了右键菜单如下:

$.jstree.defaults.contextmenu = {
   select_node:true,//设置当前节点是否为选中状态 true表示选中状态
    show_at_node:true,//设置右键菜单是否和节点对齐 true表示对齐
    items : function (o, cb) { // Could be an object directly
return {
"create" : {
"separator_before" : false,//Create这一项在分割线之前
"separator_after" : true,//Create这一项在分割线之后
"_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用
"label" : "Create", //Create这一项的名称 可自定义
"action" : function (data) { //点击Create这一项触发该方法
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
              //新加节点
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
});
}
},
....

(2)这里我们自定义右键菜单

 var $tree=$('#tree1');
$tree.jstree({
"core": {
"themes": {
"responsive": false
},
"check_callback": true,
'data': []
},
"contextmenu":{
select_node : false,
show_at_node : true,
items: function(o, cb){
//因为这里我们之后需要定义多个项,所以通过对象的方式返回
var actions={};
//添加一个"新增"右键菜单
actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
"separator_before" : false,//Create这一项在分割线之前
"separator_after" : true,//Create这一项在分割线之后
"_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用
"label" : "新增", //Create这一项的名称 可自定义
"action" : function (data) { //点击Create这一项触发该方法,这理还是蛮有用的
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
//新加节点,以下三行代码注释掉就不会添加节点
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
});
}
};
//添加一个"重命名"右键菜单
actions.rename={
"separator_before" : false,
"separator_after" : false,
"_disabled" : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label" : "重命名",
"action" : function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
}
//添加一个"删除"右键菜单
actions.delete= {
"separator_before" : false,
"icon" : false,
"separator_after" : false,
"_disabled" : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label" : "删除",
"action" : function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if(inst.is_selected(obj)) {
inst.delete_node(inst.get_selected());
}
else {
inst.delete_node(obj);
}
}
};
return actions;//返回右键菜单项
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"plugins": ["contextmenu","dnd", "state", "types"]
});

             

jstree使用小结(二)的更多相关文章

  1. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

  2. Vue学习小结(二)

    接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...

  3. python --- 字符编码学习小结(二)

    距离上一篇的python --- 字符编码学习小结(一)已经过去2年了,2年的时间里,确实也遇到了各种各样的字符编码问题,也能解决,但是每次都是把所有的方法都试一遍,然后终于正常.这种方法显然是不科学 ...

  4. Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...

  5. jstree使用小结(三)

    操作节点的这几个事件都比较简单: 如下 var $tree=$('#tree1'); $tree.jstree({...}); //选中节点 $tree.on('select_node.jstree' ...

  6. jstree使用小结(一)

    项目中用到tree结构,使用了jstree做个笔记如下: 1. 官网: http://www.jstree.com/    有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O [PS: 一 ...

  7. Spring知识点小结(二)

    一.配置非自定义的Bean(数据源DataSource模型) DBCP数据源:        导入dbcp的jar包:dbcp+pool+connector                代码实现:  ...

  8. 动态规划小结 - 二维动态规划 - 时间复杂度 O(n*n)的棋盘型,题 [LeetCode] Minimum Path Sum,Unique Paths II,Edit Distance

    引言 二维动态规划中最常见的是棋盘型二维动态规划. 即 func(i, j) 往往只和 func(i-1, j-1), func(i-1, j) 以及 func(i, j-1) 有关 这种情况下,时间 ...

  9. Hibernate知识点小结(二)

    一.持久化对象和标识符    1.持久化类        配置完关系后,操作的实体对应的类,成为持久化类 (Customer) 2.持久化类标识符(oid:object id)        3.持久 ...

随机推荐

  1. HDU1896Stones(优先队列)

    Stones Time Limit : 5000/3000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submis ...

  2. C++:string类的使用

    类 <string> std::string String类的定义 , 其也是个模板类 typedef basic_string<char> string; String cl ...

  3. HTNL5新增标签

    我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别. <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者 ...

  4. CentOS 单用户登录&命令行、图像界面

    如何单用户登录: 这是一个很简单的问题,以前没重视,每次linux服务器无法正常启动时,都找应急盘,想偷懒,反而浪费了时间. 今天备忘如下: 1.系统启动时,按光标键调出GRUB引导菜单. 2.选定一 ...

  5. 通过ant调用shell脚本执行adb命令

    在Hudson或者Jenkins中利用ant的exec 来调用shell命令,通过shell脚本来执行adb shell命令,可以正常执行,不会出现在ant中直接调用adb shell出现的假死情况. ...

  6. Qt5:窗口背景色的设置

    在Qt中,设置窗口背景色有多种方法,如通过setStyleSheet   和 调色板 setPalette 等 下面是setPalette 方法 QPalette pale = palette(); ...

  7. ubuntu14.04英文环境下安装中文输入法

    ubuntu14.04英文环境下安装中文输入法 发表于1年前(2014-07-12 20:12)   阅读(4478) | 评论(0) 3人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会 ...

  8. 一些简单的例子让你在Java中能更好的学习并理解循环结构(1)!

    一.java中流程控制方式采用三种基本流程结构:顺序结构,选择(分支)结构,循环结构. 1.[if-else 结构] if(1>2){ system.out.println("if条件 ...

  9. 利用MyEclipse连接数据库并自动生成基于注解或者XML的实体类

    一.利用MyEclipse连接数据库 1. 打开MyEclipse的数据库连接视图 然后在Other中找到"MyEclipse Database"中的DB Browser 2. 在 ...

  10. Python之路:堡垒机实例以及数据库操作

    一.堡垒机前戏 开发堡垒机之前,先学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作. SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: ...