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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery事件用法详解
Oct 06 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
React项目动态设置title标题的方法示例
Sep 26 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
新52大事件
2020/03/03 欧美动漫
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
如何通过Python实现标签云算法
2019/07/02 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
简单了解python协程的相关知识
2019/08/31 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
销售文员岗位职责
2013/11/29 职场文书
购房意向书范本
2014/04/01 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
水电施工员岗位职责
2015/04/11 职场文书
暂停营业通知
2015/04/25 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技