jsTree使用记录

1. ajax请求生成jsTree

[javascript] view plaincopy

<span style="font-size:14px;"><script>
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("保存成功!");
}
});
}
</script></span><span style="font-size:24px;">
</span>

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

2. jsTree change事件

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

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

3.jsTree自定义contextmenu

[javascript] view plaincopy

<script>
$('#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();
});
</script>

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

顶: 8

踩

转载于:https://www.cnblogs.com/telwanggs/p/7272090.html

jsTree使用记录相关推荐

基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用...
为什么80%的码农都做不了架构师?>>> 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap ...
jsTree设置默认节点全部展开的方法
最近项目有需求,当jsTree加载完毕的时候想让所有的节点都打开,便于用户操作,遂参考API,这里记录下来.好记性不如烂笔头: //jsTree的初始化$tree.jstree({'plugins': ...
SpringBoot+Jquery+Jstree实现企业架构管理
场景效果 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90 ...
SpringBoot+Jquery+jsTree实现页面树型结构
场景效果 jstree官网 https://www.jstree.com/ 实现引用CSS样式使用cdn或者将其下载 <link rel="stylesheet" hr ...
使用jstree创建无限分级的树(ajax动态创建子节点)
首先来看一下效果页面加载之初节点全部展开后首先数据库的表结构如下其中Id为主键,PId为关联到自身的外键两个字段均为GUID形式层级关系主要靠这两个字段维护其次需要有一个类型 publi ...
（转）基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用...
http://www.cnblogs.com/wuhuacong/p/4759564.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理& ...
jstree禁用父节点点击_Jstree 使用CheckBox插件选中父节点时被禁用的子节点也会选中问题...
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2.修 ...
jstree的简单使用例子
最近使用到了jstree,感觉是一款灵活的.可多项定制的tree插件: 我这边使用过程记录下: 参考的jstree api网站,以及demo介绍: https://www.jstree.com/api ...
JSTree的基本用法
描述:JSTree是一个独立的插件,可以运用到.net,java,php等各个地方.JSTree功能庞大,我也是刚接触不久,先暂时记录下基本用法,至于去如何用其它功能,相信会了基本的用法就可以知道如何 ...

jsTree使用记录

jsTree使用记录相关推荐

最新文章

热门文章