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中创建实例与原型继承揭秘
Dec 21 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
Nuxt.js实战详解
Jan 18 Javascript
React组件refs的使用详解
Feb 09 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php的dl函数用法实例
2014/11/06 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python 提取文件的小程序
2009/07/29 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python将数组n等分的实例
2019/12/02 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
表达自我的市场:Society6
2018/08/01 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
"序列点" 是什么
2016/07/29 面试题
建筑专业自荐信范文
2014/01/05 职场文书
骨干教师考核方案
2014/05/09 职场文书
新农村建设汇报材料
2014/08/15 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
2014年工会工作总结
2014/11/12 职场文书
入队仪式主持词
2015/07/04 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python