`
victordpg
  • 浏览: 16463 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论
阅读更多

《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 ,如下:

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.配置文件

  <!-- 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>
	<!-- 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文件

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

/**
 * 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 官网下载插件,并集成到项目中。

<%@ 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>
 
var GCIB = new Object();

$jQuery().ready(function() {
	//bind search button to FLEXIGRID.
	$jQuery("#queryBtn").bind("click",GCIB.getList);
});

GCIB.getList = function(){
	//search conditions parameters.
	var params = [	{"name" : "idPara", "value" : $jQuery("#idPara").val()},
	              			{"name" : "namePara", "value" : $jQuery("#namePara").val()} ];        
	$jQuery('#gcibTable').flexOptions({params : params, newp : 1}).flexReload();
	
	$("#gcibTable").flexigrid(
	        {
	            url: webpath+'/SearchAction.do?method=getList',
	            dataType: 'json',
	            colModel : [
	                {display: '编号', name : 'id', width: 100, sortable: true, align: 'center'},        
	                {display: '文件名称', name : 'name', width: 200, sortable: true, align: 'center'},
	                {display: '文件类型', name : 'filetype', width: 200, sortable: true, align: 'center'}, 
	                {display: '操作', name : 'url', width: 100, sortable: false, align: 'center'}
	                ],    
	            checkbox : false,
	            sortname: "id",
	            sortorder: "asc",
	            usepager: true,
	            title: 'Results.',
	            useRp: true,
	            rp: 10,            
	            showTableToggleBtn: true,
	            height:400,
	            width:800
	            }
	        );
};

//show the file which from database.	
GCIB.showObject= function(picId){
	var url = webpath + '/SearchAction.do?method=showPDFandIMG&fileID=' + picId;
    url=encodeURI(url); 
    //注释掉下面两行模态窗口代码,因为IE无法下载或显示流文件(其他浏览器ModalDialog可以)
    //var openStyle = "dialogHeight:600px; dialogWidth:800px; status:no; help:no; scroll:auto";
    //window.showModalDialog(url, window.document, openStyle);	
    var name = 'ShowPDF'; //open的网页名称,可为空; 但是不能有特殊字符,甚至连空格都不能有。否则会包参数无效JS错误。
    var iWidth = 800; ;
    var iHeight = 600; 
    var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
    var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
    var properties = "height="+iHeight+",width="+iWidth+",top="+iTop+",left="+iLeft+",toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no";
    window.open(url, name, properties);
};

 

 

5
5
分享到:
评论

相关推荐

    Flexigrid demo

    Flexigrid demo

    Flexigrid Demo

    Flexigrid结合Struts1从Mysql数据库中读取数据,并通过Flexigrid插件进行数据的展示,同时实现预览pdf跟图片的功能。 下载完成后请仔细阅读文件中的readme.file。...希望此Demo对刚使用Flexigrid插件的朋友们有所帮助。

    Jquery Flexigrid jsp Demo

    **jQuery Flexigrid JSP Demo 知识点详解** `jQuery Flexigrid` 是一个流行的JavaScript库,用于创建数据网格,具有强大的数据管理和用户交互功能。这个Demo是将Flexigrid与Java服务器页面(JSP)结合使用的一个...

    flexigrid.js flexigrid.js flexigrid.js

    Flexigrid.js是一款开源的JavaScript库,主要用于创建可伸缩的、高度自定义的数据网格,它为Web开发者提供了强大的数据展示和操作功能。在网页应用中,数据网格是一种常见的组件,用于显示大量的结构化数据,并支持...

    jquery flexigrid

    《jQuery Flexigrid详解及其应用》 jQuery Flexigrid是一款基于jQuery库的表格插件,专为网页数据展示提供强大的功能。它具有高度可定制性,支持分页、排序、搜索以及自定义列宽,使得网页中的数据管理更加便捷和...

    FlexiGrid配置与使用

    FlexiGrid是一款基于JQuery的表格插件,用于在网页中展示数据,具有分页、排序、筛选等功能,常用于后台管理系统中数据的展示。它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式...

    jquery插件之flexigrid篇

    Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...

    flexigrid表格功能丰富

    Flexigrid是一款基于jQuery的强大的表格插件,它提供了丰富的功能和灵活的配置选项,使得在Web应用中创建和管理表格变得更为简单。在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及...

    flexigrid相关

    Flexigrid是一款基于jQuery的轻量级数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,包括排序、分页、搜索、列宽调整等,使得数据管理更加直观和高效。在“flexigrid.js”和“flexigrid.css”这...

    Flexigrid-master表格插件

    Flexigrid是一款基于jQuery的强大的表格插件,它在Web应用中被广泛使用,用于创建交互式、可自定义的网格视图。Flexigrid以其灵活性和易用性著称,能够满足各种复杂的表格需求。以下是对Flexigrid主要功能和特性的...

    Flexigrid使用实例

    7. **实例详解** 可以参考提供的链接:[http://www.cnblogs.com/ushou/p/3412241.html](http://www.cnblogs.com/ushou/p/3412241.html),该博客文章详细介绍了如何在实际项目中集成和使用Flexigrid,包括完整代码...

    jquery插件之flexigrid学习实例-jar包

    Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列宽等,极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中,我们主要关注的是如何...

    jsp中flexigrid插件在ie下样式问题

    #### 二、FlexiGrid插件简介 FlexiGrid插件基于jQuery框架,为网页提供了强大的数据展示能力,支持分页、排序等功能,并且可以通过简单的配置实现复杂的交互效果。由于其灵活性和易用性,被广泛应用于各种基于JSP...

    jquery表格插件Flexigrid

    Flexigrid是一款基于jQuery的强大的表格插件,它允许开发者将数据以美观、可操作的表格形式呈现出来,类似于知名的JavaScript框架ExtJS的表格组件。这个插件的主要优点在于其灵活性和可定制性,能够满足各种复杂的...

    FlexiGrid(js版本)

    FlexiGrid是一款基于JavaScript的强大的数据网格插件,主要用于在网页上展示大量结构化数据,提供了灵活的排序、分页、过滤和编辑功能。这款插件以其高度自定义和适应性而受到开发者的欢迎,尤其适合那些需要创建...

    jquery插件之flexigrid学习实例

    Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列显示,适用于构建数据密集型Web应用。在这个"jquery插件之flexigrid学习实例"中,我们将深入探讨如何在Struts2框架下...

    jquery flexigrid 支持前台排序

    **jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...

    Jquery flexigrid使用

    ### Jquery Flexigrid 使用详解 #### 技术栈概览 本文档旨在介绍如何结合Struts2.1.6、Spring、Hibernate、jQuery、Flexigrid、Thickbox及MySQL来实现一个功能完整的Web应用。该应用的核心是通过Flexigrid在前端...

    FlexiGrid使用手册

    二、环境准备 要使用FlexiGrid,首先需要从其官方网站(http://www.flexigrid.info/)下载最新版本的库文件。解压后,你会得到一个包含CSS样式表、JavaScript文件和图片资源的文件结构。CSS文件用于设置表格的外观,...

    Flexigrid-插件

    Flexigrid是一款基于jQuery的强大的数据网格插件,它提供了丰富的功能和自定义选项,用于在Web应用中展示和操作表格数据。这个插件的主要特点是灵活性、可扩展性和易用性,使得开发者能够轻松地创建功能完备的数据...

Global site tag (gtag.js) - Google Analytics