Jquery EasyUI使用ComboGrid
抛弃MyBatis等持久层框架，只想做一个纯粹的前端显示功能。
1.1 实现功能：
1、combogrid完成开发，可以进行排序，和过滤查询数据；
2、解决排序和索引越界问题；
3、比较字符串使用equals方法，内部循环边界值要小于数组长度-1
4、创建时间显示出来了。
之前不显示是因为前台字段和后台返回字段差一个字母。
5、简化属性复制，采用框架自带类
1.2 界面效果：
1.3 项目依赖jar包：
1.4项目结构
1.5后台代码：CombogridController.java
package com.cat.spring.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.springMyBatis.system.model.EasyUIUser;
@Controller
public class CombogridController {
@RequestMapping(value ="/CombogridDemo", method = RequestMethod.GET)
public ModelAndView index(StringredirectURL, HttpServletRequest request) {
ModelAndView view = newModelAndView();
view.setViewName("/CombogridDemo");
return view;
}
@RequestMapping(value ="/LoadEasyUIUsers", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object>LoadEasyUIUsers(String q, Integer page,
Integer rows, String sort,String order) {
List<EasyUIUser> lst =null;
List<EasyUIUser>lstFiltered = null;
List<EasyUIUser>lstPagedFiltered = null;
Map<String, Object>result = new HashMap<String, Object>();
lst = GetEasyUIUsers();
if (page == null) {
page = 1;
}
if (rows == null) {
rows = 5;
}
// 清空过滤条件返回全部
if (q == null || q.trim() =="") {
if (sort == null || order== null) {
lstFiltered =GetEasyUIUsers();
} else {
lstFiltered =getEasyUIUsersSorted8Field(sort, order);
}
} else {
if (sort == null || order== null) {
lst = GetEasyUIUsers();
} else {
lst =getEasyUIUsersSorted8Field(sort, order);
}
Integer sz = lst.size();
lstFiltered = newArrayList<EasyUIUser>();
for (int i = 0; i < sz;i++) {
EasyUIUser user =lst.get(i);
if(user.getCname().contains(q)) {
lstFiltered.add(user);
}
}
}
lstPagedFiltered = newArrayList<EasyUIUser>();
for (int i = (page - 1) *rows; i < (page) * rows
&& i <lstFiltered.size(); i++) {
lstPagedFiltered.add(lstFiltered.get(i));
}
Integer total =lstFiltered.size();// userService.countTotal(params);
result.put("rows",lstPagedFiltered);
result.put("total",total);
return result;
}
private List<EasyUIUser>GetEasyUIUsers() {
List<EasyUIUser> lst =new ArrayList<EasyUIUser>();
EasyUIUser objEasyUIUser =GetEasyUIUser("", "0", "", "admin",
"admincpwd",0, "0", "超级管理员", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2012-09-21 17:21:15", "1",
"2012-09-2717:21:15", "eee", "eeecpwd", 0, "","", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2012-09-24 10:05:18", "2",
"2012-09-2410:05:18", "4", "4cpwd", 0, "","", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2012-09-21 17:26:18", "3",
"2012-09-2117:26:18", "213123", "213123cpwd", 0, "0","超级管理员",
0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2012-09-24 13:13:33", "4",
"2012-09-2413:13:33", "test", "testcpwd", 0, "","", 0);
lst.add(objEasyUIUser);
// 添加4个用户
objEasyUIUser =GetEasyUIUser("2017-09-21 17:21:15", "5",
"2017-09-2717:21:15", "zhaohy", "2319474", 0, "","赵海燕", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2017-09-24 10:05:18", "6",
"2017-09-2410:05:18", "zhangql", "19520101", 0, "","张清兰", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2017-09-21 17:26:18", "7",
"2017-09-2117:26:18", "zhangtw", "12013", 0, "0","张亭婉", 0);
lst.add(objEasyUIUser);
objEasyUIUser =GetEasyUIUser("2017-09-24 13:13:33", "8",
"2017-09-2413:13:33", "niyl", "194401", 0, "", "倪玉林", 0);
lst.add(objEasyUIUser);
return lst;
}
private List<EasyUIUser>getEasyUIUsersSorted8Field(String sortField,
String sortOrder) {
List<EasyUIUser> lst =GetEasyUIUsers();
int sz = lst.size();
for (int i = sz; i > 0;i--) {
for (int j = 0; j < i -1; j++) {
ExchangeEasyUIUserProp8SortField(sortField,sortOrder,
lst.get(j),lst.get(j + 1));
//if("cname".equals(sortField)){//if("cname"==sortField){
//if("asc".equals(sortOrder)){//if("asc"==sortOrder){
//if(lst.get(j).getCname().compareTo(lst.get(j+1).getCname())>0){
// EasyUIUser obj=newEasyUIUser();
// //采用字段框架帮助类，实现属性拷贝
////BeanUtils.copyProperties(ue, target);
//BeanUtils.copyProperties(lst.get(j), obj);
// //obj.setCcreatedatetime(lst.get(j).getCcreatedatetime());
// //obj.setCid(lst.get(j).getCid());
// //obj.setCmodifydatetime(lst.get(j).getCmodifydatetime());
// //obj.setCname(lst.get(j).getCname());
// //obj.setCpwd(lst.get(j).getCpwd());
// //
// //obj.setPage(lst.get(j).getPage());
// //obj.setRoleIds(lst.get(j).getRoleIds());
// //obj.setRoleNames(lst.get(j).getRoleNames());
// //obj.setRows(lst.get(j).getRows());
// //j,拷贝j+1到j
//BeanUtils.copyProperties(lst.get(j+1), lst.get(j));
// //
//lst.get(j).setCcreatedatetime(lst.get(j+1).getCcreatedatetime());
// //lst.get(j).setCid(lst.get(j+1).getCid());
// //
//lst.get(j).setCmodifydatetime(lst.get(j+1).getCmodifydatetime());
// //lst.get(j).setCname(lst.get(j+1).getCname());
// //lst.get(j).setCpwd(lst.get(j+1).getCpwd());
// //
// //lst.get(j).setPage(lst.get(j+1).getPage());
// //lst.get(j).setRoleIds(lst.get(j+1).getRoleIds());
// //lst.get(j).setRoleNames(lst.get(j+1).getRoleNames());
// //lst.get(j).setRows(lst.get(j+1).getRows());
// //j+1从obj考回来
//BeanUtils.copyProperties(obj, lst.get(j+1));
// //lst.get(j+1).setCcreatedatetime(obj.getCcreatedatetime());
// //lst.get(j+1).setCid(obj.getCid());
// //lst.get(j+1).setCmodifydatetime(obj.getCmodifydatetime());
// // lst.get(j+1).setCname(obj.getCname());
// //lst.get(j+1).setCpwd(obj.getCpwd());
// //
// //lst.get(j+1).setPage(obj.getPage());
// //lst.get(j+1).setRoleIds(obj.getRoleIds());
// //lst.get(j+1).setRoleNames(obj.getRoleNames());
// // lst.get(j+1).setRows(obj.getRows());
// }
// }
// }//比较排序
}
}
return lst;
}
private voidExchangeEasyUIUserProp8SortField(String sortField,
String sortOrder,EasyUIUser src, EasyUIUser target) {
if("cname".equals(sortField)) {// if("cname"==sortField){
if("asc".equals(sortOrder)) {// if("asc"==sortOrder){
if(src.getCname().compareTo(target.getCname()) > 0) {
// EasyUIUserobj=new EasyUIUser();
// //采用字段框架帮助类，实现属性拷贝,源--》目标
//BeanUtils.copyProperties(src, obj);
// //j,拷贝j+1到j
//BeanUtils.copyProperties(target, src);
// //j+1从obj考回来
//BeanUtils.copyProperties(obj, target);
ExchangeEasyUIUser(src,target);
}
} else if("desc".equals(sortOrder)) {
if(src.getCname().compareTo(target.getCname()) < 0) {
ExchangeEasyUIUser(src,target);
}
}
}// cname比较排序
else if("ccreatedatetime".equals(sortField)) {
if("asc".equals(sortOrder)) {
if(src.getCcreatedatetime().compareTo(
target.getCcreatedatetime())> 0) {
ExchangeEasyUIUser(src,target);
}
} else if("desc".equals(sortOrder)) {
if(src.getCcreatedatetime().compareTo(
target.getCcreatedatetime())< 0) {
ExchangeEasyUIUser(src,target);
}
}
}// ccreatedatetime比较排序
else if("cmodifydatetime".equals(sortField)) {
if("asc".equals(sortOrder)) {
if(src.getCmodifydatetime().compareTo(
target.getCmodifydatetime())> 0) {
ExchangeEasyUIUser(src,target);
}
} else if("desc".equals(sortOrder)) {
if(src.getCmodifydatetime().compareTo(
target.getCmodifydatetime())< 0) {
ExchangeEasyUIUser(src,target);
}
}
}// cmodifydatetime比较排序
}
private voidExchangeEasyUIUser(EasyUIUser src, EasyUIUser target) {
EasyUIUser obj = newEasyUIUser();
// 采用字段框架帮助类，实现属性拷贝,源--》目标
BeanUtils.copyProperties(src,obj);
// j,拷贝j+1到j
BeanUtils.copyProperties(target,src);
// j+1从obj考回来
BeanUtils.copyProperties(obj,target);
}
private EasyUIUserGetEasyUIUser(String ccreateddatetime, String cid,
String cmodifydatetime,String cname, String cpwd, Integer page,
String roleIds, StringroleNames, Integer rows) {
EasyUIUser objEasyUIUser = newEasyUIUser();
objEasyUIUser.setCcreatedatetime(ccreateddatetime);
objEasyUIUser.setCid(cid);
objEasyUIUser.setCmodifydatetime(cmodifydatetime);
objEasyUIUser.setCname(cname);
objEasyUIUser.setCpwd(cpwd);
objEasyUIUser.setPage(page);
objEasyUIUser.setRoleIds(roleIds);
objEasyUIUser.setRoleNames(roleNames);
objEasyUIUser.setRows(rows);
return objEasyUIUser;
}
}
1.6后台代码：业务对象EasyUIUser.java
packagecom.springMyBatis.system.model;
public class EasyUIUser implementsjava.io.Serializable {
/**
*
*/
private static final long serialVersionUID =2018156712683678639L;
privateStringcid;
privateStringcname;
privateStringcpwd;
privateStringccreatedatetime;
privateIntegerpage;
privateStringroleIds;
privateIntegerrows;
privateStringroleNames;
privateStringcmodifydatetime;
/**
* @returnthecid
*/
publicString getCid() {
return cid;
}
/**
* @paramcid thecid to set
*/
public voidsetCid(String cid) {
this.cid =cid;
}
/**
* @returnthecname
*/
publicString getCname() {
return cname;
}
/**
* @paramcname thecname to set
*/
public voidsetCname(String cname) {
this.cname =cname;
}
/**
* @returnthecpwd
*/
publicString getCpwd() {
return cpwd;
}
/**
* @paramcpwd thecpwd to set
*/
public voidsetCpwd(String cpwd) {
this.cpwd =cpwd;
}
/**
* @returntheccreateddatetime
*/
publicString getCcreatedatetime() {
return ccreatedatetime;
}
/**
* @paramccreateddatetime theccreateddatetime to set
*/
public voidsetCcreatedatetime(String ccreateddatetime) {
this.ccreatedatetime =ccreateddatetime;
}
/**
* @returnthe page
*/
publicInteger getPage() {
return page;
}
/**
* @parampage the page to set
*/
public voidsetPage(Integer page) {
this.page =page;
}
/**
* @returnthe roleIds
*/
publicString getRoleIds() {
return roleIds;
}
/**
* @paramroleIds the roleIds to set
*/
public voidsetRoleIds(String roleIds) {
this.roleIds =roleIds;
}
/**
* @returnthe rows
*/
publicInteger getRows() {
return rows;
}
/**
* @paramrows the rows to set
*/
public voidsetRows(Integer rows) {
this.rows =rows;
}
/**
* @returnthe roleNames
*/
publicString getRoleNames() {
return roleNames;
}
/**
* @paramroleNames the roleNames to set
*/
public voidsetRoleNames(String roleNames) {
this.roleNames =roleNames;
}
/**
* @returnthecmodifydatetime
*/
publicString getCmodifydatetime() {
return cmodifydatetime;
}
/**
* @paramcmodifydatetime thecmodifydatetime to set
*/
public voidsetCmodifydatetime(String cmodifydatetime) {
this.cmodifydatetime =cmodifydatetime;
}
}
1.7前台代码：CombogridDemo.jsp
<%@ page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<!-- 引入EasyUI -->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入JQuery.cookies -->
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui-1.3.6/jquery.cookie.js"></script>
<!-- 引入EasyUI的样式文件-->
<linkrel="stylesheet"id="easyuiTheme"
href="${pageContext.request.contextPath}/jquery-easyui-1.3.1/themes/default/easyui.css"
type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<linkrel="stylesheet"
href="${pageContext.request.contextPath}/jquery-easyui-1.3.1/themes/icon.css"
type="text/css"/>
<title>CombogridDemo</title>
<scripttype="text/javascript">
var$loginDatagridName;
$(function(){
$loginDatagridName=$('#loginDatagridName').combogrid({
required:true,
loadMsg:'数据加载中...',
panelWidth:440,
panelHeight:180,
fitColumns:true,
value:'',
idField:'cname',
textField:'cname',
mode:'remote',
url:'${pageContext.request.contextPath}/LoadEasyUIUsers',
pagination:true,
pageSize:5,
pageList:[5,10],
sortName:'cname',
sortOrder:'asc',
columns:[[{
field:'cid',
title:'编号',
width:60,
hidden:true
},{
field:'cname',
title:'登录名',
width:100,
sortable:true
},{
field:'ccreatedatetime',
title:'创建时间',
width:150,
sortable:true
},{
field:'cmodifydatetime',
title:'最后修改时间',
width:150,
sortable:true
}]],
delay:500
});
});
</script>
</head>
<body>
<selectid="loginDatagridName"name="cname"style="display:none;width:155px;"></select>
</body>
</html>
1.7 测试地址:
http://localhost:8060/EasyUITutorialNoPersistence/CombogridDemo