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

2024-09-30 11:40:43

概述：

一般情况下都是通过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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS+Ajax实现百度智能搜索框

首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert
Struts2.5 利用Ajax将json数据传值到JSP的实例

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规
浅谈Vue.js应用的四种AJAX请求数据模式

如果您闲的没事干去两个Vue.js开发人员:"在Vue应用中使用AJAX的正确姿势是咋样的?",您将会得到三种或更多的不同回答. Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用.每个都有自己的利弊,应根据要求进行判断.你甚至可以同时使用几个! 在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置: 1.根实例 2.组件Components 3.Vuex actions 4.路线导航卫士 5.另加:奖金模式我将解释每个方法,举一
JavaScript使用Ajax上传文件的示例代码

本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&
原生js中ajax访问的实例详解

原生js中ajax访问的实例详解 form表单中登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
vuejs使用FormData实现ajax上传图片文件

我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图前端实现 <template> <div class="admin"> <d
JavaScript 通过Ajax 动态加载CheckBox复选框

废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark
js如何编写简单的ajax方法库

本文实例为大家分享了js编写ajax方法库的具体代码,供大家参考,具体内容如下具体代码 ~function(){ //ajax:实现ajax请求的公共方法;当一个方法传递的参数过多,而且还不固定,我们使用对象统一传值法(把需要传递的参数值都放在一个对象中,一起传递进去即可) function ajax(options){ //把需要使用的参数值设定一个规则和初始值 var _default = { url:"",//请求的地址 type:"get",//请求的方式
基于jstree使用AJAX请求获取数据形成树

概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

效果: json文件: { "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":
vue 组件的封装之基于axios的ajax请求方法

如下所示: import Vue from 'vue' let service = { url: 'http://host.xxxxx.com/xxx.php' } service.ajaxReuqest = (url, options, type, fileFlag) => { for (const i in options) { if (!options[i] && options[i] !== 0 && (options[i].length &&
jquery 通过ajax请求获取后台数据显示在表格上的方法

1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" > <script type="text/javascript"
bootstrap select2 动态从后台Ajax动态获取数据的代码

效果图展示: 实现方式: 前端代码: <div class="form-group"> <label class="font-noraml">动态多选</label> <select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple" type="text&qu
jQuery Ajax请求后台数据并在前台接收

1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec
Scrapy-Redis结合POST请求获取数据的方法示例

前言通常我们在一个站站点进行采集的时候,如果是小站的话我们使用scrapy本身就可以满足. 但是如果在面对一些比较大型的站点的时候,单个scrapy就显得力不从心了. 要是我们能够多个Scrapy一起采集该多好啊人多力量大. 很遗憾Scrapy官方并不支持多个同时采集一个站点,虽然官方给出一个方法: **将一个站点的分割成几部分交给不同的scrapy去采集** 似乎是个解决办法,但是很麻烦诶!毕竟分割很麻烦的哇下面就改轮到我们的额主角Scrapy-Redis登场了! 能看到这篇文章的小
jQuery使用ajax跨域请求获取数据

跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no tr

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

相关推荐

随机推荐