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

浏览数：60 / 时间：2015年06月09日

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;
	} 
}

页面效果展示：

技术分享