1、界面展示
2、WebContent/jsp/combogrid_001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String root = request.getContextPath();
%>
<!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>【combogrid组件】-001-表格搜索案例</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
//表格自动搜索
$('#cc').combogrid({
panelWidth:450,
idField:'id',
textField:'username',
mode:'remote' , //remote表示从服务器加载数据
url:'<%=root%>/UserServlet?method=searchName', //请求地址
delay:300, //延迟搜索的时间
columns:[[
{field:'username',title:'用户名',width:100},
{field:'age',title:'年龄',width:50},
{
field:'sex',
title:'性别',
width:50,
formatter:function(value,record,index){
if(value==1){
return '<span style=color:red;>男</span>';
} else if(value ==2){
return '<span style=color:green;>女</span>';
}
}
},
{field:'salary',title:'薪水',width:100}
]]
});
});
</script>
</head>
<body>
表格自动搜索:<select id="cc" name="gridId" style="width:250px;"></select>
</body>
</html>
3、com.easyui.servlet.UserServlet.java
package com.easyui.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.easyui.bean.CityBean;
import com.easyui.bean.TUserBean;
import com.easyui.dao.UserDao;
/**
* 用户控制器类
*
* @author LiPiaoShui
*/
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 9140830946116659042L;
private UserDao uDao = new UserDao();
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");
if ("getList".equals(method)) {
getList(request, response);
} else if("getCityName".equals(method)) {
getCityName(request, response);
} else if("getCity".equals(method)) {
getCity(request, response);
} else if("save".equals(method)) {
save(request, response);
} else if("update".equals(method)) {
update(request, response);
} else if("delete".equals(method)) {
delete(request, response);
} else if("searchName".equals(method)) {
searchName(request, response);
}
}
/**
* 根据名字查询用户信息
* @param request
* @param response
*/
private void searchName(HttpServletRequest request,
HttpServletResponse response) {
try {
//默认前台送过来的是p参数
String q = request.getParameter("q") == null ? "" : request.getParameter("q");
List<TUserBean> uList = this.uDao.searchByName(q.trim());
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONArray.fromObject(uList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 删除用户信息
* @param request
* @param response
*/
private void delete(HttpServletRequest request, HttpServletResponse response) {
try {
String[] ids = request.getParameter("ids").split(",");
int count = 0;
for(String id:ids) {
count += this.uDao.deleteByUserId(Integer.parseInt(id));
}
String json = "{\"status\":\"提示信息\",\"message\":\"删除成功,总共删除"+count+"条记录\"}";
if(count <= 0) {
json = "{\"status\":\"提示信息\",\"message\":\"删除失败\"}";
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 修改用户信息
* @param request
* @param response
*/
private void update(HttpServletRequest request, HttpServletResponse response) {
int id = Integer.parseInt(request.getParameter("id"));
TUserBean user = new TUserBean();
user = this.uDao.queryUserById(id);
//获取前台传入的信息
String username = request.getParameter("username");
String password = request.getParameter("password");
String sex = request.getParameter("sex");
int age = Integer.parseInt(request.getParameter("age"));
String birthday = request.getParameter("birthday");
int city = Integer.parseInt(request.getParameter("city"));
String salary = request.getParameter("salary");
String starttime = request.getParameter("starttime");
String endtime = request.getParameter("endtime");
String description = request.getParameter("description");
//设置用户信息
user.setUsername(username);
user.setPassword(password);
user.setSex(sex);
user.setAge(age);
user.setBirthday(birthday);
user.setCity(city);
user.setSalary(salary);
user.setStarttime(starttime);
user.setEndtime(endtime);
user.setDescription(description);
try {
//更新用户信息
int count = uDao.update(user);
String json = "{\"status\":\"提示信息\",\"message\":\"更新成功\"}";
if(count != 1) {
json = "{\"status\":\"提示信息\",\"message\":\"更新失败\"}";
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 保存用户信息
* @param request
* @param response
*/
private void save(HttpServletRequest request, HttpServletResponse response) {
//获取前台传入的信息
String username = request.getParameter("username");
String password = request.getParameter("password");
String sex = request.getParameter("sex");
int age = Integer.parseInt(request.getParameter("age"));
String birthday = request.getParameter("birthday");
int city = Integer.parseInt(request.getParameter("city"));
String salary = request.getParameter("salary");
String starttime = request.getParameter("starttime");
String endtime = request.getParameter("endtime");
String description = request.getParameter("description");
//设置用户信息
TUserBean user = new TUserBean();
user.setUsername(username);
user.setPassword(password);
user.setSex(sex);
user.setAge(age);
user.setBirthday(birthday);
user.setCity(city);
user.setSalary(salary);
user.setStarttime(starttime);
user.setEndtime(endtime);
user.setDescription(description);
try {
//保存用户信息
int count = uDao.save(user);
String json = "{\"status\":\"提示信息\",\"message\":\"保存成功\"}";
if(count != 1) {
json = "{\"status\":\"提示信息\",\"message\":\"保存失败\"}";
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取全部城市信息
* @param request
* @param response
*/
private void getCity(HttpServletRequest request,
HttpServletResponse response) {
try {
List<CityBean> cList = new ArrayList<CityBean>();
cList.add(new CityBean(1,"北京"));
cList.add(new CityBean(2,"上海"));
cList.add(new CityBean(3,"深圳"));
cList.add(new CityBean(4,"长春"));
response.setContentType("text/html;charset=utf-8");
//[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"深圳"},{"id":4,"name":"长春"}]
response.getWriter().write(JSONArray.fromObject(cList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取城市信息
* @param request
* @param response
*/
private void getCityName(HttpServletRequest request,
HttpServletResponse response) {
try {
List<CityBean> cList = new ArrayList<CityBean>();
cList.add(new CityBean(1,"北京"));
cList.add(new CityBean(2,"上海"));
cList.add(new CityBean(3,"深圳"));
cList.add(new CityBean(4,"长春"));
int id = Integer.parseInt(request.getParameter("id"));
for(CityBean city:cList) {
if(id == city.getId()) {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONObject.fromObject(city).toString());
}
}
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取全部用户信息
*
* @param request
* @param response
*/
private void getList(HttpServletRequest request,
HttpServletResponse response) {
try {
//当前页码
int currentPage = Integer.parseInt(request.getParameter("page"));
//每页显示的大小
int pageSize = Integer.parseInt(request.getParameter("rows"));
//前台查询条件
String username = request.getParameter("username") == null ? "" : request.getParameter("username");
String starttime = request.getParameter("starttime") == null ? "" : request.getParameter("starttime");
String endtime = request.getParameter("endtime") == null ? "" : request.getParameter("endtime");
TUserBean user = new TUserBean();
user.setUsername(username);
user.setStarttime(starttime);
user.setEndtime(endtime);
// 获取分页显示的用户信息
List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize, user);
//获取总用户数
int total = uDao.getTotal(user);
// json格式 --> {"total":10,"rows":[{},{}]}
String json = "{\"total\":" + total + ",\"rows\":"
+ JSONArray.fromObject(uList).toString() + "}";
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}
}
4、com.easyui.dao.UserDao.java
package com.easyui.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.easyui.bean.TUserBean;
import com.easyui.util.DBUtil;
/**
* 用户数据库操作类
* @author LiPiaoShui
*/
public class UserDao {
/**
* 获取全部用户信息
* @return
*/
public List<TUserBean> getList() {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<TUserBean> uList = new ArrayList<TUserBean>();
try {
String sql = "select * from t_user";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
TUserBean user = new TUserBean();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
uList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return uList;
}
/**
* 分页显示用户信息
* @param currentPage
* @param pageSize
* @return
*/
public List<TUserBean> queryByPagination(int currentPage,int pageSize, TUserBean userBean) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<TUserBean> uList = new ArrayList<TUserBean>();
try {
String sql = "select * from t_user where 1=1";
if(!"".equals(userBean.getUsername().trim())) {
sql += " and username like '%" + userBean.getUsername() + "%'";
}
if(!"".equals(userBean.getStarttime().trim())) {
sql += " and starttime >= '" + userBean.getStarttime() + "'";
}
if(!"".equals(userBean.getEndtime().trim())) {
sql += " and endtime >= '" + userBean.getEndtime() + "'";
}
sql += " limit ?,?";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, (currentPage-1)*pageSize);
pstmt.setInt(2, pageSize);
rs = pstmt.executeQuery();
while(rs.next()) {
TUserBean user = new TUserBean();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
uList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return uList;
}
/**
* 获取总用户数
* @return
*/
public int getTotal(TUserBean userBean) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int total = 0;
try {
String sql = "select count(1) from t_user where 1=1";
if(!"".equals(userBean.getUsername().trim())) {
sql += " and username like '%" + userBean.getUsername() + "%'";
}
if(!"".equals(userBean.getStarttime().trim())) {
sql += " and starttime >= '" + userBean.getStarttime() + "'";
}
if(!"".equals(userBean.getEndtime().trim())) {
sql += " and endtime >= '" + userBean.getEndtime() + "'";
}
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()) {
total = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return total;
}
/**
* 保存用户信息
* @param user
* @return
*/
public int save(TUserBean user) {
Connection conn = null;
PreparedStatement pstmt = null;
int count = 0;
try {
String sql = "insert into t_user(username,password,sex,age,birthday,city,"
+ "salary,starttime,endtime,description) value(?,?,?,?,?,?,?,?,?,?)";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, user.getUsername());
pstmt.setString(2, user.getPassword());
pstmt.setString(3, user.getSex());
pstmt.setInt(4, user.getAge());
pstmt.setString(5, user.getBirthday());
pstmt.setInt(6, user.getCity());
pstmt.setString(7, user.getSalary());
pstmt.setString(8, user.getStarttime());
pstmt.setString(9, user.getEndtime());
pstmt.setString(10, user.getDescription());
count = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(null, pstmt, conn);
}
return count;
}
/**
* 根据用户ID查询用户信息
* @param id
* @return
*/
public TUserBean queryUserById(int id) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
TUserBean user = new TUserBean();
try {
String sql = "select * from t_user where id=?";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, id);
rs = pstmt.executeQuery();
if(rs.next()) {
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return user;
}
/**
* 更新用户信息
* @param user
* @return
*/
public int update(TUserBean user) {
Connection conn = null;
PreparedStatement pstmt = null;
int count = 0;
try {
String sql = "update t_user set username=?,password=?,sex=?,age=?,birthday=?,city=?,"
+ "salary=?,starttime=?,endtime=?,description=? where id=?";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, user.getUsername());
pstmt.setString(2, user.getPassword());
pstmt.setString(3, user.getSex());
pstmt.setInt(4, user.getAge());
pstmt.setString(5, user.getBirthday());
pstmt.setInt(6, user.getCity());
pstmt.setString(7, user.getSalary());
pstmt.setString(8, user.getStarttime());
pstmt.setString(9, user.getEndtime());
pstmt.setString(10, user.getDescription());
pstmt.setInt(11, user.getId());
count = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(null, pstmt, conn);
}
return count;
}
/**
* 根据用户ID删除用户信息
* @param id
* @return
*/
public int deleteByUserId(int id) {
Connection conn = null;
PreparedStatement pstmt = null;
int count = 0;
try {
String sql = "delete from t_user where id=?";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, id);
count = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(null, pstmt, conn);
}
return count;
}
/**
* 根据名字查询用户信息
* @return
*/
public List<TUserBean> searchByName(String q) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<TUserBean> uList = new ArrayList<TUserBean>();
try {
String sql = "select * from t_user where 1=1";
if(!"".equals(q)) {
sql += " and username like '%" + q + "%'";
}
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
TUserBean user = new TUserBean();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
uList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return uList;
}
}
相关推荐
ComboGrid 是 EasyUI 框架中的一种组件，它结合了 Combo（自定义下拉框）和 DataGrid（数据表格）的功能，为用户提供了一个在文本框中显示下拉列表，列表则是以表格形式呈现的数据选择界面。在第 34 章中，我们将...
其中，ComboGrid是一个将下拉选择框（combo）和表格（grid）功能结合的组件，允许用户在一个输入框中选择值，并可显示一个可编辑的表格，表格中可以展示更详细的数据。 ComboGrid组合表格的API文档通常会详细说明...
对于提升前端开发者的技能水平和项目实战能力，这是一个很好的学习案例。通过实践和研究，开发者不仅能学会如何使用Tree Table和Combobox Grid，还能掌握如何在实际项目中灵活运用组件和处理用户交互。
在使用EasyUI框架中的`combogrid`组件时，可能会遇到两个主要问题：一是本地模糊搜索功能在多列上的实现；二是点击复选框时，无法正确选中数据的情况。本文将详细介绍如何解决这两个问题。 #### 二、EasyUI ...
在easyUI中，`combogrid`是一个结合了`combobox`和`grid`特性的组件，它可以在一个下拉列表中展示表格数据，非常适合用于展示复杂的数据结构。例如，当需要在一个下拉列表中选择某个项目时，同时还需要展示该项目的...
这样，我们就可以通过`.combogrid-f`类找到所有的Combogrid实例，然后设置查询参数并重新加载数据，实现了在DataGrid编辑器中的Combogrid搜索功能。 总结来说，本文详细讲解了如何在EasyUI DataGrid中扩展Combogrid...
ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件，主要用于在表单中实现下拉列表与表格的结合，提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox（下拉框）和grid（数据网格）的...
easyui combogrid实现本地模糊搜索过滤多列 easyui combogrid是一种强大的数据选择插件，可以提供给用户多种选择的数据项。但是，当数据项内容很多时，仅仅提供选择项是不够的，需要能够对用户的输入进行过滤，以便...
Combogrid则是将传统的下拉列表扩展成一个具有表格布局的组件。它不仅允许用户从预定义的选项中选择，还可以像数据网格那样显示多个列，每列包含不同的信息。这使得用户可以比较和筛选数据，提高了选择的准确性。...
数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字调节器 - NumberSpinner ...
asyUI ComboGrid 集成分页、按键示例源码 源码描述： 实现的功能： 1、下拉框下拉时出现表格； 2、表格带分页功能； 3、可以使用向上键、向下键在表格中移动选择行数据； 4、可以使用回车键在表格中选中行数据； 5、...
它提供了一套完整的组件模型，包括各种UI控件，如表格、表单、树形视图等。在给定的“Extjs4 combogrid扩展”中，我们主要关注的是如何将传统的下拉框（combo）扩展为同时支持网格（grid）显示的功能。 标题中的...
combogrid 组件 - **修复问题**：在改变时会多次触发 onChange 事件。 - **效果**：现在事件触发次数得到优化，提高了用户体验。 ##### 4. accordion 组件 - **修复问题**：在设置了动画属性为 true 的情况下...
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
Combogrid 是一个jQuery插件用于为输入框添加高级自完成功能（auto-complete）。当用户输入的时候，会在输入框的下方面动态显示一个拥有分页功能的表格（Grid）控件。 通过Ajax请求，然后结果以JSON（或JSONP：用于...
1、下拉框下拉时出现表格； 2、表格带分页功能； 3、可以使用向上键、向下键在表格中移动选择行数据； 4、可以使用回车键在表格中选中行数据； 5、在下拉框的文本框中输入内容，能查询表格； 6、下拉框的文本框...
Vue3 elementplus+vxegrid实现下拉搜索表格带分页选择的子组件，效果与easyui combogrid一样，适合开发管理系统
修改上一个资源版本中结束编辑时...1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而不是text问题