三级联动

从数据库获取数据，在页面显示，获取成三级联动。三级联动无疑就是两个二级联动，但是又有所不同，主要是体现在初始化上面。

---

一：三级联动的数据准备，例如实验室—》老师—–》项目三者之间的关系
1：serviceImpl数据处理层
实验室与老师数据：Map<实验室名称,Map<教师id，教师名称>>

public Map<String, Map<String, String>> getFieldMap() {
        Map<String, Map<String, String>> map=new HashMap<String, Map<String,String>>();
        List<CustomerBaseInfo> cList=this.customerBaseInfoDao.getAllCustomer();
        if(cList!=null){
            for(CustomerBaseInfo cInfo:cList){
                Map<String, String> filed=new HashMap<String, String>();
                List<WindFieldInfo> wList=this.windFieldInfoDao.getIdWindInfo(cInfo.getId());
                if(wList!=null){
                    for(WindFieldInfo wInfo:wList){
                        filed.put(wInfo.getId().toString(), wInfo.getFieldName());
                    }
                }
                map.put(cInfo.getCustomerName(), filed);
            }
        }
        return map;
    }

教师与项目数据：Map<教师id，List<项目名称>>

public Map<String, List<String>> getWindProject() {
        Map<String, List<String>> map=new HashMap<String, List<String>>();
        List<WindFieldInfo> wlist=windFieldInfoDao.getAllWindInfo();
        if(wlist!=null){
            for(WindFieldInfo w:wlist){
                List<String> list=new ArrayList<String>();
                if(w.getProjectName()!=null){
                    String[] str=w.getProjectName().split(";");
                    if(str!=null){
                        for(String s:str){
                            list.add(s);
                        }
                    }else{
                        list.add(w.getProjectName());
                    }
                }
                map.put(w.getId().toString(), list);
            }
        }
        return map;
    }

2：action数据交互层：注意把map数据转换成json数据类型，便于js使用，ValueContext.putValueContext(“jsonMap”, jsonMap)-自定义的方法，类似于request

public String input() {
        Map<String, Map<String, String>> fMap=serviceTrackingInfoService.getFieldMap();
        ValueContext.putValueContext("fMap", fMap);
        if(fMap!=null){
            JSONObject jsonMap=JSONObject.fromObject(fMap);
            ValueContext.putValueContext("jsonMap", jsonMap);
        }
        Map<String, List<String>> projectMap=serviceTrackingInfoService.getWindProject();
        if(projectMap!=null){
            JSONObject pMap=JSONObject.fromObject(projectMap);
            ValueContext.putValueContext("pMap", pMap);
        }
        List<String> uList=serviceTrackingInfoService.getUserList();
        ValueContext.putValueContext("uList",
                JSONArray.fromObject(uList));
        return "input";
    }

二：与页面交互，注意初始化
1：jquery代码处理

<script type="text/javascript">
$(function(){
    var map  = ${jsonMap};
    var value = $("select[parent]:eq(0)").val();
    var list = map[value];
    var child = $("select[child]:eq(0)");

    for(var key in list){
        child.append("<option value='"+key+"'>"+list[key]+"</option>");
    }
    $("select[parent]").change(function(){
        var value = $(this).val();
        var list = map[value];
        var child = $("select[child]:eq(0)");
        child.empty();
        for(var key in list){
            child.append("<option value='"+key+"'>"+list[key]+"</option>");
        }
        var projectMap  = ${pMap};
        var value1 = $("select[name='windFieldInfo.id']:eq(0)").val();
        var list1 = projectMap[value1];
        var child1 = $("select[name='projectName']:eq(0)");
        child1.empty();
        for(var key in list1){
            child1.append("<option value='"+list1[key]+"'>"+list1[key]+"</option>");
        }
    });
    var projectMap  = ${pMap};
    var value = $("select[name='windFieldInfo.id']:eq(0)").val();
    var list = projectMap[value];
    var child = $("select[name='projectName']");
    for(var key in list){
        child.append("<option value='"+list[key]+"'>"+list[key]+"</option>");
    }
    $("select[name='windFieldInfo.id']").change(function(){
        var value = $(this).val();
        var list = projectMap[value];
        var child = $("select[name='projectName']:eq(0)");
        child.empty();
        for(var key in list){
            child.append("<option value='"+list[key]+"'>"+list[key]+"</option>");
        }
    });
})
</script>

2：jsp页面

<tr>
    <td>实验室：</td>
    <td><select name="customerName" parent="true" >
        <s:iterator value="#fMap.keySet" >
<option value="<s:property/>"><s:property/></option>
        </s:iterator>
        </select></td>
</tr>   
<tr>
    <td>教师：</td>
    <td><select name="windFieldInfo.id" child="true" > </select></td>
<tr>
    <td>所属项目：</td>
    <td><select name="projectName" ></select></td>
</tr>

三：特别注意一点的是，如果在做修改页面的时候，三级联动select就需要显示特定的数据，select就需要初始化：

<script type="text/javascript">
$(function(){
    var map  = ${jsonMap};
    var customer="${customer}";
    $("select[parent]").find("option[value='"+customer+"']").attr("selected",true);
    var value = $("select[parent]").val();
    var list = map[value];
    var child = $("select[child]");    
    for(var key in list){
        child.append("<option value='"+key+"'>"+list[key]+"</option>");
        var fieldId="${fieldId}";
        $("select[child]").find("option[value='"+fieldId+"']").attr("selected",true);
    }
    $("select[parent]").change(function(){
        var value = $(this).val();
        var list = map[value];
        var child = $("select[child]:eq(0)");
        child.empty();
        for(var key in list){
            child.append("<option value='"+key+"'>"+list[key]+"</option>");
        }
        var projectMap  = ${pMap};
        var value1 = $("select[name='windFieldInfo.id']:eq(0)").val();
        var list1 = projectMap[value1];
        var child1 = $("select[name='projectName']:eq(0)");
        child1.empty();
        for(var key in list1){
            child1.append("<option value='"+list1[key]+"'>"+list1[key]+"</option>");
        }
    });
    var projectMap  = ${pMap};
    var value = $("select[name='windFieldInfo.id']").val();
    var list = projectMap[value];
    var child = $("select[name='projectName']");   
    for(var key in list){
        child.append("<option value='"+list[key]+"'>"+list[key]+"</option>");
        var projectName="${projectName}";
        $("select[name='projectName']").find("option[value='"+projectName+"']").attr("selected",true);
    }
    $("select[name='windFieldInfo.id']").change(function(){
        var value = $(this).val();
        var list = projectMap[value];
        var child = $("select[name='projectName']:eq(0)");
        child.empty();
        for(var key in list){
            child.append("<option value='"+list[key]+"'>"+list[key]+"</option>");
        }
    });

})
</script>