Jquery flexgrid学习笔记（二）

最新推荐文章于 2015-12-30 15:10:00 发布

fangbubu

最新推荐文章于 2015-12-30 15:10:00 发布

阅读量111

点赞数

分类专栏： Jquery 文章标签： jQuery json JSP JavaScript CSS ViewUI

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

之前的学习笔记(一)是直接在一个已经写死了的table中实现的，现在我们来实现动态数据的调用。

现在我们来实现一个使用ajax动态调用后台产生的数据来填充table的内容的小例子。

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!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>flexgrid Test</title>
<link rel="stylesheet" href="../css/flexigrid/flexigrid.css"
	type="text/css"></link>
<script type="text/javascript" src="../lib/jquery/jquery.js"></script>
<script type="text/javascript" src="../flexigrid.js"></script>
<script type="text/javascript">

	$().ready(function() {
		$(".flex2").flexigrid
		(
		{
		url: 'post.jsp',
		dataType: 'json',
		colModel : [
			{display: '操作', name : 'operation', width : 60, sortable : true, align: 'center'},
			{display: '编号', name : 'id', width : 60, sortable : true, align: 'center'},
			{display: '姓名', name : 'name', width : 120, sortable : true, align: 'left'},
			{display: '密码', name : 'iso3', width : 120, sortable : true, align: 'left', hide: true},
			{display: '年龄', name : 'managename', width : 120, sortable : true, align: 'left'},
			{display: '住址', name : 'data', width : 120, sortable : true, align: 'left'}
			],

		searchitems : [
			{display: '姓名', name : 'username', isdefault: true},
			{display: '住址', name : 'address'}
			],
		sortname: "id",
		sortorder: "asc",
		usepager: true,
		title: '人员管理',
		useRp: true,
		total: 10,
		rp: 10,
		showTableToggleBtn: true,
		width: 600,
		height: 300,
		procmsg: '加载中, 请稍等 ...'
		}
		);

	});
</script>
</head>
<body>
<input id="hidden" type="hidden" name="hidden" value="null" />
<table class="flex2" ></table>
</body>
</html>

这个是我们页面的代码

和之前的简单例子相比，区别有两个

1.我们要生成的table只需要给出一个

<table class="flex2" ></table>

table标签即可，table内部的结构和数据均交给js来生成

2.参数需要配置 url: 'post.jsp',

PS：这里我只是为了表现下一个例子，就没有把后台写的很完整，只是用ajax请求了一个jsp页面，在jsp页面构造了一个json结构的数据回来

post.jsp的内容如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:directive.page import="javabean.Student" />
<%
	System.out
			.println("--------------------post.jsp----------------------");

	System.out.println("rp==" + request.getParameter("rp"));
	System.out.println("sortorder=="
			+ request.getParameter("sortorder"));
	System.out.println("sortname==" + request.getParameter("sortname"));
	System.out.println("page==" + request.getParameter("page"));
	System.out.println("query==" + request.getParameter("query"));
	System.out.println("qtype==" + request.getParameter("qtype"));
	String rp = request.getParameter("rp"); //每页显示的数据数
	String pageString = request.getParameter("page");//获取 flexgrid传过来的页数。
	int total = 100;
	int rpint = Integer.parseInt(rp);
	int pageint = Integer.parseInt(pageString);
	//-------------------------组成返回的数据----------------------------
	List<Student> custList = new ArrayList<Student>();//定义一个list

	for (int j = rpint * (pageint - 1) + 1; j < pageint * rpint + 1; j++) {
		if (j > total)
			break;
		Student Student = new Student();
		Student.setId(j);
		Student.setAge(20 + j);
		Student.setAddress("深圳" + j);
		Student.setPassword("112233#" + j);
		Student.setUsername("张三" + j);

		custList.add(Student);
	}

	String a = "";//用来拼接数据
	int list_size = custList.size();

	if (list_size > 0) {
		for (int i = 0; i < list_size; i++) {
			Student student = custList.get(i);
			a = a
			+ "{id:'ZW',cell:['<img src=/myProject/flexigrid/accept.png >','"
			+ student.getId() + "','" + student.getUsername()
			+ "','" + student.getPassword() + "','"
			+ student.getAge() + "','" + student.getAddress()
			+ "']},";
		}
	} else {
		a = ",";
	}
	a = a.substring(0, a.length() - 1);

	out.println("{");
	out.println("page: " + pageString + ",");
	out.println("total: " + total + ",");
	out.println("rows: [");
	out.println(a);
	out.println("]}");
%>

flexgrid在每一次点击排序，查询，翻页等动作的时候均会调用url指向的链接，进入链接方法，我们可以看到request中可以取到页面上的一些参数，默认的貌似就这6个，分别是需要排序的表格头id,排序的方式，分页大小，分页的第几页，查询的条件，查询的输入内容，根据这些参数，我们可以在后台组成各种各样的数据集，最后采用json的方式传递出去。

页面接到传递过来的json数据，按照json中数据的顺序，顺次显示在table标签内。

json构成的时候一些描述是固定的，譬如page,total,rows,cell等，不能写错了。

由于json中的内容均是string格式的，我们可以直接写上string格式的html，页面解释的时候就可以输出除了文本外的一些其他格式，譬如我这个例子里面，第一列在页面上显示的就是一个img.