ssm框架项目功能点（下）

链接上一节的项目，

一，使用ajax实现在当前页面货物补充。

1.业务分析

以管理员身份，进入商品列表，点击库存量。

点击后，库存量变为input框，补充货源变为保存按钮。
点击保存按钮后会改变数据库中的库存，并且可以反复点击。

2.步骤
在遍历商品时 ，给库存量class类名。
在补充货源按钮中写触发函数 οnclick="editKcl(${p.id}, this)

<td class="kcl${p.id} }">${p.kcl }</td>

<input type="button" value="补充货源" onclick="editKcl(${p.id}, this)"/>

在其editKcl函数中传两个参数，第一位商品id，第二个是按钮。

进入script：

// 修改库存
function editKcl(id, btn) {
	// 之前的老值
	var old = $(".kcl" + id).html();
	
	$(".kcl" + id).html("<input type='text' name='' value='" + old + "'/>");
	
	// 按钮替换为  保存
	$(btn).val("保存");
	
	$(btn).attr("onclick", "saveKcl("+ id + ", this)");
}

var old = $(".kcl"+id).html();使用类选择器把原库存量得到，赋值为old。然后$(".kcl" + id).html，把此层框改变为input文本框。
在editKcl函数中替换按钮。

// 保存库存
function saveKcl(editId, editBtn) {
	
	var newTd = $(".kcl" + editId);
	
	// 新输入的值
	var num = newTd.children().val();
	
	$.post("editKcl", {proId: editId, num: num}, function(data){
		
		if(data) {
			newTd.html(num);
			$(editBtn).val("补充货源");
			$(editBtn).attr("onclick", "editKcl(" + editId + ", this)");
		} else {
			alert("网络异常，请稍后重试！");
		}
		
	}, "json");
	
}

var newTd = $(".kcl" + editId);
var num = newTd.children().val();
获取新的库存量的框 newTd，此时newTd已经变为input框。所以要获取新的库存值需要
newTd.children().val(); td的子类input框。得到新库存。
使用ajax 传商品id和库存值，回调函数data返回成功，把保存键又再一次修改为补充货源键。

controller层与service层

@RequestMapping("/editKcl")
	@ResponseBody
	public String editKcl(Integer proId, Integer num) {
		
		String flag = "false";
		try {
			ps.editKcl(proId, num);
			flag = "true";
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return flag;
	}

使用try/catch可以不用if语句进行判断，如果修改错误走catch。

mapper：

void editKcl(@Param("proId")Integer proId, @Param("num")Integer num);

两个参数 使用注解。

<!-- 修改库存量 -->
	<update id="editKcl">
		update tab_product set kcl = #{num} where id = #{proId}
	</update>

二，三级查询。

1，业务分析
新增业务中选择产地，选省会在二级框中显示市级城市。选中二级城市后会自动显示三级的区县。
数据库：

表设计，一级省没有parentID。二级城市有pid有对应的父级id。以此类推。

<tr>
			<td>产地</td>
			<td>
				<select name="sheng">
					<option>---请选择---</option>
				</select>省
				<select name="shi">
					<option>---请选择---</option>
				</select>市
				<select name="xian">
					<option>---请选择---</option>
				</select>县
			</td>
		</tr>

2，步骤
加载页面发送ajax请求

$(function(){
// 进入页面加载省份信息
	$.post("city", function(data){
		$(data).each(function(idx, obj){
			$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=sheng]"));
		});		
	}, "json");
	
	
	// 改变省份时，改变市
	$("[name=sheng]").change(function(){

		var val = $("[name=sheng]").val();
		// 清空之前的市
		$("[name=shi]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=shi]"));
		
		// 清空之前的市
		$("[name=xian]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
		
		$.post("city", {data: val}, function(data){
			$(data).each(function(idx, obj){
				$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=shi]"));
			});		
		}, "json");
	});
	
	// 改变市时，改变县
	$("[name=shi]").change(function(){

		var val = $("[name=shi]").val();
		// 清空之前的市
		$("[name=xian]").empty();
		$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
		
		$.post("city", {data: val}, function(data){
			$(data).each(function(idx, obj){
				$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=xian]"));
			});		
		}, "json");
	});
	
})

在页面加载是就发送请求。

mapper层：

List<City> city(@Param("data")Integer data);

<select id="city" resultType="city">
		select * from tab_city
		<where>
			<if test="data != null">
				and pid = #{data}
			</if>
			<if test="data == null">
				and pid is null
			</if>
		</where>
	</select>