基于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 Cookie读写删除操作的函数
Mar 02 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
数组Array的排序sort方法
Feb 17 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JS实现头条新闻的经典轮播图效果示例
Jan 30 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
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python简单商城购物车实例代码
2018/03/15 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
业务主管岗位职责
2013/11/20 职场文书
代理人委托书
2014/09/16 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
详解Python flask的前后端交互
2022/03/31 Python