首先，寫一個簡單的只有一行的例子（以前寫的）
第一步：搭建Struts2開發環境，並導入Mysql的驅動包以及JSon使用到的jar包(所有)
第二步：搭建DBUtils環境（以C3P0作爲連接池）
第三步：準備用於測試的數據庫表和記錄
#
# Source for table "t_province"
#
DROP TABLE IF EXISTS `t_province`;
CREATE TABLE `t_province` (
`pid` int(2) NOT NULL AUTO_INCREMENT,
`pname` varchar(12) NOT NULL DEFAULT '',
PRIMARY KEY (`pid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
#
# Data for table "t_province"
#
INSERT INTO `t_province` VALUES (1,'北京市'),(2,'天津市'),(3,'重慶市'),(4,'上海市'),(5,'山東省');
#
# Source for table "t_city"
#
DROP TABLE IF EXISTS `t_city`;
CREATE TABLE `t_city` (
`cid` int(3) NOT NULL AUTO_INCREMENT,
`cname` varchar(18) NOT NULL DEFAULT '',
`pid` int(2) NOT NULL DEFAULT '0',
PRIMARY KEY (`cid`),
KEY `fk_pid` (`pid`),
CONSTRAINT `fk_pid` FOREIGN KEY (`pid`) REFERENCES `t_province` (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
#
# Data for table "t_city"
#
INSERT INTO `t_city` VALUES (1,'海淀區',1),(2,'東城區',1),(3,'西城區',1),(4,'昌平區',1),(5,'朝陽區',1),(6,'天津市',2),(7,'重慶市',3),(8,'上海市',4),(9,'濟南市',5),(10,'濟寧市',5),(12,'棗莊市',5),(13,'青島市',5),(14,'煙臺市',5),(15,'濰坊市',5),(16,'聊城市',5),(17,'菏澤市',5),(18,'日照市',5);
第四步：創建實體和用於與數據庫打交道的Dao
public class Province {
private Integer pid;
private String pname;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
public class City {
private Integer cid;
private String cname;
private Integer pid;
public Integer getCid() {
return cid;
}
public void setCid(Integer cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
}
public interface ProVinceCityDao {
public abstract List<Province> getAllProvinces();
public abstract List<City> getCitysByPid(int pid);
}
public class ProVinceCityDaoImpl implements ProVinceCityDao {
@Override
public List<Province> getAllProvinces() {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT PID,PNAME FROM T_PROVINCE ORDER BY PID",
new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
@Override
public List<City> getCitysByPid(int pid) {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT CID,CNAME,PID FROM T_CITY WHERE PID=? ORDER BY CID",
new BeanListHandler<City>(City.class),new Object[]{pid});
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
第五步：Action和Struts2的配置文件
@SuppressWarnings("serial")
public class ProvinceCityAction extends ActionSupport {
//接收pid
private Integer pid;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String listProvince() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<Province> provices = proVinceCityDao.getAllProvinces();
JSONArray jSONArray = JSONArray.fromObject(provices);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
//向瀏覽器寫數據
response.getWriter().print(jSONArray.toString());
return null;
}
public String listCity() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<City> citys = proVinceCityDao.getCitysByPid(this.getPid());
JSONArray jSONArray = JSONArray.fromObject(citys);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print(jSONArray.toString());
return null;
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<constant name="struts.devMode" value="true" />
<package name="pro_cty" extends="struts-default">
<action name="procty_*" class="com.sunyanbo.web.action.ProvinceCityAction" method="{1}">
<result name="success">/message.jsp</result>
</action>
</package>
</struts>
第六步：導入JQuery需要的js文件和需要的jsp頁面
<html>
<head>
............
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">請選擇...</option>
</select>
<select id="city" name="city">
<option value="">請選擇...</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.post("${pageContext.request.contextPath}/procty_listProvince.action",function(data,textStatus){
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].pid);
$option.text(dataObj[i].pname);
$("#province").append($option);
}
});
//省的變化引起城市的變化
$("#province").change(function(){
var pid = this.value;
$.post("${pageContext.request.contextPath}/procty_listCity.action",{pid:pid},function(data,textStatus){
$("#city option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].cid);
$option.text(dataObj[i].cname);
$("#city").append($option);
}
});
});
});
</script>
</html>
好了，看完這個例子，進入今天的問題
需求是，選擇一個軟件項目過程，顯示它包含的任務信息。例如，項目規劃階段，包括需求分析，概要設計等；項目執行階段，包括編碼、測試等。
一個頁面有多行，JS代碼如下：
<script type="text/javascript">
function changeJobTask(process){
var processId = $(process).val();
//獲取當前列所在的行，並在該行尋找class爲jobTask1的節點
var $tempObj = $(process).parent().parent().children().find(".jobTask1");
$.post("${pageContext.request.contextPath}/workLogAction/doShowTaskByProId.do",{processId:processId},function(data,textStatus){
$tempObj.find("option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
/**字符串轉換成json對象*/
var dataObj = eval('(' + data + ')');
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].taskName);
$option.text(dataObj[i].taskName);
$tempObj.append($option);
}
});
}
</script>
使用方法：
<!--第一行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>
<!--第二行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>
<!--第三行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>
【Jquery獲取節點名稱的方法】$('#elementId').get(0).tagName好了，看完這個例子，進入今天的問題
需求是，選擇一個軟件項目過程，顯示它包含的任務信息。例如，項目規劃階段，包括需求分析，概要設計等；項目執行階段，包括編碼、測試等。
一個頁面有多行，JS代碼如下：
<script type="text/javascript">
function changeJobTask(process){
var processId = $(process).val();
//獲取當前列所在的行，並在該行尋找class爲jobTask1的節點
var $tempObj = $(process).parent().parent().children().find(".jobTask1");
$.post("${pageContext.request.contextPath}/workLogAction/doShowTaskByProId.do",{processId:processId},function(data,textStatus){
$tempObj.find("option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
/**字符串轉換成json對象*/
var dataObj = eval('(' + data + ')');
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].taskName);
$option.text(dataObj[i].taskName);
$tempObj.append($option);
}
});
}
</script>
使用方法：
<!--第一行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>
<!--第二行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>
<!--第三行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" οnchange="changeJobTask(this)">
<option value="" selected="selected">--請選擇--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--請選擇--</option>
</select>
</td>
</tr>