09-EasyUI尚硅谷-combobox-省份城市联动+自动搜索功能
数据库：
CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(10) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(10) DEFAULT NULL, `pro_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
数据：
实例1：
前台：
<select id="province" class="easyui-combobox" url="ProvinceServlet?method=findProvinceList" valueField="id" textField="name"></select>
后台：
ProvinceServlet.java：
package sxt.easyui.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
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 com.mysql.jdbc.PreparedStatement;
import sxt.easyui.model.Province;
import sxt.easyui.util.DBHelper;
// 省份Servlet
@SuppressWarnings("serial")
public class ProvinceServlet extends HttpServlet {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 接收方法
String method = req.getParameter("method");
// 判断方法
if (method == null || "".equals(method)) {
try {
throw new Exception("请求出错！");
} catch (Exception e) {
e.printStackTrace();
}
}
if ("findProvinceList".equals(method)) {
List<Province> provinceList = this.findProvinceList(req, resp);
String provinceJsonStr = JSONArray.fromObject(provinceList).toString();
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.write(provinceJsonStr);
} else {
try {
throw new Exception("请求出错！");
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 获取省份列表
private List<Province> findProvinceList(HttpServletRequest req,
HttpServletResponse resp) {
conn = DBHelper.getConn();
String sql = "SELECT * FROM province";
ps = (PreparedStatement) DBHelper.prepare(conn, sql);
List<Province> provinceList = new ArrayList<Province>();
try {
ResultSet rs = ps.executeQuery();
while (rs.next()) {
Province province = new Province();
province.setId(rs.getString("id"));
province.setName(rs.getString("name"));
provinceList.add(province);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBHelper.close(rs);
DBHelper.close(ps);
DBHelper.close(conn);
}
return provinceList;
}
}
效果：
--------------------------------------------------
下面是根据省份获取城市：
前台：
<body> <select id="province" class="easyui-combobox" url="ProvinceServlet?method=findProvinceList" valueField="id" textField="name"></select> <select id="city" class="easyui-combobox" valueField="id" textField="name"></select> </body>
<script type="text/javascript">
$(function() {
$("#province").combobox({
onSelect: function() {
var pid = $("#province").combobox("getValue"); // 获取省份的id
$("#city").combobox("setValue", "")
$("#city").combobox("reload", "ProvinceServlet?method=findCityListByPid&pid="+pid);
}
});
});
</script>
后台：
package sxt.easyui.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
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 com.mysql.jdbc.PreparedStatement;
import sxt.easyui.model.City;
import sxt.easyui.model.Province;
import sxt.easyui.util.DBHelper;
// 省份Servlet
@SuppressWarnings("serial")
public class ProvinceServlet extends HttpServlet {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 接收方法
String method = req.getParameter("method");
// 判断方法
if (method == null || "".equals(method)) {
try {
throw new Exception("请求出错！");
} catch (Exception e) {
e.printStackTrace();
}
}
if ("findProvinceList".equals(method)) {
List<Province> provinceList = this.findProvinceList(req, resp);
String provinceJsonStr = JSONArray.fromObject(provinceList).toString();
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.write(provinceJsonStr);
} else if("findCityListByPid".equals(method)) {
String pid = req.getParameter("pid");
List<City> cityList = this.findCityListByPid(req, resp, pid);
String cityJsonStr = JSONArray.fromObject(cityList).toString();
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.write(cityJsonStr);
} else {
try {
throw new Exception("请求出错！");
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 根据省份获取城市列表
private List<City> findCityListByPid(HttpServletRequest req, HttpServletResponse resp, String pid) {
conn = DBHelper.getConn();
String sql = "SELECT * FROM city WHERE pro_id = ?";
ps = (PreparedStatement) DBHelper.prepare(conn, sql);
List<City> cityList = new ArrayList<City>();
try {
ps.setString(1, pid);
ResultSet rs = ps.executeQuery();
while (rs.next()) {
City city = new City();
city.setId(rs.getString("id"));
city.setName(rs.getString("name"));
cityList.add(city);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.close(rs);
DBHelper.close(ps);
DBHelper.close(conn);
}
return cityList;
}
// 获取省份列表
private List<Province> findProvinceList(HttpServletRequest req, HttpServletResponse resp) {
conn = DBHelper.getConn();
String sql = "SELECT * FROM province";
ps = (PreparedStatement) DBHelper.prepare(conn, sql);
List<Province> provinceList = new ArrayList<Province>();
try {
ResultSet rs = ps.executeQuery();
while (rs.next()) {
Province province = new Province();
province.setId(rs.getString("id"));
province.setName(rs.getString("name"));
provinceList.add(province);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBHelper.close(rs);
DBHelper.close(ps);
DBHelper.close(conn);
}
return provinceList;
}
}
效果：
--------------------------------------------------------
自动搜索：类似于angularjs中的双向绑定功能
效果：
前台：
<!-- 自动搜索 --> <input id="search"/>
$("#search").combobox({
mode: "remote",
url: "UserServlet?method=searchName",
valueField: "id",
textField: "username",
//delay: 1000 // 隔多长时间发送一次请求，默认是200毫秒
});
后台： q是固定变量
// 自动搜索
private List<User> findUserListBySearchName(HttpServletRequest req,
HttpServletResponse resp, String q) {
List<User> userList = null;
if (q != null) {
try {
userList = new ArrayList<User>();
Connection conn = DBHelper.getConn();
String sql = "SELECT * FROM user WHERE username LIKE '%"+q+"%'";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
ResultSet rs = ps.executeQuery();
while (rs.next()) {
String id = rs.getString("id");
String username = rs.getString("username");
String password = rs.getString("password");
String sex = rs.getString("sex");
String age = String.valueOf(rs.getInt("age"));
String birthday = rs.getString("birthday");
String city = rs.getString("city");
String salary = rs.getString("salary");
String starttime = rs.getString("starttime");
String endtime = rs.getString("endtime");
String description = rs.getString("description");
User user = new User(id, username, password, sex, age, birthday, city, salary, starttime, endtime, description);
userList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
return userList;
}
浙公网安备 33010602011771号