jquery easyui tree异步加载的简单用法

jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<link rel="stylesheet" type="text/css" href="jquery/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui/demo/demo.css">
    <script type="text/javascript" src="jquery/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/easyui/jquery.easyui.min.js"></script>
  </head>
  <script type="text/javascript">
  		function ok(){
			$("#file_tree").tree({
				url:'TestTreeServlet',
				lines:true,
				onClick:function(node){
					if(node.type=="file"){
 					var ps={"id":node.id};
 					$.post("ReadFileServlet",ps,function(data){
 						alert(data);
 						$("#info").empty().append(data);
 					});
					}

				}
			});
  		}

  </script>

  <body onload="ok()">
    This is my JSP page. <br>

     <ul id="file_tree"></ul>

    <div id="info">

    </div>
  </body>
</html>

后台代码:

package servlet;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.io.InputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ReadFileServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");

		String fileName=request.getParameter("id");
		File file = new File(fileName);
       <span style="white-space:pre">		</span>BufferedReader reader = null;
       <span style="white-space:pre">		</span>StringBuffer text=new StringBuffer("");
        <span style="white-space:pre">	</span>try {
          <span style="white-space:pre">		</span>reader = new BufferedReader(new FileReader(file));
           <span style="white-space:pre">		</span>int line = 1;
            <span style="white-space:pre">		</span>String tempString=null;
            <span style="white-space:pre">		</span>// 一次读入一行,直到读入null为文件结束
           <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>while ((tempString = reader.readLine()) != null) {
                <span style="white-space:pre">		</span>// 显示行号
            	<span style="white-space:pre">		</span>System.out.println(line + ": " + tempString);
            	<span style="white-space:pre">		</span>text.append(tempString+"\n");
                <span style="white-space:pre">		</span>line++;
            <span style="white-space:pre">		</span>}
            <span style="white-space:pre">		</span>reader.close();
        <span style="white-space:pre">	</span>} catch (IOException e) {
            <span style="white-space:pre">		</span>e.printStackTrace();
        <span style="white-space:pre">	</span>} finally {
           <span style="white-space:pre">		</span>if (reader != null) {
               <span style="white-space:pre">		</span>    try {
                   <span style="white-space:pre">		</span> reader.close();
                <span style="white-space:pre">	</span>    } catch (IOException e1) {
                <span style="white-space:pre">	</span>    }
            <span style="white-space:pre">		</span>}
      <span style="white-space:pre">	</span>  <span style="white-space:pre">	</span>}
       <span style="white-space:pre">		</span>response.getWriter().write(text.toString());
	}
}

读取文件内容显示到页面

package servlet;

import java.io.File;
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 net.sf.json.JSONArray;

//import com.google.gson.JsonArray;

import util.TreeJson;

public class TestTreeServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");

		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");

		String id=request.getParameter("id");
		if(id==null || "".equals(id)){
			id="E:/test/";
		}
		List list=readPath(id);

		JSONArray json=JSONArray.fromObject(list);
		response.getWriter().write(json.toString());
	}

	public static List readPath(String path){
		List list=new ArrayList();
		File file = new File(path);
		if(file.exists()){
			File[] fs=file.listFiles();
			if(fs!=null && fs.length>0){
				for(int i=0;i<fs.length;i++){
					Map map = new HashMap();

					map.put("id", fs[i].getAbsolutePath());
					map.put("text", fs[i].getName());

					if(fs[i].isDirectory()){
						map.put("type", "folder");
						if(fs[i].listFiles()==null || fs[i].listFiles().length==0){
							map.put("iconCls", "icon-folder");
							map.put("state", "open");
						}else{
							map.put("state", "closed");
						}
					}else{
						map.put("type", "file");
						map.put("state", "open");
					}
					list.add(map);
				}
			}else{
				Map map = new HashMap();
				map.put("id", file.getAbsolutePath());
				map.put("text", file.getName());
				if(file.listFiles()!=null && file.listFiles().length>0){//还有子文件
					map.put("state", "closed");
				}else{
					map.put("state", "open");
				}
				map.put("iconCls", file.isFile()==true?"icon-file":"icon-folder");
				map.put("type", file.isFile()==true?"file":"folder");

				list.add(map);
			}
		}
		System.out.println(list.toString());
		return list;
	}
}

页面效果展示:

时间: 2024-08-05 01:27:39

jquery easyui tree异步加载的简单用法的相关文章

ztree v3.x 异步加载的简单用法

ztree官网:http://www.ztree.me/v3/main.php#_zTreeInfo 页面: <span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Str

MVC4中EasyUI Tree异步加载JSON数据生成树

  1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summary> // [DataContract] [Serializable] public class EasyTreeData { /// <summary> /// ID /// </summary> //  [DataMember] public string id { get;

03 jquery easyui 之 easyLoader 加载器

EasyLoader 是可以加载CSS样式.脚本.动态加载easyui组件.需要使用到easyloader.js,就不使用jquery.easyui.min.js 加载 EasyUI 模块 easyloader.base = '../'; // 设置 easyui 的基本目录 easyloader.load('messager', function(){ // 加载指定的模块         $.messager.alert('Title', 'load ok'); }); 通过相对 url 加

(一)jQuery EasyUI 的EasyLoader加载原理

1.第一次看了官网的demo,引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery的UI快速搭建组件.EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件,需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了. 比如需要加载linkbutton组件,则可以用下面的两种方式来加载: 第一种通过

基于jQuery的图片异步加载和预加载实例

如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时,其他图片才会加载,改插件很好地实现了图片异步加载功能. 在线预览   源码下载 html代码部分: <div id="content"> <div id="button"> <ul> <li>小图</li>

jQuery的AJax异步加载片段

主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步加载</title> <scri

EasyUI实现异步加载tree(整合Struts2)

首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/javascript"> $('#mytree').tree({ url:'treeLoad.action' }); </script> 配置Action <struts> <package name="tree_json" extends=&qu

jquery easyui datagrid 动态 加载列

实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似oracle web版的sql查询. 前台主要js为: Js代码   function sqlSearch(){ var sqlStatement = $.trim($("#sqlStatementId").val()); if(sqlStatement == null || sqlState

net extjs tree异步加载数据

小弟最近刚学习extjs,总结一下使用extjs 进行treepanel加载的经验 extjs版本4.0.7,后台是使用net 的mvc框架进行数据传递 首先显示一下效果以及后台数据截图       //我们提供动态数据   //这是数据源请求的数据来源(后台自定义JsonTree类提供的主要字段 ID Text FatherID) extjs代码 <script type="text/javascript"> Ext.onReady(function () {//以下的脚