学步园

9）EasyMock在单元测试的使用

这次可能先分享3-6点的知识，感觉东西太多。写下来太长了。

--------------------------------分割一下---------------------

那我们首先讲第三点：三级联动

VM结构：

<td width="86" align="right">商品分类：</td>
   <td width="350">
      <select class="inp_1" id="top" name="consultationCondition.level1Id"onchange="searchSec(this.value);">
        #if($!topSorts)
          <option value="" #if(!$!consultationCondition.level1Id) selected="selected" #end>选择一级分类</option>
		#foreach($sort in $topSorts)
                      <option value="$!sort.id" #if($!sort.id == $!consultationCondition.level1Id) selected="selected" #end >$!sort.name</option>
                 #end
	#end
      </select>
      <select class="inp_1" id="sec" name="consultationCondition.level2Id" onchange="searchThi(this.value);">
        #if($!secSortList)
           <option value="" #if(!$!consultationCondition.level2Id) selected="selected" #end>选择二级分类</option>
		#foreach($sort in $secSortList)
                       <option value="$!sort.id" #if($!sort.id == $!consultationCondition.level2Id) selected="selected" #end >$!sort.name</option>
                #end
	#end
      </select>
      <select class="inp_1" name="consultationCondition.level3Id" id="thi">
	 #if($!thirdSorts)
            <option value="" #if(!$!consultationCondition.level3Id) selected="selected" #end>选择三级分类</option>
		#foreach($sort in $thirdSorts)
                       <option value="$!sort.id" #if($!sort.id == $!consultationCondition.level3Id) selected="selected" #end >$!sort.name</option>
                #end
	 #end
      </select>
</td>

页面这里，需要给大家做一下说明：

topSorts变量是进入此页面，就必须初始好了的。searchSec（）方法当一级分类改变时，去查询二级分类；searchThi（）当二级分类改变时，去查询三级分类。现在整个逻辑应该好理解了。

JS调用代码如下

function searchSec(parentId){
		$('#thi').empty();
		$('#sec').append($("<option value=''>"+"请选择"+"</option>"));
		if(parentId == ""){
			$('#sec').append($("<option value=''>"+"请选择"+"</option>"));
			$('#sec').empty();
			return;
		}
		jQuery.ajax({   
     		type : "post",
    		url : "$!homeModule.getTarget("/relation/getSortByParent.action")",
    		data : "parentId="+parentId, 
			dataType : "json",  //返回json数据
    		success: getSec, 
       		error : function(data){
				alert("查询失败");
    		}
		});
}
function getSec(data){
		var pathArry = eval(data);
		$('#sec').empty();
		$('#sec').append($("<option value=''>"+"请选择"+"</option>"));
		for(var i = 0,len = pathArry.length; i<len; i++){
			$('#sec').append($("<option value='"+pathArry[i].id+"'>"+pathArry[i].name+"</option>"));
		}
}
function searchThi(parentId){
		if(parentId == ""){
			$('#thi').empty();
    			$('#thi').append($("<option value=''>"+"请选择"+"</option>"));
    			return;
			}
		jQuery.ajax({   
     		type : "post",
    		url : "$!homeModule.getTarget("/relation/getSortByParent.action")",
    		data : "parentId="+parentId, 
			dataType : "json",  //返回json数据
    		success: getThi, 
       		error : function(parentId){
				alert("查询失败");
    		}
		});
}
function getThi(data){
		var pathArry = eval(data);
		$('#thi').empty();
		$('#thi').append($("<option value=''>"+"请选择"+"</option>"));
		for(var i = 0,len = pathArry.length; i<len; i++){
			$('#thi').append($("<option value='"+pathArry[i].id+"'>"+pathArry[i].name+"</option>"));
		}
}

这获取二级与三级分类的JS方法，基本思路都是一样的，那主要针对第二级分类进行详解一下：

首先需要将第一级分类的Id作为参数传进来，在获取第二级分类之前，先做一些前期的准备，将第三级分类置为空，将第二级分类设置为请选择，还有判断一下参数是否为空，当这些都满足的时候，再做post请求第二级分类数据。

后台也校验通过之后，将返回数据，ajax接受，success后再调用动态组装html代码的逻辑函数，也就是上面的getSec（）；值得注意的是：请求后服务器响应的数据格式是JsonArray的，这个用了eval(data)方式处理了一下。

那现在来看一下后端的代码是如何处理的：

public void getSortByParent(){
    response.setCharacterEncoding("utf-8");
    List<Map> chilidMapList = new ArrayList<Map>();
	if (parentId != null) {
		List<ProductSort> sorts = sortsService.getSortsByParent(parentId);
		for(ProductSort temp : sorts){
			Map<String, String> sortMap = new HashMap<String, String>();
			sortMap.put("id", String.valueOf(temp.getId()));
			sortMap.put("name", temp.getName());
			chilidMapList.add(sortMap);
		}
	}
	JSONArray json = JSONArray.fromObject(chilidMapList);
	try {
		response.getWriter().write(json.toString());
	} catch (IOException e) {
	}
}

从这里能看出，表结构如key-value一样，再多一个字段，parentID，就成了。首先，对响应的数据做了一个chartset的设置，数据结构：list里存map，这都好理解。这些分类都是key-value构成的，这后将数据转换成一个Json数组，用Writer写回。

---------------------------进行分割---------------------------------------

Every man is the master of his own fortune

每个人都是他自己的命运的主宰。

---------------------------------------------回来继续--------------------------

4) Select页面标签的变种

页面构成如下：

<td align="right">商品采销员：</td>
<td>
    <div id="storeDiv1" style="width:40px;height: 30px;"></div>
</td>
<input type="hidden" id="addFormStoreId" name="consultationCondition.cgid" value="$!consultationCondition.cgid"/>
<textarea id="adminId" style="display:none">$!admins</textarea>

当然还需要js的配合，看下面：

<script>
    var admin = document.getElementById("adminId").value;
    var value = document.getElementById("addFormStoreId").value;
    var stores1 = new JSelect(admin,"id","name");
    stores1.setPageSize(15);    
    stores1.setSelectValue(value);
    stores1.render("storeDiv1","addFormStoreId");            
</script>

当然这只是一部分基本的处理，还需要引入一个js插件，需要的话，在发给大家吧，毕竟个自己做的备忘。

两个隐藏标签，标签textarea标签里包含了所有的采销员的key-value信息，将输入的信息，查看到后，在渲染到div中去，有点google搜索推荐那种味道，看起了很爽的。当然了，admins变量是初始页面就必须要有才信息。

public String getAdmins() {
	response.setCharacterEncoding("utf-8");
	List<Map> chilidMapList = new ArrayList<Map>();

	List<Admin> admins = getAllAdmins();
	for (Admin temp : admins) {
		Map<String, String> sortMap = new HashMap<String, String>();
		sortMap.put("id", String.valueOf(temp.getId()));
		sortMap.put("name", temp.getOpName());
		chilidMapList.add(sortMap);
	}

	JSONArray json = JSONArray.fromObject(chilidMapList);
	return json.toString();
}

一个东西，又告一段落了，下面，猜到了，分割休闲

------------------------------------------------分割线-----------------------------------

5）Ajax处理局部页面

这一点就略过吧，三级联动其实就用到了ajax了的。这个给补一个定位光标的吧：

<textarea id="t_sword" name="consultation.ureply" cols="60" rows="6">您好！感谢您XXXXX</textarea>

需求就是：每当打开的时候，光标定位到您好！之后，感谢之前。

总￥2616