三級聯動

從數據庫獲取數據，在頁面顯示，獲取成三級聯動。三級聯動無疑就是兩個二級聯動，但是又有所不同，主要是體現在初始化上面。

---

一：三級聯動的數據準備，例如實驗室—》老師—–》項目三者之間的關係
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>