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
Integer rows, String sort,String order) {
List
List
List
Map
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
for (int i = 0; i < sz;i++) {
EasyUIUser user =lst.get(i);
if(user.getCname().contains(q)) {
lstFiltered.add(user);
}
}
}
lstPagedFiltered = newArrayList
for (int i = (page - 1) *rows; i < (page) * rows
&& 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 List 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 String sortOrder) { List 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">
<scripttype="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/jquery-1.8.0.min.js">script>
<scripttype="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/jquery.easyui.min.js">script>
<scripttype="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js">script>
<scripttype="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.6/jquery.cookie.js">script>
<linkrel="stylesheet"id="easyuiTheme" href="${pageContext.request.contextPath}/jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"/>
<linkrel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.3.1/themes/icon.css" type="text/css"/> <title>CombogridDemotitle> <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