本文以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所示。

表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>

运行结果

jquery ui和easy ui联合使用相关推荐

  1. Jquery Easy UI Datagrid 上下移动批量保存数据

    DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...

  2. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

  3. 7个jquery easy ui 基本组件图解

    下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...

  4. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  5. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  6. 初学jQuery Easy UI的总结

      1.使用jQuery Easy UI的目的:    jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰 ...

  7. easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口

    1.问题: 最近在做AIUESUite v1.0的开发,基本上按照前期的规划,把现有的功能都一步步的实现,但是因为我们基于easy ui 的二次开发牵扯到屏幕的自适用问题一直都困扰着我们,这里我们针对 ...

  8. easy ui dialog 关闭之后的怪异问题

    最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师! 事故现场: 增加页面和修改页面是分离的两个jsp文件. 在页面加载时会用jquery去控制一些数据加载 ...

  9. 用Easy UI快速搭建一个后台

    今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好 ...

最新文章

  1. python 存redis失败无提示_Python Redis日志错误
  2. SAP PR 转 PO
  3. 微信小程序1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
  4. 如何使用SAP CRM增强工具AET创建Table表格类型的增强
  5. 阅读 嘀嗒嘀嗒 微信公共号
  6. Spring @PostConstruce 和 @PreDestroy 实例化\销毁 bean 时
  7. wireshark找不到接口_wireshark网络小故障分析定位
  8. 泛微OA与SAP通过webservice方式对接数据完整操作
  9. 蹩脚的Access分页语句
  10. SQL SERVER RBAC权限管理表
  11. 千与千寻，真是一部给大人看的动画片
  12. 各数据库远程连接及ipv6环境配置
  13. libvirt Java 实现远程管理虚拟机
  14. ARM的商业模式和ARM各种版本号区分
  15. origin图例修改框框
  16. JavaWeb阶段JSP详情介绍（上）
  17. matlab snr mse,MATLAB 均方根误差MSE、两图像的信噪比SNR、峰值信噪比PSNR、结构相似性SSIM...
  18. DQL:简单的select语句书写(含where子句)
  19. 马未都：人生三重境界
  20. 开源软件FreeCAD0.20编译源码修改名称、换名称

热门文章

  1. 记一次抗DDOS演练
  2. Linux oracle 怎么安装,oracle在linux下怎么安装
  3. 微信小程序 - 音乐播放器源码
  4. docker的使用方法
  5. ctf流量分析练习二
  6. mybatis Sql查询 返回对象或者list数据中包含一个对象的list集合
  7. 【天光学术】经济哲学论文：经济哲学视域下的生态危机根源与解决途径
  8. RT_thread空闲线程及两个常用的钩子函数
  9. Python将图片转换为ASCII字符画
  10. PayPal信用卡付款401，商家不接受使用此付款类型