实现添加相关资源的弹出ifreame 并实现多选框

项目中：语音导览添加相关展品 字段：relactiveExhibitItem 长度 varchar2000

<div class="control-group">
            <label class="control-label">相关展品：</label>
            <div class="controls">
                <input type="button" value="选择" id="itemIds"  onclick="selectExhibitItem(this.id)" />
                <div id="exhibitItemDiv" class="box" style="width:100%;font-size:14px;" >
                    <form:input type="hidden" id="itemIds_input" path="relactiveexhibititem" /> 
                    //由于实际字段值为：["90c720bc42b441328aae901a1f140bae","cafeab8fc5cd492698e9a5cbf39ebc87"]，所以隐藏不显示

　　　　　　　　　　　　<form:input type="hidden" id="itemIds_name" path="relactiveexhibititemName" />
                    <ol id="itemIds_ol"></ol>
                    <script type="text/javascript">
                    // 相关作品的id集合
                    var itemIdList = ${hmlwxGuideVoices.relactiveexhibititem};
                    // 
                    var itemNameList = '${hmlwxGuideVoices.relactiveexhibititemName}'.split(",");
                    if(itemIdList && itemIdList.length>0){

                       //为了动态的追加显示label 
                        for(var i=0;i<itemIdList.length;i++){
                            var id=itemIdList[i];
                            var name = itemNameList[i];
                            var itemli = "<li id=itemIds_"+id+"><label style=\"max-width:100px;max-height:20px;_height:100px;border:0;padding:3px;\"/>"+name+"&nbsp;&nbsp;<a href=\"javascript:\" onclick=\"removeItems('itemIds_"+id+"','"+name+"');\">×</a></li>";    
                            var $img = $(itemli);
                            $("#itemIds_ol").append($img);
                        }
                    }
 </script>
        </div>
    </div>
</div>

//选择展品
        function selectExhibitItem(id){
            top.$.jBox.open("iframe:${ctx}/hmlwx/hmlwxExhibitItem/selectList","选择关联展品", 1000, 500, {
                buttons:{"确定":"ok","关闭":"true"}, 
                submit:function(v, h, f){
                    if (v=="ok"){
　　　　　　　　　　　　　　//获取被选中的options 的标签
                        var chkItem = top.$("#jbox-iframe").contents().find('input:checkbox[name=chkItem]:checked');
                        var resIds="",resNames="";
                        var itemValue = $("#"+id+"_input").val();
                        alert("itemValue"+ itemValue);
                        var nameValue = $("#"+id+"_name").val();
                        alert("nameValue:"+ nameValue);
                        var isSelect = false;
                        chkItem.each(function (i) {
                            //alert($(this).val());
                            var idTemp = $(this).val();
                            alert("idTemp:"+ idTemp);
                            var nameTemp = $(this).parent().next().text();
                            alert("nameTemp:"+ nameTemp);
                            if(itemValue.indexOf(idTemp) == -1 ){
                                nameTemp = nameTemp.replace('\\s','').trim();
                                var itemli = "<li id=itemIds_"+idTemp+"><label style=\"max-width:100px;max-height:20px;_height:100px;border:0;padding:3px;\"/>"+nameTemp+"&nbsp;&nbsp;<a href=\"javascript:\" onclick=\"removeItems('itemIds_"+idTemp+"','"+nameTemp+"');\">×</a></li>";    
                                var $img = $(itemli);
                                $("#itemIds_ol").append($img);
                                
                                if(itemValue =='[]' || itemValue=='')
                                    itemValue = "[\""+idTemp+"\"]";
                                else
                                    itemValue = itemValue.replace(",]",",\""+idTemp+"\"]").replace("]",",\""+idTemp+"\"]");
                                
                                $("#"+id+"_input").val(itemValue);
                                if (nameValue == '' || (nameValue != '' && nameValue.indexOf(nameValue.length -1, nameValue.length)) == ",") {
                                    nameValue += nameTemp;
                                } else {
                                    nameValue += "," + nameTemp;
                                }
                                $("#"+id+"_name").val(nameValue);
                                resIds += "\"" + idTemp+"\",";
                            }
                            isSelect = true;
                        });
                        
                        
                        if(isSelect || (resIds!=null&&resIds.length>0)){
                            //转成json字符串
                            //$("#"+id+"_input").val("["+resIds.substr(0,resIds.length-1)+"]");
                            //$("#"+id+"_name").val(resNames.substr(0,resIds.length-1));
                        }else{
                            top.$.jBox.alert("未选择关联展品");
                            return false;
                        }
                        
                    }
                }, loaded:function(h){
                    $(".jbox-content", top.document).css("overflow-y","hidden");
                }
            });
        }

选择展品的jsp

<c:forEach items="${page.list}" var="hmlwxExhibitItem">
            <tr>
                <td><input type="checkbox" name="chkItem" value='${hmlwxExhibitItem.id}' class="select"/></td>
                <td><a name="itemName" href="${ctx}/hmlwx/hmlwxExhibitItem/form?id=${hmlwxExhibitItem.id}&view=0">
                    ${hmlwxExhibitItem.name}
                </a></td>
                <td>
                    ${hmlwxExhibitItem.creationDate}
                </td>
                <td>
                    ${hmlwxExhibitItem.spec}
                </td>
                <td>
                    ${hmlwxExhibitItem.descr}
                </td>
                <td>
                    ${hmlwxExhibitItem.createBy.name}
                </td>
                <td>
                    <fmt:formatDate value="${hmlwxExhibitItem.createDate}" pattern="yyyy-MM-dd"/>
                </td>
            </tr>
        </c:forEach>

 

再看后台的controller中保存的方法、

@RequiresPermissions("hmlwx:hmlwxGuideVoices:view")
    @RequestMapping(value = "form")
    public String form(HmlwxGuideVoices hmlwxGuideVoices, Model model) {
        HmlwxGuideVoicesDTO hmlwxGuideVoicesDTO = new HmlwxGuideVoicesDTO();//扩展类 新增字段为关联作品的 名称集合字段

        try {
            BeanUtils.copyProperties(hmlwxGuideVoicesDTO, hmlwxGuideVoices);
         //对象的复制 把hmlwxGuideVoices 复制到 hmlwxGuideVoicesDTO 里
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        // 查找展品相关数据
       //判断 关联作品字段中是否有值
        if (StringUtils.isNotEmpty(hmlwxGuideVoices.getRelactiveexhibititem())
                && !StringUtils.equals(hmlwxGuideVoices.getRelactiveexhibititem(), "[]")) {
 //若有值先转化为json对象            
       JSONArray json = JSONArray.fromObject(hmlwxGuideVoices.getRelactiveexhibititem());
            String name = "";
            if (json.size() > 0) {
            //根据作品 id 找到 Name 并 拼接成一个字符转 以，分隔 
                for (int i = 0; i < json.size(); i++) {
                    HmlwxExhibitItem hmlwxExhibitItem = hmlwxExhibitItemService.get(json.getString(i));
                    name += hmlwxExhibitItem.getName() + ",";
                }
            }
            if (StringUtils.isNotEmpty(name)) {
                //切掉最后一个,
                name = name.substring(0, name.length() - 1);
            }
            hmlwxGuideVoicesDTO.setRelactiveexhibititemName(name);
        }
        // 查找展厅相关数据
        if (StringUtils.isNotEmpty(hmlwxGuideVoices.getExhibitionRoomId())
                && !StringUtils.equals(hmlwxGuideVoices.getExhibitionRoomId(), "[]")) {
            String id = hmlwxGuideVoices.getExhibitionRoomId().replaceAll("\"", "").replace("[", "").replace("]", "");
            // 只有一个展厅
            HmlwxExhibitionRoom hmlwxExhibitionRoom = hmlwxExhibitionRoomService.get(id);
            hmlwxGuideVoicesDTO.setExhibitionRoomName(hmlwxExhibitionRoom.getName());
        }

        model.addAttribute("hmlwxGuideVoices", hmlwxGuideVoicesDTO);
        return "modules/hmlwx/hmlwxGuideVoicesForm";