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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
javascript全局自定义鼠标右键菜单
Dec 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中转义mysql语句的实现代码
2011/06/24 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php实现中文转数字
2016/02/18 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
简单的js表格操作
2016/09/24 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
SQL SERVER面试资料
2013/03/30 面试题
介绍一下Java的事务处理
2012/12/07 面试题
航空大学应届生求职信
2013/11/10 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
环保宣传标语
2014/06/12 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers