1. ajax请求生成jsTree

  1. <span style="font-size:14px;"><script>
  2. var r = []; // 权限树中被选中的叶子节点
  3. var currentGroupId;
  4. function showPermitTree(id) {
  5. currentGroupId = id;
  6. $.ajax({
  7. data : "currentGroupId=" + id,
  8. type : "POST",
  9. //dataType : 'json',
  10. url : "/test/permittree",
  11. error : function(data) {
  12. alert("出错了!!:" + data);
  13. },
  14. success : function(data) {
  15. //alert("success:" + data);
  16. createPermitTree(data);
  17. }
  18. });
  19. ${'buttonDiv'}.style.display="";
  20. }
  21. function createPermitTree(datastr) {
  22. datastr = eval("" + datastr + "");
  23. $('#permitTree').jstree({
  24. 'plugins' : [ "wholerow", "checkbox", "types" ],
  25. 'core' : {
  26. "themes" : {
  27. "responsive" : false
  28. },
  29. 'data' : datastr
  30. },
  31. "types" : {
  32. "default" : {
  33. "icon" : "fa fa-folder icon-state-warning icon-lg"
  34. },
  35. "file" : {
  36. "icon" : "fa fa-file icon-state-warning icon-lg"
  37. }
  38. }
  39. });
  40. }
  41. // listen for event
  42. $('#permitTree').on('changed.jstree', function(e, data) {
  43. r = [];
  44. var i, j;
  45. for (i = 0, j = data.selected.length; i < j; i++) {
  46. var node = data.instance.get_node(data.selected[i]);
  47. if (data.instance.is_leaf(node)) {
  48. r.push(node.id);
  49. }
  50. }
  51. //alert('Selected: ' + r.join('@@'));
  52. })
  53. function saveTree() {
  54. $.ajax({
  55. data : {'currentGroupId' : currentGroupId,
  56. 'selectedNodes' : r.join('@@')},
  57. type : "POST",
  58. //dataType : 'json',
  59. url : "/test/savetree",
  60. error : function(data) {
  61. alert("出错了!!:" + data);
  62. },
  63. success : function(data) {
  64. alert("保存成功!");
  65. }
  66. });
  67. }
  68. </script></span><span style="font-size:24px;">
  69. </span>

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

2. jsTree change事件

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

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

3.jsTree自定义contextmenu

  1. <script>
  2. $('#jstree').jstree({
  3. core : {
  4. check_callback : true,
  5. data : [
  6. { "id" : "1", "parent" : "#", "text" : "root" },
  7. { "id" : "2", "parent" : "1", "text" : "child 1" },
  8. { "id" : "3", "parent" : "1", "text" : "child 2" }
  9. ],
  10. },
  11. plugins : ["wholerow","contextmenu"],
  12. "contextmenu": {
  13. "items": {
  14. "create": null,
  15. "rename": null,
  16. "remove": null,
  17. "ccp": null,
  18. "add": {
  19. "label": "add",
  20. "action": function (obj) {
  21. var inst = jQuery.jstree.reference(obj.reference);
  22. var clickedNode = inst.get_node(obj.reference);
  23. alert("add operation--clickedNode's id is:" + clickedNode.id);
  24. }
  25. },
  26. "delete": {
  27. "label": "delete",
  28. "action": function (obj) {
  29. var inst = jQuery.jstree.reference(obj.reference);
  30. var clickedNode = inst.get_node(obj.reference);
  31. alert("delete operation--clickedNode's id is:" + clickedNode.id);
  32. }
  33. }
  34. }
  35. }
  36. }).on("ready.jstree", function (e, data) {
  37. data.instance.open_all();
  38. });
  39. </script>

这段代码使用jsTree的contextmenu plugin,去掉jsTree自带的菜单,并自定义菜单

 
8

jsTree使用记录的更多相关文章

  1. jstree的基本应用----记录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  3. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  4. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  5. 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  6. (转)基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    http://www.cnblogs.com/wuhuacong/p/4759564.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理& ...

  7. 树组件——jstree使用

    本文记录的只是我自己当时的代码,每行的注释很清楚了,你自己可以做相应变通 一.使用前提: 1.下载jstree依赖包 2.相关页面引入样式["jstree/themes/default/st ...

  8. 前端-jstree 一些常用功能

    最近使用到了jstree(v3.3.4)这个插件(官网:https://www.jstree.com/),在这里记录下我的使用过程的一些技巧和问题. 1. 获取数据 一般实际项目中用到的数据都是aja ...

  9. 记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL

    在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下. 这里是发布搭建代码: // 代码发布时 fis.media('qa') .match('*.{js,css,png}', { useHash ...

随机推荐

  1. UnicodeEncodeError: 'gbk' codec can't encode character '\u2022' in position

    在GBK解码时忽略掉不能解码的数据 self.file.write(content.encode("gbk", 'ignore').decode("gbk", ...

  2. jconsole远程连接 jmx配置注意事项

    由于在测试程序时需要收集程序运行时的内存,CPU等消耗情况.选择了jconsole这个jdk自带工具来观察.为了不影响程序运行状态,用远程连接的方式来具体观察. 首先,程序是放在ubutun系统服务器 ...

  3. Eclipse创建Maven多模块工程

    一.创建父项目 [New]->[Maven Project] 在弹出界面中选择[Create a simple project...] 二.创建子项目 选中刚建的父项目,在弹出菜单中点击[New ...

  4. 在全程Linux環境部署IBM Lotus Domino/Notes 8.5

    架設藍色巨人的協同合作訊息平台 在全程Linux環境部署IBM Lotus Domino/Notes 8.5 珊迪小姐 坊間幾乎所有探討IBM Domino/Notes的中文書籍,皆是以部署在Micr ...

  5. MICRO SIM卡(SIM小卡)尺寸图及剪卡图解

    如今使用MICRO SIM卡的手机越来越多.近期刚刚买了一个手机到手才发现尼马使用的是MICRO SIM卡.再去买剪卡器吧,十几二十块用一次就废了,去营业厅吧.又比較远,懒的出门.怎么办呢,自己剪!这 ...

  6. XAML实例教程系列 - 命名空间(NameSpace) 三

    XAML实例教程系列 - 命名空间(NameSpace) 2012-05-28 14:14 by jv9, 2205 阅读, 10 评论, 收藏, 编辑 上一篇曾提及XAML中,每个对象元素的声明是对 ...

  7. jeesite ckeditor数据库 HTML 被编码 的问题解决

    public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...

  8. servlet3.0 JQuary Ajax基本使用

    servlet3.0 没有web.xml文件,需要使用注解进行配置. js: $(document).ready(function(){ $("#btn").click(funct ...

  9. PCB SQL SERVER 字段模糊匹配个数 实现方法

    今天工程系统给到加投加投组件的数据规则修改,遇到需将一个字段模糊匹配的个数统计 这类需求要平时应该很少遇到了,这里将此方法分享出来, 一.需求如下 例子:itempara字段中的内容是: IVH板 铜 ...

  10. Linux基础命令第二波

    第1章 Linux启动过程 开机自检(BIOS)##硬件检查 MBR引导 GRUB菜单(选择不同的内核) 加载内核 运行init进程(Linux系统里面第一个进程) 读取/etc/inittab配置文 ...