jQuery 二级联动（客户端、栏目）

结合项目需求，在编辑时所有数据都可以进行增删改。

1.entity

public class OtherNews extends BaseModel {


    private static final long serialVersionUID = 1L;
    
    private Integer assetId; //新闻id
    private String title; //标题
    private Date createDate;//发布时间
    private String source;//客户端          
    private String channel;//栏目
    private Integer commentCount;//评论数
    private Integer newsCount;//篇幅
    private Integer startingCount;//首发次数
    private Integer id;//新华社新闻id
    private Map<String,String>  channelMap;//客户端所对应栏目
}

2.java-客户端回显

public String showOtherPopupNewsList(){
        try {
            Map<String, String> chartTypeMap = showOtherSourceList();
            daping = new DaPing();
            daping.setAppType(Integer.parseInt(appType));
            daping.setStartingCount(1);
            dapingList = comparisonService.findXhsPopupNewsList(daping);
            if(!isEmpty(dataId)){
                otherNewsList = comparisonService.findByIdOtherNews(Integer.parseInt(dataId));
            }else if(dapingList.size()>0){
                otherNewsList = comparisonService.findByIdOtherNews(dapingList.get(0).getId());
            }
            for (int i = 0; i < otherNewsList.size(); i++) {
                Map<String, String> chartTypeMapName = showOtherColumnList(otherNewsList.get(i).getSource());
                otherNewsList.get(i).setChannelMap(chartTypeMapName);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "showOtherPopupNewsList";
    }

3.jsp-循环展示客户端以及客户端所对应栏目

<td style="width:150px;text-align: center;">
						<input class="otherSource_input" style="width:150px;border:0;background:transparent;text-align: center;" 
							type="text" value="<s:property value="source" escape="false" />">
						<div class="otherSource_div">
							<select name="otherNewsList[<s:property value='#st.index' />].source" οnchange="selectColumnInfo('<s:property value='#st.index' />')" style="width:150px;" class="form-control" >
							    <s:iterator value="chartTypeMap" status="stat">
									<option <s:if test="source==value">selected="selected"</s:if> value="<s:property value='value' />"><s:property value='value' /></option>
								</s:iterator> 
							</select>
						</div>
					</td>

<td style="width:150px;">
						<input class="otherChannel_input" style="width:150px;border:0;background:transparent;text-align: center;" 
								type="text" value="<s:property value='channel' />">
						<div class="otherChannel_div">
							<select id="channel<s:property value='#st.index' />" name="otherNewsList[<s:property value='#st.index' />].channel" style="width:150px;" class="form-control" >
							    <s:iterator value="channelMap" status="stat">
									<option <s:if test="channel==value">selected="selected"</s:if> value="<s:property value='value' />"><s:property value='value' /></option>
								</s:iterator>
							</select>
						</div>
					</td>

4.js-查询客户端所对应栏目

function selectColumnInfo(idIndex){
	var sourceName = $("#otherNewsList_form select[name='otherNewsList["+idIndex+"].source']").find('option:selected').val();
	try{
		var url = getBaseURL() + '/client/Comparison!selectColumnInfo.action';
		var data = {"sourceType":sourceName};
	   	var success=function(o){
	   		var data = jQuery.parseJSON(o);
	   		var channel="";
	   		channel+="<select name='otherNewsList["+idIndex+"].channel' style='width:130px;' class='form-control' >" 
	   		$.each(data,function(k,v){
	   			channel+="<option value="+v+">"+v+"</option>"
	   		})
	   		channel+="</select>"
	   		$("#channel"+idIndex).html(channel);
		};
		var error=function(o){
			return false;
		};
		$.baseAjax(url, 'POST',data,success,error);	
	}catch(e){
		console.log(e);
	}
}

5.java-查询客户端所对应栏目

public void selectColumnInfo(){
        try {
            List<Map<String, Object>> templist = GetXML.getMapList("AppInfoType.xml", 2);
            String folderValue = "";
            chartTypeMapName = new HashMap<String, String>();
            if(templist != null && templist.size() > 0){
                for(Map<String, Object> map:templist){  
                    folderValue = (String)map.get("name");
                    if(sourceType.equals(folderValue)){
                        List<Map<String, Object>> tempChildrenlist = (List<Map<String, Object>>)map.get("children");
                        String childKey = "";
                        String childValue = "";
                        if(tempChildrenlist != null && tempChildrenlist.size() > 0){
                            for(Map<String, Object> mapChild:tempChildrenlist){
                                childKey = (String)mapChild.get("key");
                                childValue = (String)mapChild.get("value");
                                chartTypeMapName.put(childKey,childValue);
                            }
                        }
                    
                    }
                }
            }
            printOut(JSON.toJSONString(chartTypeMapName));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

6.js-动态添加

function addsOtherPopupNewsList(divId,id,timeIdName,chartTypeMap){
	chartTypeMap = chartTypeMap.substring(1,chartTypeMap.length-1);
	var chartTypeMaps = chartTypeMap.split(",");
	var options = "";
	var str = "";
	for(var i=0 ;i<chartTypeMaps.length;i++){
		str = trim(chartTypeMaps[i]);
		if(str.length==7){
			options += '<option value='+str[3]+str[4]+str[5]+str[6]+'>'+str[3]+str[4]+str[5]+str[6]+'</option>';
		}else{
			options += '<option value='+str[2]+str[3]+str[4]+str[5]+'>'+str[2]+str[3]+str[4]+str[5]+'</option>';
		}
	}
	var row = jQuery("#"+divId).find("tr").length;
	$("#"+divId).append("<tr class='"+divId+row+"'>" +
			"<td style='width:350px;' >" +
				"<input name='otherNewsList["+row+"].id'  type='text' value='"+id+"' hidden='hidden' style='width:120px;'>" +
				"<input class='titleInput' name='otherNewsList["+row+"].title' type='text' style='width:350px;'></td>" +
			"<td style='font-weight: bold;' >" +
			    "<select name='otherNewsList["+row+"].source' οnchange='selectColumnInfo("+row+");' style='width:130px;' class='form-control' >"+
				""+options+"</select></td>" +
			"<td style='font-weight: bold;width:140px;' >" +
				"<div class='pull-left'>" +
				"<div class='input-group input-group-sm' style='max-width:140px'>"+
				"<input id='dtp_input"+timeIdName+row+"' class='form-control input-sm createDate' name='otherNewsList["+row+"].createDate' type='text' style='width:140px;border:1;background:transparent;' value=''>" +
				"<span id='span_dtp_input"+timeIdName+row+"' οnclick=WdatePicker({el:'dtp_input"+timeIdName+row+"',dateFmt:'yyyy-MM-dd'}) class='input-group-addon'>"+					   
				"<span class='glyphicon glyphicon-calendar'></span>" +
				"</span></div></div></td>" +
			"<td style='font-weight: bold;' >" +
			    "<select id='channel"+row+"' name='otherNewsList["+row+"].channel' style='width:130px;' class='form-control' >" +
			    	"<option value='热点'>热点</option>" +
			    	"<option value='锐度'>锐度</option>" +
			    	"<option value='教育'>教育</option>" +
			    	"<option value='社会'>社会</option>" +
			    	"<option value='文化'>文化</option>" +
			    	"<option value='财经'>财经</option>" +
			    	"</select></td>" +
			"<td style='font-weight: bold;' >" +
				"<input class='ydata' name='otherNewsList["+row+"].commentCount' type='text' style='width:140px;'></td>" +
			"<td style='font-weight: bold;' >" +
				"<input class='ydata' name='otherNewsList["+row+"].newsCount' type='text' style='width:140px;'></td>" +
			"<td><a href='javascript:void(0);'style='text-decoration:none;'οnclick='delsPopupNewsList("+divId+","+row+")'><img src='"+getBaseURL()+"/images/client/index/porlayout/delete.png' /></a></td></tr>");
}