javaScript：后台管理功能

HTML:

<%@ page contentType="text/html; charset=UTF-8" session="false"%>
<%@ include file="/WEB-INF/jspf/import.jspf"%>
<div class="pageContent">
<form method="post"
action="${ROOT}/admin/appcontent/${method}.do?appContentId=${param.appContentId}&redirect=${param.redirect}"
class="pageForm required-validate"
onsubmit="return checkFormValid(this, navTabAjaxDone);">
<div class="pageFormContent" layoutH="56">
<fieldset>
<legend>内容基础信息 </legend>
<c:if test="${method == 'update'}">
<div class="unit">
<label style="width: 120px;">创建者: </label> <input
class="textInput" readonly="true" type="text" name="createBy"
maxlength="50" value="${entity.createBy}" size="35" />
</div>
<div class="unit">
<label style="width: 120px;">创建时间: </label> <input
class="textInput" readonly="true" type="text" name="createDate"
value="${geli:display(entity,'createDate')}" size="35" />
</div>
</c:if>
<div class="unit">
<label style="width: 120px;">来源: </label> <input type="hidden"
value="${entity.refer}" name="oldRefer" /> <select class="combox"
name="refer" id="refer" onchange="onChange()">
<option value="1" ${entity.refer == 1 ? 'selected' : ''}>文章</option>
                    <option value="2" ${entity.refer == 2 ? 'selected' : ''}>专题</option>
                    <option value="3" ${entity.refer == 3 ? 'selected' : ''}>视频</option>
                    <option value="4" ${entity.refer == 4 ? 'selected' : ''}>食谱</option>
                    <option value="5" ${entity.refer == 5 ? 'selected' : ''}>图说</option>
                    <option value="6" ${entity.refer == 6 ? 'selected' : ''}>百科</option>
                    <option value="7" ${entity.refer == 7 ? 'selected' : ''}>帖子</option>
                    <option value="8" ${entity.refer == 8 ? 'selected' : ''}>专家视点</option>    
                    <option value="9" ${entity.refer == 9 ? 'selected' : ''}>健康</option>
<option value="15" ${entity.refer == 15 ? 'selected' : ''}>特殊的推送类型</option>
</select>
</div>
<div class="unit">
<label style="width: 120px;">内容ID: </label> <input
class="textInput required digits" type="text" name="contentId"
id="contentId" maxlength="50" value="${entity.contentId}"
size="35" /> <input type="hidden" value="${entity.contentId}"
name="oldContentId" />
</div>
<div class="unit">
<label style="width: 120px;">内容URL: </label> <input
class="textInput url required" type="text" name="url"
maxlength="250" value="${entity.url}" size="93" /> <input
type="hidden" value="${entity.url}" name="oldUrl" />
</div>
<div class="unit">
<label style="width: 120px;">APP图文标题: </label> <input
class="textInput required" type="text" name="title"
id="contentTitle" maxlength="8" value="${entity.title}" size="93"
onkeydown="countChineseL('contentTitle','counterLT');"
onkeyup="countChineseL('contentTitle','counterLT');" /> <span
id="counterLT">0</span>/8个中文字<br>
</div>
<div class="unit">
<label style="width: 120px;">APP纯文本标题: </label> <input
class="textInput required" type="text" name="textTitle"
id="contentTextTitle" maxlength="14" value="${entity.textTitle}"
size="93"
onkeydown="countChineseL('contentTextTitle','counterLE');"
onkeyup="countChineseL('contentTextTitle','counterLE');" /> <span
id="counterLE">0</span>/14个中文字<br>
</div>
<div class="unit">
<label style="width: 120px;">APP简介: </label> <input
class="textInput required" type="text" name="description"
id="contentDescription" maxlength="20"
value="${entity.description}" size="93"
onkeydown="countChineseL('contentDescription','counterLD');"
onkeyup="countChineseL('contentDescription','counterLD');" /> <span
id="counterLD">0</span>/20个中文字<br>
</div>
<div class="unit">
<label style="width: 120px;">APP分行简介: </label> <input
class="textInput required" type="text" name="splitDescription"
id="contentSplitDescription" maxlength="22"
value="${entity.splitDescription}" size="93"
onkeydown="countChineseL('contentSplitDescription','counterLSD');"
onkeyup="countChineseL('contentSplitDescription','counterLSD');" />
<span id="counterLSD">0</span>/22个中文字<br>
</div>
<div class="unit">
<label style="width: 120px;">iphone协议: </label> <input
class="textInput url" type="text" name="iphoneProtocol"
id="iphoneProtocolId" maxlength="250"
value="${entity.iphoneProtocol}" size="93" /> <input type="hidden"
value="${entity.iphoneProtocol}" name="oldIphoneProtocol" />
</div>
<div class="unit">
<label style="width: 120px;">android协议: </label> <input
class="textInput url" type="text" name="androidProtocol"
id="androidProtocolId" maxlength="250"
value="${entity.androidProtocol}" size="93" /> <input
type="hidden" value="${entity.androidProtocol}"
name="oldAndroidProtocol" />
</div>
<div class="unit">
<label style="width: 120px;">导读图: </label> <input
class="textInput url required" type="text"
id="picUrl_appcontent_${method}" name="picUrl" maxlength="250"
value="${entity.picUrl}" size="93" /> <span>此处可填写地址或者下方导入图片</span>
</div>
<div class="unit">
<label style="width: 120px;">: </label> <span
id="uploadForm_appcontent_${method}"> <c:if
test="${empty entity.picUrl}">
<input class="textInput" type="file"
id="file_appcontent_${method}"
onchange="uploadSinglePicForAppContent('file_appcontent_${method}')" />
</c:if> <c:if test="${!empty entity.picUrl}">
<input type="button" value="重新选择图片"
onclick="deletePicForAppContent();" />
</c:if>
</span> <br> <span id="imageSrc_appcontent_${method}"><c:if
test="${!empty entity.picUrl}">
<br>
<img src="${entity.picUrl}" width="135"
style="margin-left: 130px" />
</c:if></span>
</div>
<div class="unit">
<label style="width: 120px;">列表焦点图: </label> <input
class="textInput url" type="text"
id="picUrl2_appcontent_${method}" name="imageUrl" maxlength="250"
value="${entity.imageUrl}" size="93" /> <span>此处可填写地址或者下方导入图片</span>
</div>
<div class="unit">
<label style="width: 120px;">: </label> <span
id="uploadForm2_appcontent_${method}"> <c:if
test="${empty entity.imageUrl}">
<input class="textInput" type="file"
id="file2_appcontent_${method}"
onchange="uploadSinglePicForAppContent2('file2_appcontent_${method}')" />
</c:if> <c:if test="${!empty entity.imageUrl}">
<input type="button" value="重新选择图片"
onclick="deletePicForAppContent2();" />
</c:if>
</span> <br> <span id="imageSrc2_appcontent_${method}"><c:if
test="${!empty entity.imageUrl}">
<br>
<img src="${entity.imageUrl}" width="135"
style="margin-left: 130px" />
</c:if></span>
</div>
<div class="unit">
<label style="width: 120px;">阶段: </label> <input type="hidden"
value="${entity.stage}" name="stage" id="stage" /> <label><input
type="checkbox" name="s1" onchange="updateStage();" value="怀孕" />怀孕</label>
<label><input type="checkbox" name="s1"
onchange="updateStage();" value="育儿" />育儿</label> <label><input
type="checkbox" name="s1" onchange="updateStage();" value="备孕" />备孕</label>
</div>
</fieldset>
<div class="divider"></div>
<h3 class="contentTitle">其他信息配置</h3>
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="javascript:void(0)"><span>标签列表</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" style="height: 300px;">
<div>
<table id="lorder" class="list nowrap itemDetail" addButton="添加标签"
width="100%">
<thead>
<tr>
<th type="lookup" name="contentTag[#index#].name"
fieldClass="required textInput readonly valid"
lookupPk="tagId" fieldAttrs="{readonly:'true'}"
lookupGroup="contentTag[#index#]"
lookupUrl="${ROOT}/admin/tag/listtag.do?noNeedPulldownMenu=true"
size="30">标签名称</th>
<th type="del" size="20">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${method == 'update'}">
<c:forEach var="ct" items="${contentTags}" varStatus="vs">
<tr class="unitBox">
<td><input type="hidden"
name="contentTag[${vs.index}].contentTagId"
value="${ct.contentTagId}" /> <input type="hidden"
name="contentTag[${vs.index}].tagId" value="${ct.tagId}" />
${ct.tag.name}</td>
<td><a class="btnDel"
href="${ROOT}/admin/appcontent/deltagrelation.do?contentTagId=${ct.contentTagId}"
title="确定要删除该标签关联吗？此操作不能后退！" target="ajaxTodo">删除</a></td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
</div>
<div class="tabsFooter">
<div class="tabsFooterContent"></div>
</div>
</div>
</div>
<div class="formBar">
<ul>
<li>
<div class="buttonActive">
<div class="buttonContent">
<button type="submit">保存</button>
</div>
</div>
</li>
<li>
<div class="button">
<div class="buttonContent">
<button type="button" class="close">取消</button>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>

javaScript:

<script>
//上传图片,此处上传的图片大小和位置由图库UPC处理
function uploadSinglePicForAppContent(name) {
UPC.init({upcPath: "${UPC}", application: "baby_content", command: [${contentPicurlCommand}], windowname: 1}); 
    var filename = new String($("#" + name).val()).toUpperCase();
    if (filename === "") {
        alertMsg.warn("请选择一个图片文件");
        return;
    }
    if (filename.indexOf(".GIF") === -1 && filename.indexOf(".JPG") === -1
        && filename.indexOf(".JPEG") === -1 && filename.indexOf(".BMP") === -1) {
        alertMsg.warn("图片格式必须为 JPG,JPEG,GIF,BMP!");
        return;
    }
    $("#imageSrc_appcontent_${method}").append("<font color='blue'>正在上传,请等待...</font>");
    UPC.post({
        url: "/upload_quick.jsp",
        data: {keepSrc: "yes", waterMark: 0, referer: window.location.href},
        file: [String(name)],
        complete: function(json) {
            if (json.retCode === 0) {
                var fls = json.files;
                var url = fls[0].url;
                for(i=0;i<fls.length;i++){
                 var temp = fls[i].url;
                 if(temp.indexOf('_36x36.') > 0){ //过滤36x36小图，保存原图
                  url = temp.replace('_36x36','');
                  break;
                 }
                }
                $('#picUrl_appcontent_${method}').val(url);
                $("#imageSrc_appcontent_${method}").html("<br><img src='" + url + "' width='135' style='margin-left:130px'>");
                $("#uploadForm_appcontent_${method}").html("<input type='button' value='重新选择图片' onclick='deletePicForAppContent()'/>");
            } else {
                $("#imageSrc_appcontent_${method}").html("<font color='red'>服务器忙,请稍候再试.(" + UPC.retCodeResult(Number(json.retCode)) + ")</font>");
                $("#uploadForm_appcontent_${method}").html("<input type='button' value='重新选择图片' onclick='deletePicForAppContent()'/>");
            }
        }
    });
}
//删除图片
function deletePicForAppContent() {
    $("#imageSrc_appcontent_${method}").html("");
    $('#picUrl_appcontent_${method}').val("");
    var html = "<input class='required' type='file' id='file_appcontent_${method}' name='file' onchange='uploadSinglePicForAppContent(\"file_appcontent_${method}\")'/>";
    $("#uploadForm_appcontent_${method}").html(html);
    if($("#refer").val() == 6 || $("#refer").val() == 7){
    $("#file_appcontent_${method}").removeClass('required');
    }
}
//上传图片
function uploadSinglePicForAppContent2(name) {
UPC.init({upcPath: "${UPC}", application: "baby_content", command: [${contentImageurlCommand}], windowname: 1}); 
    var filename = new String($("#" + name).val()).toUpperCase();
    if (filename === "") {
        alertMsg.warn("请选择一个图片文件");
        return;
    }
    if (filename.indexOf(".GIF") === -1 && filename.indexOf(".JPG") === -1
        && filename.indexOf(".JPEG") === -1 && filename.indexOf(".BMP") === -1) {
        alertMsg.warn("图片格式必须为 JPG,JPEG,GIF,BMP!");
        return;
    }
    $("#imageSrc2_appcontent_${method}").append("<font color='blue'>正在上传,请等待...</font>");
    UPC.post({
        url: "/upload_quick.jsp",
        data: {keepSrc: "yes", waterMark: 0, referer: window.location.href},
        file: [String(name)],
        complete: function(json) {
            if (json.retCode === 0) {
                var fls = json.files;
                var url = fls[0].url;
                for(i=0;i<fls.length;i++){
                 var temp = fls[i].url;
                 if(temp.indexOf('_36x36.') > 0){ //过滤36x36小图，保存原图
                  url = temp.replace('_36x36','');
                  break;
                 }
                }
                $('#picUrl2_appcontent_${method}').val(url);
                $("#imageSrc2_appcontent_${method}").html("<br><img src='" + url + "' width='135' style='margin-left:130px'>");
                $("#uploadForm2_appcontent_${method}").html("<input type='button' value='重新选择图片' onclick='deletePicForAppContent2()'/>");
            } else {
                $("#imageSrc2_appcontent_${method}").html("<font color='red'>服务器忙,请稍候再试.(" + UPC.retCodeResult(Number(json.retCode)) + ")</font>");
                $("#uploadForm2_appcontent_${method}").html("<input type='button' value='重新选择图片' onclick='deletePicForAppContent2()'/>");
            }
        }
    });
}
//删除图片
function deletePicForAppContent2() {
    $("#imageSrc2_appcontent_${method}").html("");
    $('#picUrl2_appcontent_${method}').val("");
    var html = "<input type='file' id='file2_appcontent_${method}' name='file' onchange='uploadSinglePicForAppContent2(\"file2_appcontent_${method}\")'/>";
    $("#uploadForm2_appcontent_${method}").html(html);
}
onChange(); //用于初始化
function onChange() {
if ($("#refer").val() == 2) { //内容ID选项，如果来源为 专题，则该选项可为空
$("#contentId").removeClass('required');
} else {
$("#contentId").addClass('required');
}
if ($("#refer").val() == 6 || $("#refer").val() == 7) { //导读图选项，如果来源为 百科 或者 帖子，则该选项可为空
$("#picUrl_appcontent_${method}").removeClass('required');
} else {
$("#picUrl_appcontent_${method}").addClass('required');
}
if ($("#refer").val() == 15) { //iphone协议选项和android协议选项，如果来源为 特殊的推送类型，则该选项可为必填
$("#iphoneProtocolId").addClass('required');
$("#androidProtocolId").addClass('required');
} else {
$("#iphoneProtocolId").removeClass('required');
$("#androidProtocolId").removeClass('required');
}
if ($("#refer").val() == 8) { //分行简介选项，如果来源为 专家视点类型，则该选项为必填
$("#contentSplitDescription").addClass('required');
} else {
$("#contentSplitDescription").removeClass('required');
}

}
initStage(); //用于初始化选定
function initStage() {
var stage = $("#stage").val();
var strs = stage.split(";");
if (strs.length > 0) {
for (var i= 0;i < strs.length; i++) {
$('input[name="s1"]').each(function(){
if($(this).val() == strs[i]) {
$(this).attr("checked",true);
} 
}); 
}
}
} 
function updateStage() {
var str="";
$('input[name="s1"]:checked').each(function(){
str += $(this).val()+";";
});
$("#stage").val(str);
}
function checkFormValid(pagerForm,navTabAjaxDone){
var isChecked = false;
$('input[name="s1"]:checked').each(function(){
isChecked = true;
});
if (!isChecked) {
alertMsg.error("请至少选择一个阶段");
        return false;
}
    return validateCallback(pagerForm, navTabAjaxDone);
}
//初始化加载字数统计
countChineseL('contentTitle','counterLT');
countChineseL('contentTextTitle','counterLE');
countChineseL('contentDescription','counterLD');
countChineseL('contentSplitDescription','counterLSD');
//统计输入框的中文字数
function countChineseL(inputName,spanName){
var value = document.getElementById(inputName).value;
var i, count = 0;
for(i = 0; i < value.length; i ++ ) {
if ((/[\u4e00-\u9fa5]+/).test(value.charAt(i))) {
count += 1;
} 
}
document.getElementById(spanName).innerHTML = count; 
}
</script>

以上添加标签功能特别说明：

1.输入数字后点击添加标签按钮会增加对应数目的标签，点击标签名称右边的放大镜图案，查找带回后

选择要添加的标签：

2.点击保存修改记录的同时调用以下方法保存内容与标签的关联关系：

        /**
 * 保存内容与标签的关联关系
 * 
 * @param req
 * @param parentId
 */
public void save(HttpServletRequest req, long appContentId) {
boolean isSetRelation = true;
int count = 0; // 计数器
while (isSetRelation) {
long tagId = T.longValue(req.getParameter("contentTag[" + count + "].tagId"), 0);// 被关联的标签
if (tagId > 0) {
Tag tag = tagService.find(tagId); // 被关联的标签
AppContent appContent = appContentService.find(appContentId);  //app内容
if (tag == null || appContent == null) { // app内容不存在，或者被关联的标签不存在
continue;
}
int flag = -1; // 关系是否已存在，默认不存在;1:已存在；-1：不存在
ContentTag contentTag = this.getByIds(appContentId, tagId); // app内容-标签关联关系
if (null == contentTag) {
long contentTagId = T.longValue(req.getParameter("contentTag[" + count + "].contentTagId"), 0); // 关联关系Id
if (contentTagId > 0) {
contentTag = this.find(contentTagId);
flag = 1;
} else {
flag = -1;
}
} else {
flag = 1;
}

if (contentTag == null) {
contentTag = new ContentTag();
}
contentTag.setAppContentId(appContentId); // 设置app内容ID
contentTag.setTagId(tagId); // 设置标签id
if (flag > 0) {
this.update(contentTag);
} else {
this.create(contentTag);
}
count++;
} else {
isSetRelation = false;
}
}
}