jsTree使用记录实例


Posted in Javascript onDecember 01, 2016

1. ajax请求生成jsTree

[javascript] view plain copy
<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>

jsTree使用记录实例

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

2. jsTree change事件

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

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

3.jsTree自定义contextmenu

[javascript] view plain copy
<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自带的菜单,并自定义菜单

jsTree使用记录实例

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS图片预加载插件详解
Jun 21 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
Vue.JS入门教程之列表渲染
Dec 01 #Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python代码如何注释
2020/06/01 Python
如何真正的了解python装饰器
2020/08/14 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
python如何实现DES加密
2020/09/21 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
关于Java finally的面试题
2016/04/27 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
娱乐节目策划方案
2014/06/10 职场文书
社区志愿者活动方案
2014/08/18 职场文书
培养联系人考察意见
2015/06/01 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android