现在我们来实现一个使用ajax动态调用后台产生的数据来填充table的内容的小例子。
Html代码
- <%@ 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>
<%@ 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只需要给出一个
Html代码
- <table class="flex2" ></table>
<table class="flex2" ></table>
table标签即可，table内部的结构和数据均交给js来生成
2.参数需要配置 url: 'post.jsp',
PS：这里我只是为了表现下一个例子，就没有把后台写的很完整，只是用ajax请求了一个jsp页面，在jsp页面构造了一个json结构的数据回来
post.jsp的内容如下：
Html代码
- <%@ 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);
- aa = a
- + "{id:'ZW',cell:['<img src=/myProject/flexigrid/accept.png >','"
- + student.getId() + "','" + student.getUsername()
- + "','" + student.getPassword() + "','"
- + student.getAge() + "','" + student.getAddress()
- + "']},";
- }
- } else {
- a = ",";
- }
- aa = a.substring(0, a.length() - 1);
- out.println("{");
- out.println("page: " + pageString + ",");
- out.println("total: " + total + ",");
- out.println("rows: [");
- out.println(a);
- out.println("]}");
- %>
<%@ 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.
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
