JQuery ztree pemuatan asynchronous contoh explanation_jquery
Pada asalnya, saya ingin membuat antara muka menyemak imbas direktori fail, yang memerlukan merentasi semua fail dan direktori Jelas sekali, membacanya sekali gus sangat memakan masa dan susah payah.
Jadi anda perlu melakukan pemuatan tak segerak....
Persediaan:
1 Muat Turun JQuery ZTree
Cukup salin JS dan CSS di dalamnya Sebenarnya, tidak perlu memasukkan begitu banyak, gunakan apa sahaja yang anda mahu.
2 memerlukan fastJSON untuk menukar objek JSON
Selepas saya memuat turun pakej JAR dan mengimportnya ke Eclipse, saya sentiasa melaporkan ralat kelas tidak ditemui.
Penyelesaian: Letakkan bungkusan balang di bawah WEB-INF/lib.
Contoh kod:
index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/demo.css" type="text/css">
<link rel="stylesheet" href="resources/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="resources/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.ztree.core-3.5.js"></script>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<SCRIPT type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true
}
} ,
async: {
enable: true,
url:"/TestZTree/test",
autoParam:["id", "name", "level"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
var zNodes =[
{ id:1, pId:0, name:"parentNode 1", open:true},
{ id:11, pId:1, name:"parentNode 11",isParent:true},
{ id:111, pId:11, name:"leafNode 111"},
{ id:112, pId:11, name:"leafNode 112"},
{ id:12, pId:1, name:"parentNode 12",isParent:true},
{ id:121, pId:12, name:"leafNode 121"},
{ id:13, pId:1, name:"parentNode 13", isParent:true},
{ id:2, pId:0, name:"parentNode 2", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</body>
</html>testServlet.java
package com.test;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
public class testServlet extends HttpServlet{
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
String name = request.getParameter("name");
String level = request.getParameter("level");
String otherParam = request.getParameter("otherParam");
System.out.println(id + "|" + name + "|" + level + "|" + otherParam);
List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>();
for(int i = 0; i < 5; i++){
HashMap<String,Object> hm = new HashMap<String,Object>(); //最外层，父节点
hm.put("id",id+i);//id属性 ，数据传递
hm.put("name", id+i); //name属性，显示节点名称
hm.put("pId", id);
list.add(hm);
}
response.getWriter().write(JSON.toJSONString(list));
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <servlet-name>testServlet</servlet-name> <servlet-class>com.test.testServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>testServlet</servlet-name> <url-pattern>/test</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
Rendering:
Di atas adalah mengenai pemuatan asynchronous jquery. Saya harap ia akan membantu semua orang yang mempelajari pengaturcaraan jquery.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Cara membaca html
Apr 05, 2024 am 08:36 AM
Walaupun HTML sendiri tidak boleh membaca fail, pembacaan fail boleh dicapai melalui kaedah berikut: menggunakan JavaScript (XMLHttpRequest, fetch()); menggunakan bahasa sebelah pelayan (PHP, Node.js menggunakan perpustakaan pihak ketiga (jQuery. get() , axios, fs-extra).
c# Apakah itu delegasi dan apakah masalah yang diselesaikannya?
Apr 04, 2024 pm 12:42 PM
Perwakilan ialah jenis rujukan selamat jenis yang digunakan untuk menghantar penunjuk kaedah antara objek untuk menyelesaikan masalah pengaturcaraan tak segerak dan pengendalian acara: Pengaturcaraan tak segerak: Perwakilan membenarkan kaedah dilaksanakan dalam urutan atau proses yang berbeza, meningkatkan responsif aplikasi. Pengendalian acara: Perwakilan memudahkan pengendalian acara, membenarkan acara seperti klik atau pergerakan tetikus dibuat dan dikendalikan.
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
Pengenalan kepada cara menambah baris baharu pada jadual menggunakan jQuery
Feb 29, 2024 am 08:12 AM
jQuery ialah perpustakaan JavaScript yang popular digunakan secara meluas dalam pembangunan web. Semasa pembangunan web, selalunya perlu menambah baris baharu secara dinamik pada jadual melalui JavaScript. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah baris baharu pada jadual dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML. Pustaka jQuery boleh diperkenalkan dalam teg melalui kod berikut:
Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP
Apr 03, 2024 pm 02:52 PM
目录1：nama asas()2：salinan()3：nama nama()4：ruang_bebas_cakera()5：ruang_jumlah_cakera()6：wujud_fail()7：fail_dapatkan_kandungan()8：isi_letak_fail()9：saiz fail()10：jenis fail( )11：glob()12：is_dir()13：boleh_tulis()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：
Bagaimana untuk mengelakkan pengalihan halaman dalam WordPress?
Mar 05, 2024 am 09:33 AM
Bagaimana untuk mengelakkan pengalihan halaman dalam WordPress? Dalam pembangunan laman web, kadangkala kami ingin melaksanakan tetapan bukan lompat halaman dalam WordPress, iaitu semasa operasi tertentu, kandungan halaman boleh dikemas kini tanpa menyegarkan keseluruhan halaman. Ini meningkatkan pengalaman pengguna dan menjadikan tapak web lebih lancar. Seterusnya, kami akan berkongsi cara melaksanakan tetapan bukan lompat halaman dalam WordPress dan memberikan contoh kod khusus. Pertama, kita boleh menggunakan Ajax untuk menghalang halaman daripada melompat. Ajax
