基于jstree使用AJAX请求获取数据形成树


Posted in Javascript onAugust 29, 2017

概述:

一般情况下都是通过ajax进行请求获取数据。boostrap+ajax

1、代码

//权限分配 
  $('#authority').click(function() { 
    $("#jstree").jstree({ 
     "core" : { 
      "themes" : { 
       "responsive": false 
      }, 
      // so that create works 
      "check_callback" : true, 
      'data' : function (obj, callback) { 
       var jsonstr="[]"; 
       var jsonarray = eval('('+jsonstr+')'); 
       $.ajax({ 
        type: "GET", 
        url:"/demo/authority/getAuthoritys", 
        dataType:"json", 
        async: false, 
        success:function(result) { 
         var arrays= result; 
         for(var i=0 ; i<arrays.length; i++){ 
          console.log(arrays[i]) 
          var arr = { 
            "id":arrays[i].id, 
            "parent":arrays[i].parentId=="root"?"#":arrays[i].parentId, 
            "text":arrays[i].name 
          } 
          jsonarray.push(arr); 
         } 
        } 
 
       }); 
       callback.call(this, jsonarray); 
      } 
     }, 
     "types" : { 
      "default" : { 
       "icon" : "glyphicon glyphicon-flash" 
      }, 
      "file" : { 
        "icon" : "glyphicon glyphicon-ok" 
      } 
     }, 
     "state" : { "key" : "demo2" }, 
     "plugins" : [ "dnd", "state", "types","checkbox","wholerow" ] 
    }); 
    $('#setAuthority').modal(); 
  });

总结:

"responsive": false :表示主题是否适应手机类小尺寸屏幕,默认为false
"check_callback" : true:表示形成树是否可以重新组织,也是改变顺序,层次关系
callback.call(this, jsonarray):将数组放入树形
types:{}设置类型,图标
 "state" : { "key" : "demo2" }:将选中的状态保存浏览器中
"plugins" : [ "dnd", "state", "types","checkbox","wholerow" ] 表示插件相关,详情参考点击打开链接
url路径换成你后台地址,返回时json数组

2、html标签

<!-- 权限分配模框--> 
 <div class="modal fade" id="setAuthority"> 
  <div class="modal-dialog"> 
   <div class="modal-content message_align"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" 
      aria-label="Close"> 
      <span aria-hidden="true">×</span> 
     </button> 
     <h4 class="modal-title">权限分配</h4> 
    </div> 
    <div class="modal-body"> 
     <div id= "jstree"> 
      
     </div> 
    </div> 
    <div class="modal-footer"> 
     <input type="hidden" id="url" /> 
     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 
     <a onclick="authorityConfirm()" class="btn btn-success" 
      data-dismiss="modal">确定</a> 
    </div> 
   </div> 
   <!-- /.modal-content --> 
  </div> 
  <!-- /.modal-dialog --> 
 </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
Vue2.0权限树组件实现代码
Aug 29 #Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 #Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
laravel5.4+vue+element简单搭建的示例代码
Aug 29 #Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python笔记(2)
2012/10/24 Python
python操作gmail实例
2015/01/14 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python实现猜数游戏
2020/03/27 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
社团文化节邀请函
2014/01/10 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
政风行风建设整改方案
2014/10/27 职场文书
先进工作者个人总结
2015/02/15 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
教师节领导致辞
2015/07/29 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js