Flexigrid Demo总结

原创网址：

http://diaopg.iteye.com/blog/1758695

Flexigrid Demo 详解（二）

• 博客分类：
• Java
• Java Web
• JS
• Open Source Frameworks

JavaScript jquery plugin Flexigrid Struts1 JSon

接《Flexigrid Demo 详解（一）》。

Flexigrid Demo总结

(1) FLEXIGRID与IE浏览器的兼容 ，这里需要为Table加上div标签，否则在IE中会产生JS错误。参见search.jsp。

(2) Flexigrid 插件后台获取数据转换成json串之后传到前台 ，所以需要在项目中引入JSONObject相关插件包。
该插件的查询以及排序功能可以参考SearchAction类中的代码。

(3)实现PDF与图片文件的预览与下载功能 ，参见SearchAction.java。

(4) 使用Flexigrid进行条件查询 。在前台JSP页面中添加form表单，需要注意的是，form表单中不能缺少name属性。否者Flexigrid无法获得form中的参数。

本文只是针对Flexigrid插件的基本用法，如分页、排序、条件查询进行了简单展示， 至于Flexigrid的详细用法及参数讲解，还请参考官网文档。希望本文对大家有所帮助。

详细代码如下。

首先，在Mysql中建立表GCIB，如下：

Gcib代码

1. CREATE TABLE `gcib` (
2. `id` int(11) NOT NULL,
3. `name` varchar(45) default NULL,
4. `file` mediumblob,
5. `filetype` varchar(45) default NULL,
6. PRIMARY KEY (`id`)
7. )

CREATE TABLE `gcib` (
  `id` int(11) NOT NULL,
  `name` varchar(45) default NULL,
  `file` mediumblob,
  `filetype` varchar(45) default NULL,
  PRIMARY KEY  (`id`)
)

下面是此Demo的详细代码：

1.配置文件

Web.xml代码

1. <!-- Standard Action Servlet Configuration -->
2. <servlet>
3. <servlet-name>action</servlet-name>
4. <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
5. <init-param>
6. <param-name>config</param-name>
7. <param-value>/WEB-INF/struts-config.xml</param-value>
8. </init-param>
9. <load-on-startup>2</load-on-startup>
10. lt;/servlet>
13. <!-- Standard Action Servlet Mapping -->
14. <servlet-mapping>
15. <servlet-name>action</servlet-name>
16. <url-pattern>*.do</url-pattern>
17. </servlet-mapping>

  <!-- Standard Action Servlet Configuration -->
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
 </servlet>


  <!-- Standard Action Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

Struts-config.xml代码

1. <struts-config>
2. <!-- Form beans Definitions -->
3. <form-beans>
4. <form-bean name="gcibForm" type="com.form.GcibBean" ></form-bean>
5. </form-beans>
7. <!-- Action Mapping Definitions -->
8. <action-mappings>
9. <action path="/SearchAction" type="com.action.SearchAction" parameter="method"> </action>
10. </action-mappings>
11. </struts-config>

<struts-config>
	<!-- Form beans Definitions -->
    <form-beans>
		<form-bean name="gcibForm" type="com.form.GcibBean" ></form-bean>
    </form-beans>

	<!-- Action Mapping Definitions -->
    <action-mappings>
        <action path="/SearchAction" type="com.action.SearchAction"  parameter="method"> </action>
    </action-mappings>
</struts-config>

2.Java文件

Dbconnection.java代码

1. public class DBConnection {
2. private static Connection conn;
3. private final static String url = "jdbc:mysql://localhost:3306/test?unicode=true&characterEncoding=UTF-8";
4. private final static String user = "root";
5. private final static String password = "root";
6. private final static String DRIVER="com.mysql.jdbc.Driver";
8. public static Connection getConnection(){
9. try {
10. try {
11. Class.forName(DRIVER).newInstance();
12. conn = DriverManager.getConnection(url, user, password);
13. } catch (ClassNotFoundException e) {
14. e.printStackTrace();
15. } catch (InstantiationException e) {
16. e.printStackTrace();
17. } catch (IllegalAccessException e) {
18. e.printStackTrace();
19. }
20. } catch (SQLException e) {
21. System.out.println("ERROR: database connection wrong.");
22. }
23. return conn;
24. }
26. public void closeConnection() {
27. if (!(conn == null)) {
28. try {
29. conn.close();
30. } catch (SQLException e) {
31. System.out.println("ERROR: database close wrong.");
32. }
33. }
34. }
36. }

public class DBConnection {
	private static Connection conn;
	private final static String url = "jdbc:mysql://localhost:3306/test?unicode=true&characterEncoding=UTF-8";
	private final static String user = "root";
	private final static String password = "root";
	private final static String DRIVER="com.mysql.jdbc.Driver";  

	public static Connection getConnection(){
		try {
			try {
				Class.forName(DRIVER).newInstance();
				conn = DriverManager.getConnection(url, user, password);	
			}  catch (ClassNotFoundException e) {
				e.printStackTrace();
			} catch (InstantiationException e) {
				e.printStackTrace();
			} catch (IllegalAccessException e) {
				e.printStackTrace();
			}	
		} catch (SQLException e) {
			System.out.println("ERROR: database connection wrong.");
		}
		return conn;
	}

	public void closeConnection() {
		if (!(conn == null)) {
			try {
				conn.close();
			} catch (SQLException e) {
				System.out.println("ERROR: database close wrong.");
			}
		}
	}

}

Gcib.java代码

1. /**
2. * GCIB class mapping the table GCIB in mysql.
3. * add a url property for deal with the record.
4. * @author Victor
5. */
6. public class Gcib {
7. private int id;
8. private String name;
9. private String filetype;
10. private String url;
12. public int getId() {
13. return id;
14. }
15. public void setId(int id) {
16. this.id = id;
17. }
18. public String getName() {
19. return name;
20. }
21. public void setName(String name) {
22. this.name = name;
23. }
25. public String getUrl() {
26. return url;
27. }
28. public void setUrl(String url) {
29. this.url = url;
30. }
31. public String getFiletype() {
32. return filetype;
33. }
34. public void setFiletype(String filetype) {
35. this.filetype = filetype;
36. }
37. }

/**
 * GCIB class mapping the table GCIB in mysql.
 * add a url property for deal with the record.
 * @author Victor
 */
public class Gcib {
		private int id;
		private String name;
		private String filetype;
		private String url;
		
		public int getId() {
			return id;
		}
		public void setId(int id) {
			this.id = id;
		}
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}

		public String getUrl() {
			return url;
		}
		public void setUrl(String url) {
			this.url = url;
		}
		public String getFiletype() {
			return filetype;
		}
		public void setFiletype(String filetype) {
			this.filetype = filetype;
		}
}

Gcibdao.java代码

1. /**
2. * Manage the GCIB object.
3. * @author Victor
4. */
5. public class GcibDAO {
6. /**
7. * Get the search result with pagination.
8. * @param paraMap
9. * @param start
10. * @param end
11. * @return
12. */
13. public List<Gcib> getGcibList(Map<String,Object> paraMap,int start, int end) {
14. List<Gcib> folderList = new ArrayList<Gcib>();
15. String sql = "select id,name,filetype from gcib where 1=1 ";
16. //search conditions in where statement.
17. String idPara = (String)paraMap.get("idPara");
18. String namePara = (String)paraMap.get("namePara");
19. //flexigrid order.
20. String sortname = (String)paraMap.get("sortname");
21. String sortorder = (String)paraMap.get("sortorder");
22. String orderSQL = ""; //record order statement.
23. if(!this.isEmpty(sortname)||!this.isEmpty(sortorder)){
24. orderSQL= " order by " + sortname+" "+sortorder;
25. }
26. sql = sql+(!this.isEmpty(idPara)?" and id ="+idPara :"");
27. sql = sql+(!this.isEmpty(namePara)?" and name ='"+namePara+"'":"");
28. sql = sql + orderSQL;
29. sql = sql + " limit "+start+","+end+"";
30. Connection connect = DBConnection.getConnection();
31. Statement stmt = null;
32. try {
33. stmt = connect.createStatement();
34. ResultSet rs = stmt.executeQuery(sql);
35. while(rs.next()){
36. Gcib gcib = new Gcib();
37. Integer idInt = rs.getInt("id");
38. gcib.setId(idInt);
39. gcib.setName(rs.getString("name"));
40. gcib.setFiletype(rs.getString("filetype"));
41. //String url = "<a href=\"/blank/SearchAction.do?method=showPDFandIMG&fileID="+idInt.toString()+"\" traget=\"_black\"\"><font color=\'blue\'>预览</font></a>";
42. //如果使用window.showModalDialog方法弹出下载文件，在IE中不好用。所以使用window.open或者上面的方法。
43. String url = "<a href=\"javascript:onClick=GCIB.showObject(\'"+idInt.toString()+"\')\"><font color=\'blue\'>预览</font></a>";
44. gcib.setUrl(url);
45. folderList.add(gcib);
46. }
47. } catch (SQLException e) {
48. e.printStackTrace();
49. }
50. return folderList;
51. }
53. /**
54. * Get the file in byte[].
55. * @param id
56. * @return
57. */
58. public byte[] getDBFile(int id) {
59. String sqlFind = "select file from gcib where id = "+id;
60. byte[] pdf = null;
61. Connection conn = DBConnection.getConnection();
62. try {
63. Statement stmt = conn.createStatement();
64. ResultSet rs = stmt.executeQuery(sqlFind);
65. while(rs.next()){
66. pdf = rs.getBytes("file");
67. }
68. } catch (SQLException e) {
69. e.printStackTrace();
70. } catch (NullPointerException enull){
71. enull.printStackTrace();
72. }
73. return pdf;
74. }
76. /**
77. * Get the file in Blob.
78. * @param id
79. * @return
80. */
81. public Blob getDBBlobFile(int id) {
82. String sqlFind = "select file from gcib where id = "+id;
83. Blob pdf = null;
84. Connection conn = DBConnection.getConnection();
85. try {
86. Statement stmt = conn.createStatement();
87. ResultSet rs = stmt.executeQuery(sqlFind);
88. while(rs.next()){
89. pdf = rs.getBlob("file");
90. }
91. } catch (SQLException e) {
92. e.printStackTrace();
93. } catch (NullPointerException enull){
94. enull.printStackTrace();
95. }
96. return pdf;
97. }
99. /**
100. * Get the total of the records.
101. * @return
102. */
103. public int getTotal() {
104. int total = 0;
105. String sqlFind = "select count(*) from gcib ";
106. Connection conn = DBConnection.getConnection();
107. try {
108. Statement stmt = conn.createStatement();
109. ResultSet rs = stmt.executeQuery(sqlFind);
110. while(rs.next()){
111. total = rs.getInt(1);
112. }
113. } catch (SQLException e) {
114. e.printStackTrace();
115. }
116. return total;
117. }
119. /**
120. * Get the filetype of the stream for download and preview the file.
121. * @param id
122. * @return
123. */
124. public String getFileType(Integer id) {
125. String sqlFind = "select fileType from gcib where id = "+id;
126. String result = null;
127. Connection conn = DBConnection.getConnection();
128. try {
129. Statement stmt = conn.createStatement();
130. ResultSet rs = stmt.executeQuery(sqlFind);
131. while(rs.next()){
132. result = rs.getString("fileType");
133. }
134. } catch (SQLException e) {
135. e.printStackTrace();
136. } catch (NullPointerException enull){
137. enull.printStackTrace();
138. }
139. return result;
140. }
142. /**
143. * To check the string whether is empty.
144. * @param para
145. * @return
146. */
147. private boolean isEmpty(String para){
148. return null==para || para.length()==0;
149. }
150. }

/**
 * Manage the GCIB object.
 * @author Victor
 */
public class GcibDAO {
	/**
	 * Get the search result with pagination.
	 * @param paraMap
	 * @param start
	 * @param end
	 * @return
	 */
	public List<Gcib> getGcibList(Map<String,Object> paraMap,int start, int end) {
		List<Gcib> folderList = new ArrayList<Gcib>();
		String sql = "select id,name,filetype from gcib where 1=1 ";
		//search conditions in where statement. 
		String idPara = (String)paraMap.get("idPara");
		String namePara = (String)paraMap.get("namePara");
		//flexigrid order.
		String sortname = (String)paraMap.get("sortname");
		String sortorder = (String)paraMap.get("sortorder");
		String orderSQL = "";	 //record order statement.
		if(!this.isEmpty(sortname)||!this.isEmpty(sortorder)){
			orderSQL= " order by " + sortname+" "+sortorder;
		}
		sql = sql+(!this.isEmpty(idPara)?" and id ="+idPara :"");
		sql = sql+(!this.isEmpty(namePara)?" and name ='"+namePara+"'":"");
		sql = sql + orderSQL;
		sql = sql + " limit "+start+","+end+"";
		Connection connect = DBConnection.getConnection();
		Statement stmt = null;
		try {
			stmt = connect.createStatement();
			ResultSet rs = stmt.executeQuery(sql);
			while(rs.next()){
				Gcib gcib = new Gcib();
				Integer idInt = rs.getInt("id");
				gcib.setId(idInt);
				gcib.setName(rs.getString("name"));
				gcib.setFiletype(rs.getString("filetype"));
				//String url = "<a href=\"/blank/SearchAction.do?method=showPDFandIMG&fileID="+idInt.toString()+"\" traget=\"_black\"\"><font color=\'blue\'>预览</font></a>";
				//如果使用window.showModalDialog方法弹出下载文件，在IE中不好用。所以使用window.open或者上面的方法。 
				String url = "<a href=\"javascript:onClick=GCIB.showObject(\'"+idInt.toString()+"\')\"><font color=\'blue\'>预览</font></a>";
				gcib.setUrl(url);
				folderList.add(gcib);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return folderList;
	}
	
	/**
	 * Get the file in byte[].
	 * @param id
	 * @return
	 */
	public byte[] getDBFile(int id) {
		String sqlFind = "select file from gcib where id = "+id;
		byte[] pdf = null;
		Connection conn = DBConnection.getConnection();
		try {
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery(sqlFind);
			while(rs.next()){
				pdf = rs.getBytes("file");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (NullPointerException enull){
			enull.printStackTrace();
		}
		return pdf;
	}

	/**
	 * Get the file in Blob.
	 * @param id
	 * @return
	 */
	public Blob getDBBlobFile(int id) {
		String sqlFind = "select file from gcib where id = "+id;
		Blob pdf = null;
		Connection conn = DBConnection.getConnection();
		try {
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery(sqlFind);
			while(rs.next()){
				pdf = rs.getBlob("file");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (NullPointerException enull){
			enull.printStackTrace();
		}
		return pdf;
	}	
	
	/**
	 * Get the total of the records.
	 * @return
	 */
	public int getTotal() {
		int total  = 0;
		String sqlFind = "select count(*) from gcib ";
		Connection conn = DBConnection.getConnection();
		try {
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery(sqlFind);
			while(rs.next()){
				total = rs.getInt(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return total;
	}
	
	/**
	 * Get the filetype of the stream for download and preview the file. 
	 * @param id
	 * @return
	 */
	public String getFileType(Integer id) {
		String sqlFind = "select fileType from gcib where id = "+id;
		String result = null;
		Connection conn = DBConnection.getConnection();
		try {
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery(sqlFind);
			while(rs.next()){
				result = rs.getString("fileType");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (NullPointerException enull){
			enull.printStackTrace();
		}
		return result;
	}
	
	/**
	 * To check the string whether is empty.
	 * @param para
	 * @return
	 */
	private boolean isEmpty(String para){
		return null==para || para.length()==0;
	}	
}

这里我使用的是Json-lib插件获取JSONObejct。需要注意的是，要导入如下包到Lib中。
Json-lib jar
jakarta commons-lang 2.5
jakarta commons-beanutils 1.8.0
jakarta commons-collections 3.2.1
jakarta commons-logging 1.1.1
ezmorph 1.0.6

Searchaction.java代码

1. /**
2. * Action class to search records and show file.
3. * @author Victor
4. */
5. public class SearchAction extends DispatchAction{
6. /**
7. * Search method.
8. * @param mapping
9. * @param form
10. * @param request
11. * @param response
12. */
13. public void getList(ActionMapping mapping, ActionForm form,
14. HttpServletRequest request, HttpServletResponse response) {
15. PrintWriter writer = null;
16. JSONObject result = new JSONObject();
17. response.setContentType("text/json");
18. String idPara = request.getParameter("idPara"); //APP search condition.
19. String namePara = request.getParameter("namePara"); //APP search condition.
20. String sortname = request.getParameter("sortname"); //flexigrid's attribute.
21. String sortorder = request.getParameter("sortorder"); //flexigrid's attribute.
22. /*
23. String query = request.getParameter("query"); //flexigrid's query attribute.
24. String qtype = request.getParameter("qtype"); //flexigrid's query attribute.
25. */
26. try {
27. request.setCharacterEncoding("UTF-8");
28. response.setCharacterEncoding("UTF-8");
29. writer = response.getWriter();
30. Map<String,Object> paraMap = new HashMap<String,Object>();
31. paraMap.put("idPara", idPara);
32. paraMap.put("namePara", namePara);
33. paraMap.put("sortname", sortname);
34. paraMap.put("sortorder", sortorder);
35. GcibDAO dao = new GcibDAO();
36. int page = Integer.valueOf(StringUtils.defaultIfEmpty(request.getParameter("page"),"1"));
37. int rp = Integer.valueOf(StringUtils.defaultIfEmpty(request.getParameter("rp"),"10"));
38. int start = (page - 1) * rp;
39. int end = start + rp;
40. int total = dao.getTotal();
41. List<?> demoList = new ArrayList<Gcib>();
42. demoList = dao.getGcibList(paraMap,start, end);
43. result.put("rows", demoList);
44. result.put("total", total);
45. result.put("page", page);
46. result.put("rp", rp);
47. }catch (Exception e) {
48. e.printStackTrace();
49. } finally {
50. //IMPORTANT: this statement is very important for flexigrid. if without this, there will show nothing in the grid.
51. writer.println(result.toString());
52. writer.flush();
53. writer.close();
54. }
55. }
57. /**
58. * Show file method. For now.
59. * @param mapping
60. * @param form
61. * @param request
62. * @param response
63. * @return
64. * @throws IOException
65. */
66. public ActionForward showPDFandIMG(ActionMapping mapping, ActionForm form,
67. HttpServletRequest request, HttpServletResponse response)
68. throws IOException {
69. OutputStream out = new BufferedOutputStream(response.getOutputStream());
70. GcibDAO dao = new GcibDAO();
71. String fileName = "FileName";
72. String fileType = "";
73. Blob blob = dao.getDBBlobFile(new Integer(request.getParameter("fileID")));
74. fileType = dao.getFileType(new Integer(request.getParameter("fileID")));
75. fileName = fileName + fileType;
76. try {
77. //stop IE cookie
78. /*response.setHeader("pragma", "no-cache");
79. response.setHeader("Cache-Control", "no-cache");
80. response.setDateHeader("Expires", 0);*/
81. response.reset();
82. response.setCharacterEncoding("UTF-8");
83. response.setHeader("Content_Length", new Long(blob.length()).toString());
84. if (fileType.contains("pdf")) {
85. response.setContentType("application/pdf;charset=UTF-8");
86. }
87. if (fileType.contains("jpg")||fileType.contains("jpeg")) {
88. response.setContentType("image/*;charset=UTF-8");
89. }
90. //IMPORTANT: different browser different ways to deal file download and preview.
91. String agent = request.getHeader("USER-AGENT");
92. if(agent.indexOf("MSIE")==-1){
93. String enableName = new String(fileName.getBytes("UTF-8"),"ISO-8859-1");
94. //IMPORTANT: attachment mean download the file；inline mean open file in browser.
95. response.setHeader("Content-Disposition","inline; filename=" + enableName );
96. }else{
97. response.setHeader("Content-Disposition","inline; filename=" + java.net.URLEncoder.encode(fileName,"UTF-8") );
98. }
99. BufferedInputStream in = new BufferedInputStream(blob.getBinaryStream());
100. byte[] data = new byte[1024];
101. long k = 0;
102. while (k<blob.length()) {
103. int j = in.read(data, 0, 1024);
104. k+=j;
105. out.write(data, 0, j);
106. }
107. out.flush();
108. in.close();
109. out.close();
110. }
111. catch (SQLException e) {
112. e.printStackTrace();
113. }
114. return null;
115. }
116. }

/**
 * Action class to search records and show file.
 * @author Victor
 */
public class SearchAction extends  DispatchAction{
	/**
	 * Search method.
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 */
	public void getList(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		PrintWriter writer = null;
        JSONObject result = new JSONObject();
        response.setContentType("text/json");
        String idPara = request.getParameter("idPara");	//APP search condition.
        String namePara = request.getParameter("namePara");	  //APP search condition.
        String sortname = request.getParameter("sortname");  //flexigrid's attribute.
        String sortorder = request.getParameter("sortorder");	//flexigrid's attribute.
        /*
         String query = request.getParameter("query");   //flexigrid's query attribute.
         String qtype = request.getParameter("qtype");   //flexigrid's query attribute.
         */       
        try {
        	request.setCharacterEncoding("UTF-8");
			response.setCharacterEncoding("UTF-8");
            writer = response.getWriter();
            Map<String,Object> paraMap = new HashMap<String,Object>();
            paraMap.put("idPara", idPara);
            paraMap.put("namePara", namePara);
            paraMap.put("sortname", sortname);
            paraMap.put("sortorder", sortorder);
		    GcibDAO dao = new GcibDAO();
            int page = Integer.valueOf(StringUtils.defaultIfEmpty(request.getParameter("page"), "1"));
            int rp = Integer.valueOf(StringUtils.defaultIfEmpty(request.getParameter("rp"), "10"));
            int start = (page - 1) * rp;
            int end = start + rp;
	        int total = dao.getTotal(); 
		    List<?> demoList = new ArrayList<Gcib>();
		    demoList = dao.getGcibList(paraMap,start, end);
            result.put("rows", demoList);
            result.put("total", total);
            result.put("page", page);
            result.put("rp", rp);
        }catch (Exception e) {
        	e.printStackTrace();
        } finally {
        	//IMPORTANT: this statement is very important for flexigrid. if without this, there will show nothing in the grid.
            writer.println(result.toString());	
            writer.flush();
            writer.close();
        }
	}

	/**
	 * Show file method. For now.
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws IOException
	 */
	public ActionForward showPDFandIMG(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		OutputStream out = new BufferedOutputStream(response.getOutputStream());
		GcibDAO dao = new GcibDAO();
		String fileName = "FileName";
		String fileType = "";
		Blob blob = dao.getDBBlobFile(new Integer(request.getParameter("fileID")));
		fileType = dao.getFileType(new Integer(request.getParameter("fileID")));
		fileName = fileName + fileType;
		try {
			//stop IE cookie
			/*response.setHeader("pragma", "no-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);*/
			response.reset();
			response.setCharacterEncoding("UTF-8");
			response.setHeader("Content_Length", new Long(blob.length()).toString());
			if (fileType.contains("pdf")) {
				response.setContentType("application/pdf;charset=UTF-8");
			}
			if (fileType.contains("jpg")||fileType.contains("jpeg")) {
				response.setContentType("image/*;charset=UTF-8");
			}
			//IMPORTANT: different browser different ways to deal file download and preview. 
			String agent = request.getHeader("USER-AGENT");
			if(agent.indexOf("MSIE")==-1){
				String enableName = new String(fileName.getBytes("UTF-8"),"ISO-8859-1");
				//IMPORTANT: attachment mean download the file；inline mean open file in browser.
				response.setHeader("Content-Disposition","inline; filename=" + enableName );
			}else{
				response.setHeader("Content-Disposition","inline; filename=" + java.net.URLEncoder.encode(fileName,"UTF-8") );
			}
			BufferedInputStream in = new BufferedInputStream(blob.getBinaryStream());
			byte[] data = new byte[1024];
			long k = 0;
			while (k<blob.length()) {
				int j = in.read(data, 0, 1024);
				k+=j;
				out.write(data, 0, j);
			}
			out.flush();
			in.close();
			out.close();
		}
		 catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}	
}

3.前台页面及JS文件

到Flexigrid官网下载插件，并集成到项目中。

Search.jsp代码

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2. <%
3. String webPath = request.getContextPath();
4. %>
5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
6. <html>
7. <head>
8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9. <title>Search Page.</title>
10. <link rel="stylesheet" type="text/css" href="<%=webPath%>/View/common/Flexigrid-master/css/flexigrid.pack.css" />
11. <script type="text/javascript" src="<%=webPath%>/View/common/Flexigrid-master/js/jquery-1.6.3.js"></script>
12. <script type="text/javascript" src="<%=webPath%>/View/common/Flexigrid-master/js/flexigrid.pack.js"></script>
13. <script type="text/javascript">
14. var webpath = "<%=webPath%>";
15. var $jQuery = $;
16. </script>
17. <script type="text/javascript" src="<%=webPath%>/View/search.js"></script>
18. </head>
20. <body>
21. <div style="align:center;margin:0 auto;width:800px">
22. <div align="center" style="margin-top:20px">
23. <form id="queryForm" name="queryForm">
24. <table>
25. <tr>
26. <th align="center" colspan="2">Search conditions.</th>
27. </tr>
28. <tr>
29. <td align="right">id:</td>
30. <td align="left"><input type="text" id="idPara" name="idPara" /></td>
31. </tr>
32. <tr>
33. <td align="right">name:</td>
34. <td align="left"><input type="text" id="namePara" name="namePara" /></td>
35. </tr>
36. <tr>
37. <td align="center" colspan="2">
38. <span><input type="button" id="queryBtn" value="查询"></span>
39. <span><input type="reset" id="resetBtn" value="重置"></span></td>
40. </tr>
41. <tr>
42. <td align="center" colspan="2"><font size="2">Please input your conditions to have a search, <br/>and the result will showed below.</font></td>
43. </tr>
44. </table>
45. </form>
46. </div>
47. <!-- 考虑到FLEXIGRID对IE浏览器的兼容，这里需要为Table加上div标签，否则在IE中会产生JS错误。 -->
48. <div id="divTable">
49. <table id="gcibTable" style="display: none;"></table>
50. </div>
51. </div>
52. </body>
53. </html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String webPath = request.getContextPath();
%>
<!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>Search Page.</title>
	<link rel="stylesheet" type="text/css" href="<%=webPath%>/View/common/Flexigrid-master/css/flexigrid.pack.css" />
	<script type="text/javascript" src="<%=webPath%>/View/common/Flexigrid-master/js/jquery-1.6.3.js"></script>
	<script type="text/javascript" src="<%=webPath%>/View/common/Flexigrid-master/js/flexigrid.pack.js"></script>
	<script type="text/javascript">
        var webpath = "<%=webPath%>";
        var $jQuery = $;
    </script>
	<script type="text/javascript" src="<%=webPath%>/View/search.js"></script>
</head>

<body>
	<div style="align:center;margin:0 auto;width:800px">
		<div align="center" style="margin-top:20px">
		<form id="queryForm" name="queryForm">
			<table>
				<tr>
					<th align="center" colspan="2">Search conditions.</th>
				</tr>
				<tr>
					<td align="right">id:</td>
					<td align="left"><input type="text" id="idPara" name="idPara" /></td>
				</tr>
				<tr>
					<td align="right">name:</td>
					<td align="left"><input type="text" id="namePara" name="namePara" /></td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<span><input type="button" id="queryBtn" value="查询"></span>
						<span><input type="reset" id="resetBtn" value="重置"></span></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><font size="2">Please input your conditions to have a search, <br/>and the result will showed below.</font></td>
				</tr>
			</table>
		</form>
		</div>
		<!-- 考虑到FLEXIGRID对IE浏览器的兼容，这里需要为Table加上div标签，否则在IE中会产生JS错误。 -->
		<div id="divTable">
			<table id="gcibTable" style="display: none;"></table>
		</div>
	</div>
</body>
</html>

Search.js代码

1. var GCIB = new Object();
3. $jQuery().ready(function() {
4. //bind search button to FLEXIGRID.
5. $jQuery("#queryBtn").bind("click",GCIB.getList);
6. });
8. GCIB.getList = function(){
9. //search conditions parameters.
10. var params = [ {"name" : "idPara","value" : $jQuery("#idPara").val()},
11. {"name" : "namePara","value" : $jQuery("#namePara").val()} ];
12. $jQuery('#gcibTable').flexOptions({params : params, newp :1}).flexReload();
14. $("#gcibTable").flexigrid(
15. {
16. url: webpath+'/SearchAction.do?method=getList',
17. dataType: 'json',
18. colModel : [
19. {display: '编号', name : 'id', width:100, sortable: true, align: 'center'},
20. {display: '文件名称', name : 'name', width:200, sortable: true, align: 'center'},
21. {display: '文件类型', name : 'filetype', width:200, sortable: true, align: 'center'},
22. {display: '操作', name : 'url', width:100, sortable: false, align: 'center'}
23. ],
24. checkbox : false,
25. sortname: "id",
26. sortorder: "asc",
27. usepager: true,
28. title: 'Results.',
29. useRp: true,
30. rp: 10,
31. showTableToggleBtn: true,
32. height:400,
33. width:800
34. }
35. );
36. };
38. //show the file which from database.
39. GCIB.showObject= function(picId){
40. var url = webpath + '/SearchAction.do?method=showPDFandIMG&fileID=' + picId;
41. url=encodeURI(url);
42. //注释掉下面两行模态窗口代码，因为IE无法下载或显示流文件（其他浏览器ModalDialog可以）
43. //var openStyle = "dialogHeight:600px; dialogWidth:800px; status:no; help:no; scroll:auto";
44. //window.showModalDialog(url, window.document, openStyle);
45. var name = 'ShowPDF'; //open的网页名称，可为空; 但是不能有特殊字符，甚至连空格都不能有。否则会包参数无效JS错误。
46. var iWidth = 800; ;
47. var iHeight = 600;
48. var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
49. var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
50. var properties = "height="+iHeight+",width="+iWidth+",top="+iTop+",left="+iLeft+",toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no";
51. window.open(url, name, properties);
52. };