基于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中的this指针
Mar 18 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
JS跨域代码片段
Aug 30 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
jQuery cdn使用介绍
May 08 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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
MySQL修改密码方法总结
2008/03/25 PHP
php 购物车实例(申精)
2009/05/11 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Async Validator 异步验证使用说明
2017/07/03 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
经济管理毕业生求职信
2014/03/15 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
无线电通信名词解释
2022/02/18 无线电