1. 引入css文件
  2. <link rel="stylesheet" type="text/css" href="js/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
  3. 引入js文件
  4. <script type="text/javascript" src="js/assets/global/plugins/jstree/dist/jstree.min.js"></script>
  5. 前端放一个div用来做为tree的容器
  6. <div style="overflow-y: auto; overflow-x: auto; width: 100%; height: 534px;" id="jstree_bsbm_div"></div>
  7. //构造树型结构
  8. var handleTree = function() {
  9. getTreeData();
  10. $("#jstree_bsbm_div").on('select_node.jstree', function(node,selected,event) {
  11. //绑定选中事件处理函数
  12. id = selected.node.id;
  13. parent = selected.node.parent;
  14. jc = selected.node.original.jc;
  15. // jcMax = selected.node.original.jcMax;
  16. // gz = selected.node.original.gz;
  17. freshtable();
  18. }).on('refresh.jstree', function(node,selected,event) {
  19. //刷新事件处理函数
  20. getTreeData();
  21. });
  22. };
  23. //获取树形数据
  24. var getTreeData = function(){
  25. var aData = {
  26. type: "2",
  27. roledm: roledm,
  28. }
  29. $.ajax({
  30. type : "POST",
  31. url : "basic/getQxTree",
  32. dataType : "json",
  33. contentType : 'application/json', //定义格式
  34. data : JSON.stringify(aData), //把json转为String传递给后台
  35. success : function(data) {
  36. // var data = [
  37. // { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" ,'state' : {'selected' : true}},
  38. // { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : {'selected' : true}},
  39. // { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" ,'state' : {'selected' : false}},
  40. // { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" ,'state' : {'selected' : true}},
  41. // ];
  42. $('#jstree_bsbm_div').data('jstree', false).empty();
  43. $("#jstree_bsbm_div").jstree({
  44. 'core': {
  45. 'data': data,
  46. },
  47. plugins: [ "wholerow", "checkbox","types","themes"],
  48. "checkbox": {
  49. "keep_selected_style": false,//是否默认选中
  50. },
  51. })
  52. // 获取树
  53. var menuTrees = $('#jstree_bsbm_div').jstree(true);
  54. // 清空级联关系
  55. var oldCascade = menuTrees.settings.checkbox.cascade;
  56. menuTrees.settings.checkbox.cascade = '';
  57. // 重置级联关系
  58. setTimeout(function () {
  59. menuTrees.settings.checkbox.cascade = oldCascade;
  60. }, 500);
  61. },
  62. error : function(e) {
  63. Metronic.alert({
  64. type: 'danger',
  65. icon: 'warning',
  66. message: '树形数据获取失败!',
  67. place: 'prepend',
  68. closeInSeconds:5,
  69. container:'#profileAlertsMsg',
  70. focus:true
  71. });
  72. }
  73. });
  74. };

jsTree checkbox plugin使用笔记的更多相关文章

  1. jstree CHECKBOX PLUGIN

    The checkbox plugin makes multiselection possible using three-state checkboxes. Configuration overri ...

  2. jstree 插件的使用笔记(一)

    官方:http://www.jstree.com/  一.节点的描述 官方资料:http://www.jstree.com/docs/json/ 格式一 { id : "string&quo ...

  3. Openflow Plugin学习笔记3

    MDController.java 中的start方法,创建了SwitchConnectionHandlerImpl实例 SwitchConnectionHandlerImpl switchConne ...

  4. Openflow Plugin学习笔记2

    OpenDaylight OpenFlow Plugin 过载保护 过载保护 OF Plugin中的过载保护按如下流程工作: ConnectionConductor将消息送入队列,是最靠近OFJava ...

  5. Openflow Plugin学习笔记1

    主入口 ConfigurableOpenFlowProviderModule是OpenFlowPlugin中启动加载的入口,如下: @Override public java.lang.AutoClo ...

  6. jsTree的checkbox默认选中和隐藏

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin "plugins" : ['checkbox'] 设置默认选中状态(checkbox ...

  7. JQuery/JS插件 jsTree加载树,普通加载,点一级加载一级

    前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  8. JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  9. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

随机推荐

  1. 【Developer Log】ProGuard扰码可执行JAR包

    在项目上线之前需要通过ProGuard来对java的class进行混淆,以避免反编译方式,来保护自己的代码.ProGuard网上有很多资料,可以参考:http://blog.csdn.net/zhan ...

  2. Spring Boot开发HTTPS协议的REST接口

    Spring Boot开发HTTP的REST接口流程在前文中已经描述过,见<SpringBoot开发REST接口>. 如需要支持HTTPS,只需要在如上基础上进行设置.修改/resourc ...

  3. CentOS6.5下卸载MySql(yum安装)

    因为我是用yum安装的mysql,所以卸载相对简单 yum -y remove mysql* 再把相关的文件删掉, rm -f /etc/my.cnf.rpmsave  rm -rf /var/lib ...

  4. nyoj_264_国王的魔镜_201311271800

    国王的魔镜 时间限制:3000 ms  |           内存限制:65535 KB 难度:1   描述 国王有一个魔镜,可以把任何接触镜面的东西变成原来的两倍——只是,因为是镜子嘛,增加的那部 ...

  5. EF--model is being created异常

    使用EF的时候出现了下面的异常,我使用了TASK和saveChangeAsync()异步 The context cannot be used while the model is being cre ...

  6. N天学习一个linux命令之ps

    ps命令 用途 显示系统进程信息 用法 ps [options] 常用选项 选项有三种风格,这里是指Unix风格 (Unix,BSD,GNU LONG OPTIONS) 简单刷选类 -A, -e 显示 ...

  7. Swoole源代码学习记录(十二)——ReactorThread模块

    Swoole版本号:1.7.5-stable Github地址:https://github.com/LinkedDestiny/swoole-src-analysis 这一章将分析Swoole的Re ...

  8. Spring学习笔记——Spring事务仅仅对执行时异常回滚

    我们在使用Spring时候一般都知道事务在遇到异常的时候会回滚.岂不知Spring的事务默认仅仅有在发生执行时异常即:RunTimeException时才会发生事务,假设一个方法抛出Exception ...

  9. Navicat Lite 提示Connection to mysql server on 10065

    Navicat Lite 提示Connection to mysql server on 10065 验证过主要是防火墙问题 [root@014136251035 zhop]# vi /etc/sys ...

  10. 76.培训记录信息 Extjs 页面

    1.培训记录信息页面jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...