jquery grid插件 Flexigrid + servlet

ynial

浏览: 228097 次
来自: ...

最近访客更多访客>>

郑钻哲

AlphaPay

345127857

wangchao_HB

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

Servlet jQuery json Ajax SQL

前些日子写了个源于jquery grid插件Flexigrid 算不上例子的一片文章。
为了能更快的使用这个东东。。今天做了一个相对比较详细的例子.
对一个工作信息表操控的例子。

第一步：创建数据库

/*
MySQL Data Transfer
Source Host: localhost
Source Database: spiderdata
Target Host: localhost
Target Database: spiderdata
Date: 2008/9/2 10:42:51
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for job_info1
-- ----------------------------
CREATE TABLE `job_info1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `job_name` varchar(255) DEFAULT NULL,
  `company_email` text,
  `date` varchar(255) DEFAULT NULL,
  `work_address` varchar(255) DEFAULT NULL,
  `number` varchar(255) DEFAULT NULL,
  `work_limit` varchar(255) DEFAULT NULL,
  `level` varchar(255) DEFAULT NULL,
  `salary` varchar(255) DEFAULT NULL,
  `job_id` varchar(255) DEFAULT NULL,
  `description` mediumtext,
  `language` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `jobid` (`job_id`)
) ENGINE=InnoDB AUTO_INCREMENT=42234 DEFAULT CHARSET=utf8;

sql 文件在附件中
第二步：下载Flexigrid 插件
http://www.webplicity.net/flexigrid/
第三步：解压下载后的zip文件到你的web工程中

第四步：编写jsp代码

<%@page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Flexigrid测试</title>
		<link rel="stylesheet" href="style.css" />
		<link rel="stylesheet" type="text/css"
			href="css/flexigrid/flexigrid.css">
		<script type="text/javascript" src="lib/jquery/jquery.js"></script>
		<script type="text/javascript" src="flexigrid.js"></script>
	</head>
	<body>
		<table id="flex1" style="display: none"></table>
		<script type="text/javascript">
			$("#flex1").flexigrid
			(
			{
			url: 'http://localhost:8080/Flexigrid/DBServlet',
			dataType: 'json',
			colModel : [
				{display: 'ID', name : 'jobid', width : 10, sortable : true, align: 'center'},
				{display: '职位名称', name : 'job_name', width : 180, sortable : true, align: 'left'},
				{display: '工作地点', name : 'work_address', width : 80, sortable : true, align: 'left'},
				{display: '工作年限', name : 'work_limit', width : 80, sortable : true, align: 'left'},
				{display: '薪金', name : 'salary', width : 80, sortable : true, align: 'left'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: '职位名称', name : 'jobtitle'},
				{display: '地点', name : 'workplace', isdefault: true}
				],
			usepager: true,
			title: '最新职位',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);
			
			function test(com,grid)
			{
				if (com=='Delete')
					{
						confirm('Delete ' + $('.trSelected',grid).length + ' items?')
					}
				else if (com=='Add')
					{
						alert('Add New Item');
					}			
			}

		</script>
	</body>

以上代码相关参数讲解：

第五步：后台访问数据库代码以及生成json字符串代码

package com.url.db;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.sql.DataSource;

import org.apache.commons.dbcp.BasicDataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.MapHandler;
import org.apache.commons.dbutils.handlers.MapListHandler;

import com.url.ajax.json.JSONObject;

public class DBTest {
	
	/**
	 * 简单的数据库连接
	 * @return
	 */
    public static DataSource setupDataSource() {
        BasicDataSource ds = new BasicDataSource();
        ds.setDriverClassName("com.mysql.jdbc.Driver");
        ds.setUsername("root");
        ds.setPassword("password");
        ds.setUrl("jdbc:mysql://localhost:3306/spiderdata?useUnicode=true&amp;characterEncoding=utf-8");
        return ds;
    }
    /**
     * 按相关条件查询数据
     * @param startIndex
     * @param maxResult
     * @return
     */
    @SuppressWarnings("unchecked")
	public List getJobInfo(int startIndex, int maxResult) {
    	QueryRunner queryRunner = new QueryRunner(setupDataSource());
    	String sql = "select * from job_info1 limit ?, ?";
    	List joblist = null;
		try {
			joblist = (List)queryRunner.query(sql, new Object[]{startIndex, maxResult}, new MapListHandler());
		} catch (SQLException e) {
			e.printStackTrace();
		}
    	return joblist;
    }
    
    /**
     * 计算总数据量
     * @return
     */
    @SuppressWarnings("unchecked")
	public long getJobCount() {
    	String sql = "select count(*) as num from job_info1";
    	QueryRunner queryRunner = new QueryRunner(setupDataSource());
    	long count = 0L;
    	try {
    		Map map = (Map)queryRunner.query(sql, new MapHandler());
    		count  = (Long)map.get("num");
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return count;
    }
    /**
     * 产生json字符串
     * @param list
     * @param pageInfo
     * @return
     */
    @SuppressWarnings("unchecked")
    public String getJsonString(List list, Map pageInfo) {
    	List mapList = new ArrayList();   
    	for(int i = 0; i < list.size(); i++) {
    		Map cellMap = new HashMap();
    		cellMap.put("id", ((Map)list.get(i)).get("id"));
    		cellMap.put("cell", new Object[] {((Map)list.get(i)).get("id"), ((Map)list.get(i)).get("job_name"), ((Map)list.get(i)).get("work_address"), ((Map)list.get(i)).get("work_limit"), ((Map)list.get(i)).get("salary")});   
    		mapList.add(cellMap);
    	}
    	pageInfo.put("rows", mapList);
    	JSONObject object = new JSONObject(pageInfo);
    	return object.toString();
    }
    
    /**
     * 测试。。。。。
     * @param args
     */
    @SuppressWarnings("unchecked")
	public static void main(String[] args) {
    	DBTest test = new DBTest();
		Map pageInfo = new HashMap();   
		pageInfo.put("page", 2);   
		pageInfo.put("total", 200);  
    	System.out.println(test.getJsonString(test.getJobInfo(0, 3), pageInfo));

	
	}
 
}

以上代码测试后得到的json字符串

{"total":200,"page":2,"rows":[{"id":1,"cell":[1,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":2,"cell":[2,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":3,"cell":[3,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]}]}

第六步：后台servlet处理

本部分代码值得注意的是 你后台接受ajax请求是post提交上来的，所以在servlet里的post方法中处理。如果你使用的其他的web框架 可以不用考虑
package com.url.servlet;

import java.io.IOException;
import java.util.HashMap;
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.url.db.DBTest;

public class DBServlet extends HttpServlet {

	public DBServlet() {
		super();
	}


	public void destroy() {
		super.destroy(); 
	
	}

	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//得到当前页数
		String page = request.getParameter("page");
		//得到每页显示行数
		String maxResult = request.getParameter("rp");
		//计算查询开始数据下标
		int startIndex = (Integer.parseInt(page) - 1) * Integer.parseInt(maxResult);
		//数据操控对象昂
		DBTest dbTest = new DBTest();
		//创造json所需的Map（此处代码可使用StringBuffer 拼接json字符串代替，但这种做法比较繁琐）
		Map pageInfo = new HashMap();
		//当前页数设置
		pageInfo.put("page", page);
		//总数据量设置
		pageInfo.put("total", dbTest.getJobCount());
		//生成json字符串
		String jsonStr = dbTest.getJsonString(dbTest.getJobInfo(startIndex, Integer.parseInt(maxResult)), pageInfo);
		//response 相关处理
		response.setContentType("html/txt");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache, must-revalidate");
		response.setHeader("Pragma", "no-cache");
		try {
			response.getWriter().write(jsonStr);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
}

第七步：测试你的代码

第九步：本例代码下载：）祝你好运
http://ynial.iteye.com/upload/attachment/37213/beaacf16-831a-33b2-b960-09d028d13668.rar

Flexigrid.rar (840.6 KB)
下载次数: 2918

查看图片附件

16
顶

3
踩

分享到：

fedora 下安装 telnet server | jquery grid插件 Flexigrid

2008-09-02 10:50
浏览 17310
评论(19)
分类:Web前端
查看更多

19 楼 l932 2013-09-24

下载了源代码，导入工程，启动之后，表格只显示“Processing, please wait ..”
我在Servlet的doPost方法第一行System.out.print的语句都出不来
页面是不是根本就没调用url啊
我用ie10和chrome

18 楼 java_MagicWang 2012-06-29

chinajj 写道

//add search box
g.sDiv.className = 'sDiv';
/* ********************************* 原来的代码注释掉
sitems = p.searchitems;
var sopt = "";
for (var s = 0; s < sitems.length; s++)
{
if (p.qtype=='' && sitems[s].isdefault==true)
{
p.qtype = sitems[s].name;
sel = 'selected="selected"';
} else sel = '';
sopt += "<option value='" + sitems[s].name + "' " + sel + " >" + sitems[s].display + "  </option>";
}
if (p.qtype=='') p.qtype = sitems[0].name;
$(g.sDiv).append("<div class='sDiv2'>Quick Search <input type='text' size='30' name='q' class='qsbox' /> <select name='qtype'>"+sopt+"</select> <input type='button' value='Clear' /></div>"); $('input[name=q],select[name=qtype]',g.sDiv).keydown(function(e){if(e.keyCode==13) g.doSearch()});
$('input[value=Clear]',g.sDiv).click(function(){$('input[name=q]',g.sDiv).val(''); p.query = ''; g.doSearch(); });
$('input[value=Clear]',g.sDiv).click(function(){$('input[name=q]',g.sDiv).val(''); p.query = ''; });
原来的代码注释掉 ********************************** */

$(g.sDiv).append("<div class='sDiv2'><form id='searchForm'></form></div>");
p.searchitems(g);
$(g.bDiv).after(g.sDiv);

这里需要注意：<form id='searchForm'></form> 的内容需要另外填充进去，我的做法是页面其它部分的js再生成一个ajax请求，把我后台设定好的搜索项目表单域组合填充进去。

chinajj 写道

if (p.page>p.pages) p.page = p.pages;
//var param = {page:p.newp, rp: p.rp, sortname: p.sortname, sortorder: p.sortorder, query: p.query, qtype: p.qtype};
/* ******************************** 原来的代码注释掉
var param = [
{ name : 'page', value : p.newp }
,{ name : 'rp', value : p.rp }
,{ name : 'sortname', value : p.sortname}
,{ name : 'sortorder', value : p.sortorder }
,{ name : 'query', value : p.query}
,{ name : 'qtype', value : p.qtype}

];
if (p.params)
{
for (var pi = 0; pi < p.params.length; pi++) param[param.length] = p.params[pi];
}
原来的代码注释掉 ************************ */

var u="&page="+p.newp+"&rp="+p.rp+"&sortname="+p.sortname+"&sortorder="+p.sortorder;
$.ajax({
type: p.method,
/* ***** 原来的代码注释掉
url: p.url,
data: param,
原来的代码注释掉 **** */
url: p.url+u,
data: $("form:first",g.sDiv).formHash(),
dataType: p.dataType,
success: function(data){g.addData(data);},
error: function(data) { try { if (p.onError) p.onError(data); } catch (e) {} }
});
就是把它以前ajx提交的 data 都换成 url参数提交，反正他以前要提交的参数是固定的。
把最终ajax要提交的 data 换成我的搜索表单的内容。 $("form:first",g.sDiv).formHash()这里使用了另外一个jquery插件http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm的jquery.field.js 来取得搜索表单的hash，比较方便。jquery.field.js 里面作者有个明显的手误。呵呵，并且取型如 user.name 就是带.的表单的域的值的会有问题，取不出来值，也得做些小改

能告诉我jquery.field.js你是怎么改的吗？我遇到了这个问题，不能以对象的方式传，QQ416263135，非常感谢

17 楼 hanguokai1987 2012-02-23

很好！但是代码只能借鉴！挺不错的！

16 楼劉罡 2010-06-25

请问表头排序应该怎么做?
sortable:true设置了,但是没有排序的效果

15 楼 justdo2008 2009-09-03

您好，请我你讲解的

width: 700, 略
height: 200 略

他们可以用百分比嘛？

我把
700改为80%出错了，暂时没有找到解决办法。

请我您有好的解决办法？

谢谢

14 楼 justdo2008 2009-09-02

很不错，谢谢

13 楼 tigarlion 2008-12-26

有没有改良后的代码,能否共享一下,想在一个项目里用一下,谢谢各位!

12 楼 tcrct 2008-09-30

你好，能开放出已经修改了的js文件吗？即可以完成完整功能的。如，改页面显示数，排序，查询，分页的。如果可以，请发送到tcrct@163.com.谢谢

11 楼 playfish 2008-09-03

呵呵，一直很关注jqeury的grid插件，非常期待您的进一步改进。

10 楼 ynial 2008-09-03

to java.hero 互相学习~ ：）互相交流

9 楼 java.hero 2008-09-03

学习呵呵，期待交流

8 楼 ynial 2008-09-02

等我抽点时间把你的代码加上 ~ ：）

7 楼 chinajj 2008-09-02

6 楼 chinajj 2008-09-02

5 楼 chinajj 2008-09-02

两处大改动。基本思路是把它现有搜索部分干掉，换成自己的表单内容。然后再改掉它现在现有的提交数据部分，改成适合的即可。

4 楼 ynial 2008-09-02

to chinajj 可以交流一下！就像你说的那样他提供的搜索确实简单了些。我考虑在他的查询部分做一个覆盖弹出层处理！可以在弹出层上多做些查询条件这样可以方便不同的业务可以使用thickbox 或者其他的别的东西！

3 楼 ynial 2008-09-02

内存泄漏到不至于，
最关键的问题在于每次翻页的时候都需要计算一下count 这个就比较讨厌
还没有仔细看看底层的代码！希望能把这个问题搞定就好了

2 楼 chinajj 2008-09-02

最近正好使用Flexigrid做列表js，后台用springmvc做一个小项目，有机会可以交流一下。我主要把Flexigrid的搜索部分改了一下，现在的搜索太简单了。

1 楼 a3mao 2008-09-02

不知道这个控件有没有内存泄漏的问题？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论