jquery ui和easy ui联合使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wx5040257/article/details/83374870

本文以jquery ui中的自动完成(autocomplete)插件,  easy ui中的(tree)树形菜单插件,(grid)网格插件的综合运用为例来展示插件的魅力.

开发环境:struts2.3    jquery UI1.10.4    jdk1.7    EasyUI 1.4.5

一   插件介绍

1.1   自动完成(autocomplete)

目前Web2.0时代网络的一个重要特点就是用户体验效果更好，页面交互更多，这种特点无处不在。以百度搜索为例，如图1.1所示，百度网首页上的搜索功能就使用了自动完成技术。当用户输入任意一个信息后，自动帮助用户将与输入信息有关的数据显示在搜索框下方，以供用户选择，极大地提高了用户的使用体验度。

图1.1 百度查询自动完成效果

要想实现图1.1中自动完成功能的效果需要用到JQuery UI提供的autocomplete插件。语法如下。

 

语  法

       $(selector).autocomplete([settings]);

在语法中：

参数settings：$(selector).autocomplete()方法的参数列表，用于配置autocomlete的键值对集合。详细配置参数如表1-2和表1-3所示。

扫描二维码关注公众号，回复： 5295994 查看本文章

表1-2 autocomplete插件常用参数

参  数	说  明
String Source Array Source fLinctionSource(Object reuqest,functionresponse(Object data))	用于指定数据来源，类型为String、Array、functionString：用于Ajax请求的服务器端地址，返回Array（JSON格式）Array：字符串数组或JSON数组function(request，response)：通过request．term获得输入的值（term为默认参数名），response([Array])来提供呈现数据
Number minLength	当输入框内字符串长度达到minLength时，激活autocomplete
Boolean autoFocus	肖autocomplete选择菜单弹出时，自动选中第一个
Number delay	延迟多少毫秒激活autocomplete

表1-3 autocomplete插件常用事件

事  件	说  明
function create(Event event,Object ui)	autocomplete创建时触发，可以在此事件中，对外观进行一些控制
function  search(Event  event, Object ui)	在开始查找请求之前触发，可以在此事件中返吲false来取消请求
function open(Event event,Object ui)	autocomplete的结果列表弹出时触发
function  focus(Event  event,Obj ect ui)	autocomplete的结果列表任意一项获得焦点时触发，ui.item为获得焦点的项

续表

事  件	说  明
function  select(Event event,Object ui)	autocomplete的结果列表任意一项选中时触发，ui .item为选中的项
function close(Event event,Object ui)	autocomplete的结果列表关闭时触发
function change(Event event,Object ui)	当值改变时触发，ui.item为选中的项

了解了autocomplete插件的使用语法和常用参数列表之后，下面使用autocomplete插件实现类似百度搜索的自动完成功能，主要步骤如下。

(l)引入autocomplete插件及样式文件。

(2)定义一个输入框。

(3)定义数据来源。

(4)使用autocomplete方法，并通过其source参数指定数据来源。

 

1.2   树形菜单插件(tree)

tree插件的使用语法如下。

$("#tree").tree({...});

在语法中：

参数settings：$(selector).tree()方法的参数列表，是用于配置tree的键值对集合。详细配置参数如表1-5 -表1-7所示。

表1-5 tree插件常用参数

参数	说  明	默认值
String url	获取远程数据的URL	null
String method	获取数据的HTTP method	post
boolean animate	定义当节点展开折叠时是否显示动两效果	false
boolean checkbox	定义是否在每个节点前边显示checkbox	false
booiean cascadeCheck	定义是否级联选中	true
boolean onlyLeafCheck	定义是否只在叶节点前显示checkbox	false
boolean dnd	定义是否启用拖放	false
Array data	加载的节点数据	riull

表1-6  tree插件常用方法

方   法	说  明
loadData(data)	如载树的数据
getNode(target)	获取指定的节点对象
getData(target)	获取指定的节点数据，包括它的子节点
reload(target)	重新加载树的数据
getRoot()	获取根节点，返回节点对象
getParent(target)	获取父节点，target参数指节点的DOM对象
getChildren(target)	获取予节点，target参数指节点的DOM对象
getChecked( )	获取所有选中的节点
getSelected( )	获驭选中的节点并返回它，如果没有选中节点，就返回null
find(id)	找到指定的节点并返回此节点对缘
select(target)	选中一个节点，target参数表示节点的DOM对象
check(target)	把指定节点设置为勾选状态
uncheck(target)	把指定节点设置为未勾选状态
collapse(target)	折叠一个节点，target参数表示节点的DOM对象
expand(target)	展开一个节点，target参数表示节点的DOM对象
collapseAll(target)	折叠所有的节点
expandAll(target)	展开所有的节点
expandTo(target)	从指定节点的根部展开

续表

方  法	说  明
append(param)	追加一些子节点到一个父节点，param参数有两个特性：parent: DOM对象，追加到的父节点，如果没有分配，则追加为根节点data:数组，节点的数据
toggle(target)	切换节点的展开／折叠状态，target参数表示节点的DOM对象

表1-7  tree插件常用事件

事件	说  明
onClick(node)	当用户单击一个节点时触发，node参数包含下列属性： id:节点的id text:节点的文字 checked:节点是否被选中 attributes：节点自定义属性 target：被单目标的DOM对象
onDbIClick(node)	当用户双击一个节点时触发
onBeforeLoad(node, param)	当加载数据的请求发出前触发，返回false就取消加载动作
onLoadSuccess(node,data)	当数据加载成功时触发
onLoadError(arguments)	当数据加载失败时触发，arguments参数与JQuery．ajax的‘error’函数一样

了解了tree插件的使用语法和常用参数列表之后，接下来使用tree插件来实现树形功能菜单效果。大致实现岁骤与普通JQuery UI插件相同，这里不再赘述。

 

1.3   网格(datagrid)插件

在实际开发中，网格组件是比树形菜单使用频率更高的组件之一。接下来将向大家介绍使用easy UI中的datagrid插件实现列表展示功能，该插件使用语法如下。

语  法

$(selector).datagrid([settings]);

在语法中：

参数settings：用于配置datagrid的键值对集合。详细配置参数如表1-9 -表1-11所示。

表1-9 datagrid插件常用参数

参数	说  明	默认值
Array columns .	datagrid的colurnn的配置对象，更多详细信息参见column的特性	Null
boolean striped	若为true，则把行条纹化（即奇偶行使用不同背景色）	False
String method	请求远程数据的method类型	Post
String url	从远程站点请求数据的URL	Niill
String loadMsg	当从远程站点加载数据时，显示的提示信息	Processing. pleasewait-
boolean pagination	若为true，则在datagrid的底部显示分页栏	False
boolean rowNumbers	若为true．则显示行号的列	False
boolean singleSelect	若为true，则只允许选中一行	False
Number pageNumber	当设置了paglnation特性时，初始化页码	l
Number pageSize	当设置了pagination特性时，初始化页码尺寸	10
Array pageList	当设置了pagination特性时，初始化页面尺寸的选择列表	[10,20,30j40,50]
function rowStyler	返回如'background：red'的样式，该函数需要两个参数： rowIndex：行的索引，从O开始 rowData：此行相应的记录
function loadFilter	返回过滤的数据并显示。这个函数需要…个参数fdatal，表示原始数据 可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有’total’和’rows’特性

表1-10 datagrid插件常用方法

方  法	说  明
options()	返回options对象
getPager()	返回pager 对象
load(param)	加载并显示第一页的行，如果指定param参数，它将替换queryParams特性

续表

方  法	说  明
reload(param)	重新加载行，就像load方法一样，但是保持在当前页
loadData(data)	加载本地数据，旧的行会被移除
getData()	返回加载的数据
getRows()	返回当前页的行
getRowln dex(row)	返回指定行的索引，row参数可以是一个行记录或者一个id字段的值
getSelected( )	返回第一个选中的行或者null
getSelections( )	返回所有选中的行，当没有选中的记录时，将返回空数组

表1-11  datagrid插件常用事件

事  件	说  明
onLoadSuccess(data)	当数据加载成功时触发
onLoadError( )	加载远程数据发生某些错误时触发
onBeforeLoad(param)	发送加载数据的请求前触发，如果返卿false加载动作就会取消
onClickRow(rowIndex,rowData)	当用卢单击一行时触发，参数包括： rowIndex：被单击行的索引，从0开始 rowData：被单击行对应的记录
onDblClickRow(rowIndex,rowData)	当用户双击一行时触发，参数包括： rowIndex：被双击行的索引，从O开始 rowData:被双击行对应的记录
onClickCell(rowIndex.field.value)	当用户单击一个单元格时触发
onDblClickCell(rowIndex, field,value)	当用户双击一个单元格时触发
onSelect(rowIndex,rowData)	当用户选中一行时触发，参数包括： rowIndex：选中行的索引，从0开始 rowData：选中行对应的记录

datagrid的Column是一个数组对象，它的每个元素也是一个数组。它定义了每个列的字段。关于column对象的详细参数说明如表1-12所示。

表1-12  column常用属性参数

参  数	说  明
String title	列的标题文字
String field	列的字段名
Number width	列的宽度
Number rowspan	指一个单元格占据多少行
Number colspan	指一个单元格占据多少列
String align	指如何对齐此列的数据，可以用'left'、'right'、'center'
boolean hidden	若为true，则隐藏此列
boolean checkbox	若为true，则显示checkbox
function formatter	单元格的格式化函数，需要3个参数： value：字段的值 rowData：行的记录数据 rowIndex：行的索引

续表

参  数	说  明
function styler	单元格的样式函数，返回样式字符串来自定义此单元格的样式，如'background:red'。此函数需要3个参数： value:字段的值 rowData：行的记录数据 rowIndex：行的索引
function sorter	自定义字段的排序函数，需要两个参数： a：第一个字段值 b：第二个字段值

了解了这些组件之后,接下来我们来看综合运用的案例!

 

二 综合案例

工程目录

sql代码

CREATE TABLE department
(
    deptId SMALLINT PRIMARY KEY,
    departName VARCHAR(20) NOT NULL,
    address VARCHAR(20)
)
;
 
CREATE TABLE student
(
    stuId INT PRIMARY KEY AUTO_INCREMENT,
    stuName VARCHAR(20) NOT NULL,
    gender VARCHAR(2),
    age SMALLINT,
    address VARCHAR(200) DEFAULT '学生宿舍',
    deptIdd SMALLINT,
    FOREIGN KEY(deptIdd) REFERENCES department(deptId)
)AUTO_INCREMENT=100
;
INSERT INTO department VALUES (10,'计算机系','计算机楼302');
INSERT INTO department VALUES (11,'艺术系','艺术楼211');
INSERT INTO department VALUES (12,'经管系','商学院911');
INSERT INTO department VALUES (13,'工程系','工程楼301');
INSERT INTO department VALUES (14,'土木系','建筑楼355');
--
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('王燕','女',18,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('张栋','男',21,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('李波','男',21,DEFAULT,11);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('陈建','男',19,DEFAULT,11);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('王江洪','男',25,DEFAULT,12);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('潘将','男',24,DEFAULT,13);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('张斌','男',22,DEFAULT,14);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('张斌','女',20,DEFAULT,10);
--
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('刘大海','男',28,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('刘德华','男',31,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('周润发','男',41,DEFAULT,11);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('张学友','男',37,DEFAULT,11);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('周星驰','男',42,DEFAULT,12);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('刘亦菲','女',24,DEFAULT,13);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('胡歌','男',32,DEFAULT,14);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('范冰冰','女',20,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('杨幂','女',26,DEFAULT,14);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('刘涛','女',27,DEFAULT,13);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('周迅','女',21,DEFAULT,13);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('古力娜扎','女',19,DEFAULT,10);
INSERT INTO Student(stuName,gender,age,address,deptIdd) VALUES ('黑山老妖','妖',99,DEFAULT,12);

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${basePath }">
<title>jquery 常用插件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<!-- jQuery UI样式文件 -->	
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui-1.10.4.custom.css">
<!-- easy UI样式文件 -->
<link rel="stylesheet" type="text/css" href="easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/icon.css">

<style type="text/css">
	#tree{width:110px; float: left;}
	#content{ float: left;}
	#key{margin-bottom: 2px;}
</style>
<!--jQuery基础脚本库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easy ui 脚本库  -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--jquery ui插件脚本库 需要写在easy ui脚本库的后面 -->
<script src="jqueryUI/jquery-ui-1.10.4.custom.js"></script>	

<script>
$(document).ready(function(e){
	//初始化树
	$("#tree").tree({
		url:'basic_tree_data.json',//远程加载tree数据的URL路径
		animate:true,    //是否可以折叠
		checkbox:true,   //是否显示复选框
		cascadeCheck:true,   //是否级联
		onlyLeafCheck:true,    //是否只有叶子节点选中
		dnd:true,             //是否启用拖放
		onClick:function(node){
		    var idStr=node.id+"";
		    var url=node.attributes.url;
		    var data={};//一个json对象
		    //获得父节点
		    var theParent=$("#tree").tree('getParent',node.target);
		    if(idStr.length==2){
		    	data={"departName":node.text};
		    }
		    if(idStr.length==3){
		    	data={"departName":theParent.text,"gender":node.text};
		    }
		    //加载网格控件
		    $("#dg").datagrid('load',data);
		}
	});
	
	//初始化网格控件
	$('#dg').datagrid({
			url:'ShowStudents.php', 	//远程请求数据的url路径
			pagination:true, 			//显示底部分页栏
			pageSize:3,					//默认每页记录数
			pageList:[3,5,8], 			//显示列表记录数的下拉框选项
			columns:[[
				{field:'stuId',title:'学生编号'},
				{field:'stuName',title:'学生名称'},
				{field:'gender',title:'性别'},
				{field:'age',title:'年龄'},
				{field:'departName',title:'部门名称'}
			]],
			singleSelect:false,   //单选还是多选
			rownumbers:true,   //显示序号
			iconCls: 'icon-add',  //左上角的一个图标
			fitColumns:true,//自适应宽度，防止水平滚动
			striped:true,//隔行变色
			loadMsg:"正努力为您加载中......"
	});	
	//初始化自动完成控件
	$("#myCom").autocomplete({
		minLength:1,     //至少输入1个字符才触发下拉框
		source:function(request,response){
			$.post("ShowNames.php","queryStr="+request.term,function(data){
				var result=$.parseJSON(data);  // 解析服务器传入的json数据
				response(result);   //把数据展示到下拉框
			});
		}   
	});
	
	$("[value=搜索]").click(function(e){
		var keyValue=$("[name=keyStr]").val();
		$("#dg").datagrid('load',{"queryStr":keyValue});
	});
});
</script>   
</head>
<body>
<div id="tree"></div>
<div id="content">
    <div style="margin-bottom: 2px;">
		<h2 style="margin: 0px;"><input type="text" name="keyStr" id="myCom">
		        <input type="button" value="搜索"/></h2>
	</div>
	<table id="dg" title="学生列表" class="easyui-grid" style="width:400px;" ></table> 
</div>
</body>
</html>

树形菜单json数据格式

[{
		"id":1,
		"text":"全部",
		"attributes":{
					"url":"ShowStudents.php"
				},
		"children":[{
			"id":11,
			"text":"计算机系",
			"attributes":{
					"url":"ShowStudents.php"
				},
			"children":[{
				"id":111,
				"text":"男",
				"attributes":{
					"url":"ShowStudents.php"
				},
				"iconCls":"icon-search"
			},{
				"id":112,
				"text":"女",
				"attributes":{
					"url":"ShowStudents.php"
				},
				"iconCls":"icon-add"
			}]
		},
		{
			"id":12,
			"text":"艺术系",
			"attributes":{
					"url":"ShowStudents.php"
				},
			"state":"open",
			"children":[{
				"id":121,
				"text":"男",
				"attributes":{
					"url":"ShowStudents.php"
				}
			},{
				"id":122,
				"text":"女",
				"attributes":{
					"url":"ShowStudents.php"
				},
				"iconCls":"icon-search"
			}]
		},{
			"id":13,
			"text":"经管系",
			"attributes":{
					"url":"ShowStudents.php"
				},
			"state":"open",
			"children":[{
				"id":131,
				"text":"男",
				"attributes":{
					"url":"ShowStudents.php"
				}
			},{
				"id":132,
				"text":"女",
				"attributes":{
					"url":"ShowStudents.php"
				}
			}]
		}]
}]

jquery ui和easy ui该引入的文件

实体类pageentity

package com.accp.entitys;

import java.io.Serializable;

public class PageEntity implements Serializable{

	private static final long serialVersionUID = -1387826548078174866L;
	
	private int pageNo=1;     //当前页码
	private int pageSize=3;   //每页显示多少条
	private String keyStr="";   //搜索关键字,根据学生名称
	private String gender="";     //性别
	private String departName="";  //系名称
	
	public PageEntity() {
	}
	
	
	public PageEntity(int pageNo, int pageSize, String keyStr,
			String gender, String departName) {
		super();
		this.pageNo = pageNo;
		this.pageSize = pageSize;
		this.keyStr = keyStr;
		this.gender = gender;
		this.departName = departName;
	}


	public int getPageNo() {
		return pageNo;
	}
	public void setPageNo(int pageNo) {
		this.pageNo = pageNo;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public String getKeyStr() {
		return keyStr;
	}
	public void setKeyStr(String keyStr) {
		this.keyStr = keyStr;
	}

	public String getGender() {
		return gender;
	}

	public void setGender(String gender) {
		this.gender = gender;
	}

	public String getDepartName() {
		return departName;
	}

	public void setDepartName(String departName) {
		this.departName = departName;
	}
	
	
	
}

dao层代码

package com.accp.dao;

import java.sql.*;
import java.util.*;

import com.accp.entitys.JoinEntity;
import com.accp.entitys.PageEntity;

public class StudentDaoImpl implements IStudentDao{
	//分页查询
	public List<JoinEntity> queryPage(PageEntity page) {
		List<JoinEntity> stuList=new ArrayList<JoinEntity>();
		String sqlStr="SELECT stuId,stuName,gender,age,departName,d.address"
					  +" FROM student s LEFT JOIN department d"
					  +" ON s.deptIdd=d.deptId"
					  +" where 1=1";
		if(page.getKeyStr()!=null && !page.getKeyStr().equals("")){
			sqlStr=sqlStr+" and s.stuName like '%"+page.getKeyStr()+"%'";
		}
		if(page.getGender()!=null && !page.getGender().equals("")){
			sqlStr=sqlStr+" and s.gender = '"+page.getGender()+"'";
		}
		if(page.getDepartName()!=null && !page.getDepartName().equals("")){
			sqlStr=sqlStr+" and d.departName = '"+page.getDepartName()+"'";
		}
		sqlStr=sqlStr+" order by s.age limit "
		            +(page.getPageNo()-1)*page.getPageSize()+" , "
		            +page.getPageSize();
		System.out.println("pageSql:"+sqlStr);
		Connection conn=null;
		PreparedStatement psmt=null;
		ResultSet rs=null;
		try {
			conn=BaseDao.getConn();
			psmt=conn.prepareStatement(sqlStr);
			rs=psmt.executeQuery();
			JoinEntity stu=null;
			while(rs.next()){
				stu=new JoinEntity();
				stu.setAge(rs.getInt("age"));
				stu.setDeptAddress(rs.getString("address"));
				stu.setDeptName(rs.getString("departName"));
				stu.setGender(rs.getString("gender"));
				stu.setStuId(rs.getInt("stuId"));
				stu.setStuName(rs.getString("stuName"));
				stuList.add(stu);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			BaseDao.closeConn(rs, psmt, conn);
		}
		return stuList;
	}
	//根据名称模糊查询所有的名称(为自动完成组件服务的)
	public List<String> queryStuNames(String theName) {
		List<String> nameList=new ArrayList<String>();
		String sqlStr="select stuName from student where stuName like '%"+theName+"%'";
		Connection conn=null;
		PreparedStatement psmt=null;
		ResultSet rs=null;
		try {
			conn=BaseDao.getConn();
			psmt=conn.prepareStatement(sqlStr);
			rs=psmt.executeQuery();
			while(rs.next()){
				nameList.add(rs.getString("stuName"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			BaseDao.closeConn(rs, psmt, conn);
		}
		return nameList;
	}
	//查询总条数
	public int queryRows(PageEntity page) {
		int rows=0;
		String sqlStr="SELECT count(*) "
			  +" FROM student s LEFT JOIN department d"
			  +" ON s.deptIdd=d.deptId"
			  +" where 1=1";
		if(page.getKeyStr()!=null && !page.getKeyStr().equals("")){
			sqlStr=sqlStr+" and s.stuName like '%"+page.getKeyStr()+"%'";
		}
		if(page.getGender()!=null && !page.getGender().equals("")){
			sqlStr=sqlStr+" and s.gender = '"+page.getGender()+"'";
		}
		if(page.getDepartName()!=null && !page.getDepartName().equals("")){
			sqlStr=sqlStr+" and d.departName = '"+page.getDepartName()+"'";
		}
		Connection conn=null;
		PreparedStatement psmt=null;
		ResultSet rs=null;
		try {
			conn=BaseDao.getConn();
			psmt=conn.prepareStatement(sqlStr);
			rs=psmt.executeQuery();
			if(rs.next()){
				rows=rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			BaseDao.closeConn(rs, psmt, conn);
		}
		return rows;
	}
	
}

action代码

package com.accp.actions;

import java.io.*;
import java.util.List;

import com.accp.dao.IStudentDao;
import com.accp.dao.StudentDaoImpl;
import com.accp.entitys.JoinEntity;
import com.accp.entitys.PageEntity;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.opensymphony.xwork2.ActionSupport;

public class StudentAction extends ActionSupport {
	private static final long serialVersionUID = -2564481343306358141L;
	private String queryStr;
	private String gender;
	private String departName;
	//分页控件自动传过来的
	private int rows;   //每页显示多少条
	private int page;   //当前页码

	private InputStream bis;

	public InputStream getBis() {
		return bis;
	}

	//分页查询
	public String queryPage() throws Exception {
		IStudentDao stuDao = new StudentDaoImpl();
		JSONObject finalJson = new JSONObject();
		JSONArray students = new JSONArray();
		JSONObject oneStu = null;
		System.out.println("departName:"+departName+",gender:"+gender+",queryStr:"+queryStr);
		//分页实体类
		PageEntity thePage=new PageEntity(page, rows, queryStr, gender, departName);
		List<JoinEntity> stuList=stuDao.queryPage(thePage);
		for (int i = 0; i < stuList.size(); i++) {
			oneStu = new JSONObject();
			oneStu.put("stuId", stuList.get(i).getStuId());
			oneStu.put("stuName", stuList.get(i).getStuName());
			oneStu.put("gender", stuList.get(i).getGender());
			oneStu.put("age", stuList.get(i).getAge());
			oneStu.put("departName", stuList.get(i).getDeptName());
			students.add(oneStu);
		}
		finalJson.put("total", stuDao.queryRows(thePage));
		finalJson.put("rows", students);
		System.out.println(finalJson.toString());
		bis = new ByteArrayInputStream(finalJson.toString().getBytes("utf-8"));
		return this.SUCCESS;
	}

	//查询学生的名称
	public String queryStuName() throws Exception {
		IStudentDao stuDao = new StudentDaoImpl();
		JSONArray names = new JSONArray();
		JSONObject oneStu = null;
		List<String> nameList=stuDao.queryStuNames(queryStr);
		for(String theName : nameList){
			oneStu=new JSONObject();
			oneStu.put("label", theName);
			names.add(oneStu);
		}
		System.out.println(names.toString());
		bis = new ByteArrayInputStream(names.toString().getBytes("utf-8"));
		return this.SUCCESS;
	}
	public String getQueryStr() {
		return queryStr;
	}

	public void setQueryStr(String queryStr) {
		this.queryStr = queryStr;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public String getGender() {
		return gender;
	}

	public void setGender(String gender) {
		this.gender = gender;
	}

	public String getDepartName() {
		return departName;
	}

	public void setDepartName(String departName) {
		this.departName = departName;
	}

	
}

struts配置代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"struts-2.3.dtd">
<struts>
	<constant name="struts.action.extension" value="action,do,php"></constant>
	<package name="stu" extends="struts-default">
		<action name="ShowStudents" class="com.accp.actions.StudentAction"
		    method="queryPage">
			<result type="stream">
				<param name="contentType">text/html</param>
				<param name="inputName">bis</param>
			</result>
		</action>
		
		<action name="ShowNames" class="com.accp.actions.StudentAction"
		    method="queryStuName">
			<result type="stream">
				<param name="contentType">text/html</param>
				<param name="inputName">bis</param>
			</result>
		</action>
		
	</package>
</struts>

运行结果