JQuery ztree非同期読み込み例の説明_jquery
もともと、ファイル ディレクトリの参照インターフェイスを作成したかったのですが、すべてのファイルとディレクトリを一度に読み取る必要があるのは明らかで、非常に時間と労力がかかります。
したがって、非同期読み込みを行う必要があります....
準備:
1 JQuery ZTree をダウンロード
JS と CSS をコピーするだけです。実際には、それほど多くを含める必要はなく、必要なものを使用してください。
2 では、JSON オブジェクトを変換するには fastJSON が必要です
JAR パッケージをダウンロードして Eclipse にインポートした後、常にクラスが見つからないというエラーが発生しました。
解決策: jar パッケージを WEB-INF/lib の下に置きます。
コード例:
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>
レンダリング:
上記は jquery の非同期読み込みに関するもので、jquery プログラミングを学習している皆さんに役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7612
15
1387
52
88
11
29
136
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
htmlの読み方
Apr 05, 2024 am 08:36 AM
HTML 自体はファイルを読み取ることができませんが、JavaScript を使用する (XMLHttpRequest、fetch())、サーバーサイド言語を使用する (PHP、Node.js)、サードパーティのライブラリを使用する (jQuery. get() 、axios、fs-extra)。
C# 委任とは何ですか? それによってどのような問題が解決されますか?
Apr 04, 2024 pm 12:42 PM
委任は、非同期プログラミングとイベント処理の問題を解決するために、オブジェクト間でメソッド ポインターを渡すために使用されるタイプセーフな参照型です。 非同期プログラミング: 委任により、メソッドを異なるスレッドまたはプロセスで実行できるようになり、アプリケーションの応答性が向上します。イベント処理: デリゲートはイベント処理を簡素化し、クリックやマウスの動きなどのイベントを作成して処理できるようにします。
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
jQueryを使用してテーブルに新しい行を追加する方法の紹介
Feb 29, 2024 am 08:12 AM
jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。
PHPでよく使われるファイル操作関数のまとめ
Apr 03, 2024 pm 02:52 PM
目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：
WordPress でページのリダイレクトを防ぐにはどうすればよいですか?
Mar 05, 2024 am 09:33 AM
WordPress でページのリダイレクトを防ぐにはどうすればよいですか? Web サイト開発では、WordPress でページ非ジャンプ設定を実装したい場合があります。つまり、特定の操作中に、ページ全体を更新せずにページ コンテンツを更新できます。これにより、ユーザー エクスペリエンスが向上し、Web サイトがよりスムーズになります。次に、WordPress でページ非ジャンプ設定を実装する方法と具体的なコード例を紹介します。まず、Ajax を使用してページのジャンプを防ぐことができます。アヤックス
