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"
		οnsubmit="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" οnchange="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"
						οnkeydοwn="countChineseL('contentTitle','counterLT');"
						οnkeyup="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"
						οnkeydοwn="countChineseL('contentTextTitle','counterLE');"
						οnkeyup="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"
						οnkeydοwn="countChineseL('contentDescription','counterLD');"
						οnkeyup="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"
						οnkeydοwn="countChineseL('contentSplitDescription','counterLSD');"
						οnkeyup="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}"
								οnchange="uploadSinglePicForAppContent('file_appcontent_${method}')" />
						</c:if> <c:if test="${!empty entity.picUrl}">
							<input type="button" value="重新選擇圖片"
								οnclick="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}"
								οnchange="uploadSinglePicForAppContent2('file2_appcontent_${method}')" />
						</c:if> <c:if test="${!empty entity.imageUrl}">
							<input type="button" value="重新選擇圖片"
								οnclick="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" οnchange="updateStage();" value="懷孕" />懷孕</label>
					<label><input type="checkbox" name="s1"
						οnchange="updateStage();" value="育兒" />育兒</label> <label><input
						type="checkbox" name="s1" οnchange="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='重新選擇圖片' οnclick='deletePicForAppContent()'/>");
            } else {
                $("#imageSrc_appcontent_${method}").html("<font color='red'>服務器忙,請稍候再試.(" + UPC.retCodeResult(Number(json.retCode)) + ")</font>");
                $("#uploadForm_appcontent_${method}").html("<input type='button' value='重新選擇圖片' οnclick='deletePicForAppContent()'/>");
            }
        }
    });
}
//刪除圖片
function deletePicForAppContent() {
    $("#imageSrc_appcontent_${method}").html("");
    $('#picUrl_appcontent_${method}').val("");
    var html = "<input class='required' type='file' id='file_appcontent_${method}' name='file' οnchange='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='重新選擇圖片' οnclick='deletePicForAppContent2()'/>");
            } else {
                $("#imageSrc2_appcontent_${method}").html("<font color='red'>服務器忙,請稍候再試.(" + UPC.retCodeResult(Number(json.retCode)) + ")</font>");
                $("#uploadForm2_appcontent_${method}").html("<input type='button' value='重新選擇圖片' οnclick='deletePicForAppContent2()'/>");
            }
        }
    });
}
//刪除圖片
function deletePicForAppContent2() {
    $("#imageSrc2_appcontent_${method}").html("");
    $('#picUrl2_appcontent_${method}').val("");
    var html = "<input type='file' id='file2_appcontent_${method}' name='file' οnchange='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;
			}
		}
	}