关联框架自带图片表 tb_pictures 根据业务需求添加图片

得到代码生成器生成的代码，之后的操作

关联框架自带图片表 tb_pictures 根据业务需求添加图片

修改 Cotronller

给 cotronller 注入 picture_used_detailsService 用于图片详情的增删改查

如图所示：

/**
 * notes start
 *
 * decription : 用于图片详情的增删改查
 * @Author huangMP
 */
@Resource(name="picture_used_detailsService")
private Picture_Used_DetailsManager picture_used_detailsService;
/**
 * notes end
 */

跳转到新增页面前，把先把主键new出来，并传到前台 (原来是在保存时才new出主键)，需要去保存那里删除主键

如图所示:

在对应的位置黏贴下面代码:

/**
 * notes start
 *
 * decription :         跳转到新增页面前，把先把主键new出来，并传到前台 (原来是在保存时才new出主键)，需要去保存那里删除主键
 * @param
 * @Author huangMP
 */
pd.put("DISHES_ID", this.get32UUID());	//主键
/**
 * notes end
 */

由于业务需求，在删除前，先将其图片使用详情删除

如图所示：

picture_used_detailsService.deleteUsedDetailsAndPictureByContentId( pd.getString("DISHES_ID") );

由于业务需求，在批量删除前先将其图片使用详情删除

如图所示：

for (String id:ArrayDATA_IDS ) {
    picture_used_detailsService.deleteUsedDetailsAndPictureByContentId(id);
    }

由于业务需求，查找时，将其使用的图片查找出来

如图所示：

	for(PageData var : varList){
		String contentId = (String) var.get("DISHES_ID");
		List<PageData> pictureList = picture_used_detailsService.selectPicturesByContentId(contentId);
		var.put("pictureList" , pictureList );
	}

修改 ***list.jsp

在合适的位置，展示相应的图片

如图所示：
```
<th class="center">图片</th>
```

对齐上面表头的 “图片的位置” ，展示相应的图片

如图所示：

<td class='center'>
    <c:forEach items="${var.pictureList}" var="i">
        <a href="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" title="${i.TITLE}" class="bwGal"><img src="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" alt="${i.TITLE}" width="100"></a>
    </c:forEach>
</td>

修改 ***edit.jsp

在添加页面和修改页面的合适的位置添加下面代码，用于添加和展示新增的图片

如图所示：

    <tr>
        <td style="width:75px;text-align: right;padding-top: 13px;">图片:</td>
        <td id="pictureList">
            <a class="btn btn-sm btn-success" onclick="addPictures_( '${pd.DISHES_ID}' );">新增</a>
            <br/>
        </td>
    </tr>

对齐上面表头的 “图片的位置” ，展示相应的图片

如图所示：

<td class='center'>
    <c:forEach items="${var.pictureList}" var="i">
        <a href="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" title="${i.TITLE}" class="bwGal"><img src="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" alt="${i.TITLE}" width="100"></a>
    </c:forEach>
</td>

进入修改页面时，先把相关的图片查找出来并展示

如图所示：

var contentId_ =  $("#DISHES_ID").attr("value");
getPictureListAndShow_( contentId_ );

（这块直接粘贴就好）通过目前该表主键作为图片使用详情表的外键，查找相应的图片,并展示出来

如图所示：

    //弹出新增图片弹框
	function addPictures_(contentId){
		top.jzts();
		var diag = new top.Dialog();
		diag.Drag=true;
		diag.Title ="新增";
		diag.URL = '<%=basePath%>pictures/goAdd.do?contentId=' + contentId;
		diag.Width = 800;
		diag.Height = 490;
		diag.CancelEvent = function(){ //关闭事件
			getPictureListAndShow_( contentId );
			diag.close();
		};
		diag.show();
	}
	//通过 contentId 获取图片集合，并且展示出来
	function getPictureListAndShow_( contentId ){
		$.ajax({
			async: false,
			url: '<%=basePath%>pictures/getPictureList.do',
			data: "contentId=" + contentId ,
			success: function (data) {
				deleteAllPicture_();
				if(data==""){
					//data为空，也就是没有图片
				}else{
					for (var i=0;i<data.length ;i++ ) {
						var li1=$("<img width='100' name='addPicture' src='<%=basePath%>uploadFiles/uploadImgs/"+data[i].PATH+"'>");
						var li2 = $("<a name='addPictureImg' class='btn btn-xs btn-danger' value='"+data[i].PICTURES_ID+"' pathValue='"+data[i].PATH+"' ><i class='ace-icon fa fa-trash-o bigger-120' title='删除'></i></a>");
						$("#pictureList").append(li1);
						$("#pictureList").append(li2);
					}
					$("[name='addPictureImg']").click(function(){ //动态添加单击事件
						var deletePictureId = $(this).attr("value");
						var deletePicturePath = $(this).attr("pathValue");
						deleteOnePicture_( deletePictureId ,deletePicturePath );
						getPictureListAndShow_(contentId);
					});
				}
			}
		});
	}
	//通过 图片id，图片存放路径 删除 新增图片的某一张图片
	function deleteOnePicture_(Id,PATH){
		$.ajax({
			async: false,
			url: '<%=basePath%>pictures/delete.do',
			data: "PICTURES_ID=" + Id +"&PATH="+PATH+"&tm="+new Date().getTime() ,
			success: function (data) {}
		});
	}
	//移除所有图片的展示
	function deleteAllPicture_(){
		$("[name='addPicture']").remove();
		$("[name='addPictureImg']").remove();
	}

点击保存按钮时，判断是否有添加了图片

如图所示：

if(0 == $("[name='addPictureImg']").length ){
	$("#addPicturesButton_").tips({
		side:3,
		msg:'请添加图片',
		bg:'#AE81FF',
		time:2
	});
	$("#addPicturesButton_").focus();
	return false;
}

对齐上面表头的 “图片的位置” ，展示相应的图片

如图所示：

<td class='center'>
    <c:forEach items="${var.pictureList}" var="i">
        <a href="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" title="${i.TITLE}" class="bwGal"><img src="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" alt="${i.TITLE}" width="100"></a>
    </c:forEach>
</td>

对齐上面表头的 “图片的位置” ，展示相应的图片

如图所示：

<td class='center'>
    <c:forEach items="${var.pictureList}" var="i">
        <a href="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" title="${i.TITLE}" class="bwGal">
        <img src="<%=basePath%>uploadFiles/uploadImgs/${i.PATH}" alt="${i.TITLE}" width="100"></a>
    </c:forEach>
</td>

posted @ 2016-12-10 14:54 huangmp 阅读(139) 评论(0) 收藏举报

刷新页面返回顶部

1024

关联框架自带图片表 tb_pictures 根据业务需求添加图片

得到代码生成器生成的代码，之后的操作