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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
js分页代码分享
Apr 28 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
拖拉表格的JS函数
2008/11/20 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
内衣营销方案
2014/03/15 职场文书
如何写自我鉴定
2014/03/19 职场文书
商业融资计划书
2014/04/29 职场文书
献爱心活动总结
2014/05/07 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js