javaScript：後臺管理功能
阿新 • • 發佈：2019-02-01
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; } } }