1. 程式人生 > >jstree--AJAX 請求獲取資料形成樹

jstree--AJAX 請求獲取資料形成樹

概述:

一般情況下都是通過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();
		});

總結:

  1. "responsive": false :表示主題是否適應手機類小尺寸螢幕,預設為false
  2. "check_callback" : true:表示形成樹是否可以重新組織,也是改變順序,層次關係
  3. callback.call(this, jsonarray):將陣列放入樹形
  4. types:{}設定型別,圖示
  5.  "state" : { "key" : "demo2" }:將選中的狀態儲存瀏覽器中
  6. "plugins" : [ "dnd", "state", "types","checkbox","wholerow" ] 表示外掛相關,詳情參考點選開啟連結
  7. 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>

相關推薦

jstree--AJAX 請求獲取資料成樹

概述: 一般情況下都是通過ajax進行請求獲取資料。boostrap+ajax 1、程式碼 //許可權分配 $('#authority').click(function() { $("#jstree").jstree({ "core"

【QT】QT的學習:在QML中使用AJAX向某伺服器傳送請求獲取資料

(1)準備Ajax.js // GET function get(url, success, failure) { var xhr = new XMLHttpRequest; xhr.open("GET", url); xhr.onreadyst

jQuery-select2通過ajax請求獲取遠端資料

1. 預設傳送的查詢引數 term : The current search term in the search box. q : Contains the same contents as term. _type: A “request type”.

jquery如何通過ajax請求獲取後臺資料顯示在表格上

1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bo

c#後臺發post請求獲取資料

C#進階系列——WebApi 介面引數不再困惑:傳參詳解 閱讀目錄 一、get請求 1、基礎型別引數 2、實體作為引數 3、陣列作為引數 4、“怪異”的get請求 二、post請求 1、基礎型別引數

原生AJAX 請求JSON資料方式

這裡先給大家一個有實際json資料的連線: https://jsonplaceholder.typicode.com/posts 1.例項化XMLHttpRequest物件 var request; if (window.XMLHttpRequest) {   request = new

SpringMVC筆記九之ajax請求json資料

1、匯入jackson-annotations-2.2.1.jar,jackson-core-2.2.1.jar,jackson-databind-2.2.1.jar三個jar包,注意他們的版本要一致,不然會報錯。https://download.csdn.net/downl

vue專案及axios請求獲取資料

一般vue專案中 一個頁面是由多個元件組成的,各個組建的資料都是統一在主介面的元件中傳送axios請求獲取,這樣極大地提高了效能。 首先要匯入用到的元件和axios import HomeHeader from './components/Heade

ajax請求後臺資料、返回值處理

$.ajax({     url:"/userAdmin/list",     //請求後臺的地址     type:"post",    //請求方式     data:{    /

關於AJAX請求後臺資料,接收後臺返回的JSON資料,以及前臺遍歷json資料和append追加元素。

在這兩天的學習以及練習過程中,需要涉及到微信小程式的一些東西。在小程式中,是不能直接跳轉後臺邏輯來獲取資料,而是通過使用AJAX傳值和AJAX請求,來向後臺邏輯傳遞資訊。 1,比如說註冊,填寫資訊之後,通過AJAX傳遞給後臺,後臺處理返回是否註冊成功的JSON資料,前臺再加以分析是否註冊成功,

ajax請求data資料格式(傳遞json的方式)

ajax有三種傳遞傳遞data的方式: json格式 json字串格式 標準引數模式 1.json格式形如:  {“username”:”chen”,”nickname”:”alien”} $.ajax({ type:"post", url

Ajax請求後臺資料

一、前期準備 安裝好XAMPP軟體,並執行起來。本文程式碼是基於XAMPP開發環境,XAMPP是完全免費且易於安裝的Apache發行版,其中包含MariaDB、PHP和Perl。XAMPP開放原始碼包的設定讓安裝和使用出奇容易。 二、前後臺數據互動 前臺部分其中“process.php?name=H

主域頁面發起ajax請求獲取二級域名頁面內容

需求:主域頁面(http://www.temp.org/test.html)發起ajax請求獲取二級域名頁面(http://test.temp.org/test2.html)內容 初始錯誤做法: $.ajax({ type:"post",.

關於ajax後臺獲取資料 ,echarts表呈現資料

首先建立後臺json資料  自己構造的後臺資料如下: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOExcepti

urllib模組通過post請求獲取資料

功能: 輸入你要查詢的單詞,會返回相對應的結果 import urllib.request import urllib.parse import json class youdaoSpider: def __init__(self): # 注意,這裡http://fanyi.yo

react路由跳轉、引數傳遞和Ajax請求API資料

我專案完整程式碼請進入我的github“星座運勢”github上原始碼地址歡迎點一下star(^_^),在這個專案中使用了react框架元件化開發、react路由實現介面跳轉和引數傳遞,此外我所使用的資料來源於ShowAPI介面。 一下為路由部分程式碼(app

【JavaScript】ajax請求資料返回時間戳使用js處理方案

author:咔咔 wechat:fangkangfk   方法: function formatDate(now) {   var year = now.getFullYear(),   month = now.getMonth() + 1,   

前臺通過js 寫個ajax請求資料傳給後臺,然後後臺接收到這個資料, 再儲存到資料庫。。

 //前端js操作: function testAjax(){ var url="/testAjaxUrlJson/";//後臺接收處理url var txtContent= "textprm";//傳輸內容;  var objData = [         { name

java 傳送http協議的POST請求獲取資料

/** * @功能 http向指的URL傳送POST請求 * @author you * @param method 請求方法,POST * @param url 請求的路徑 * @return */ public static String getDa

echarts ajax 動態獲取資料

keys 和 values 都是動態資料 注意如果資料是{value:335, name:'直接訪問'}這種格式 需要使用eval('(' + strtojson + ')') 轉一下//載入圖表 start $(function(){ $.ajax(