jstree java实例_jsTree使用记录实例

1. ajax请求生成jsTree

[javascript] view plain copy

var r = []; // 权限树中被选中的叶子节点

var currentGroupId;

function showPermitTree(id) {

currentGroupId = id;

$.ajax({

data : "currentGroupId=" + id,

type : "POST",

//dataType : 'json',

url : "/test/permittree",

error : function(data) {

alert("出错了！！:" + data);

},

success : function(data) {

//alert("success:" + data);

createPermitTree(data);

}

});

${'buttonDiv'}.style.display="";

}

function createPermitTree(datastr) {

datastr = eval("" + datastr + "");

$('#permitTree').jstree({

'plugins' : [ "wholerow", "checkbox", "types" ],

'core' : {

"themes" : {

"responsive" : false

},

'data' : datastr

},

"types" : {

"default" : {

"icon" : "fa fa-folder icon-state-warning icon-lg"

},

"file" : {

"icon" : "fa fa-file icon-state-warning icon-lg"

}

}

});

}

// listen for event

$('#permitTree').on('changed.jstree', function(e, data) {

r = [];

var i, j;

for (i = 0, j = data.selected.length; i < j; i++) {

var node = data.instance.get_node(data.selected[i]);

if (data.instance.is_leaf(node)) {

r.push(node.id);

}

}

//alert('Selected: ' + r.join('@@'));

})

function saveTree() {

$.ajax({

data : {'currentGroupId' : currentGroupId,

'selectedNodes' : r.join('@@')},

type : "POST",

//dataType : 'json',

url : "/test/savetree",

error : function(data) {

alert("出错了！！:" + data);

},

success : function(data) {

alert("保存成功!");

}

});

}

直接把测试项目中一段代码copy过来了，这是一棵带复选框的树。页面有地方点击之后触发showPermitTree(id)函数，发送ajax请求给后台，项目使用的是springmvc框架，后台返回JSONArray.toString。

2. jsTree change事件

上面代码中含change事件。把所有选中的节点的id放到一个数组中。

页面上有个按钮，点击后触发saveTree函数，发请求给后台，把选中的节点的id发给后台。

3.jsTree自定义contextmenu

[javascript] view plain copy

$('#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": {

"create": null,

"rename": null,

"remove": null,

"ccp": null,

"add": {

"label": "add",

"action": function (obj) {

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

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

alert("add operation--clickedNode's id is:" + clickedNode.id);

}

},

"delete": {

"label": "delete",

"action": function (obj) {

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

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

alert("delete operation--clickedNode's id is:" + clickedNode.id);

}

}

}

}

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

data.instance.open_all();

});

这段代码使用jsTree的contextmenu plugin，去掉jsTree自带的菜单，并自定义菜单

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！