jstree使用小结(二)
继续上一篇:
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"] });