JavaWeb 模擬QQ分組功能
阿新 • • 發佈：2018-12-20
一、需求場景
頁面資料分組，點選當前組，其他組關閉，當前組展開。在資料重新整理的時候，當前資料是否為展開的狀態保持不變。
二、後臺提供封裝後的資料如下：
[MessageObject [type=1221A, typeValue=fefew1, messageNums=3467, priotyLevel=999, messageHead=1221A | fefew1(3467), expandStatus=1, messages=[1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed, 1221A | wdwed], definitionType=0], MessageObject [type=123QA, typeValue=dfwfqf, messageNums=11, priotyLevel=999, messageHead=123QA | dfwfqf(11), expandStatus=1, messages=[123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed, 123QA | d3ed3ed], definitionType=0], MessageObject [type=12DWW, typeValue=12dwd1, messageNums=386, priotyLevel=999, messageHead=12DWW | 12dwd1(386), expandStatus=1, messages=[12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e, 12DWW | e], definitionType=0], MessageObject [type=QWE1, typeValue=dadw, messageNums=386, priotyLevel=999, messageHead=QWE1 | dadw(386), expandStatus=1, messages=[QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd, QWE1 | cecd], definitionType=0], MessageObject [type=SDW21, typeValue=dwdqdq, messageNums=772, priotyLevel=999, messageHead=SDW21 | dwdqdq(772), expandStatus=1, messages=[SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c, SDW21 | c], definitionType=0], MessageObject [type=WDW1, typeValue=wqdqwd, messageNums=386, priotyLevel=999, messageHead=WDW1 | wqdqwd(386), expandStatus=1, messages=[WDW1 | dddddddddddddddddd, WDW1 | ddddddddddddddddd, WDW1 | dddddddddddddd, WDW1 | ddddddddddddd, WDW1 | dddddddddddddd], definitionType=0]]
三、前端
JSP：
<body> <div id="okMsg" style="text-align: left"> <image id="clearNews" src="images/clearnews.png" style="height:22px;width:22px;" /> </div> <div class="data_box" id="dataDiv" > <table align="center" id="dataTable" border="0" style="table-layout:fixed;"> <thead> <tr> <th align="left" style="font-size: 15px;" > 訊息列表 </th> </tr> </thead> <tbody id="dataBody" frame=void > </tbody> </table> </div> </body>
迴圈新增資料：
window.name = "messageWindows";//指定當前視窗的名字，使得Form在當前指定窗口裡跳轉，而不是開啟新視窗。 var adminTypes = ",${adminMsgTypeKey},";//前後特意加的 var checkNewMsgTimer;//檢測新訊息的定時器 var checkNewMsging = false;//是否檢測新訊息中，防止重複訪問 //查詢新訊息 function queryNewMsg(){ if(checkNewMsging){ return; } getImageAttr(); checkNewMsging = true; $.post("<%=path%>/messageProcess_getMessageBarInformation.action", {pageSize:1000,currentPage:1,endDate:'${endDate}'},function(data){ checkNewMsging = false; if("ajaxRequestTimeOut"==data){ stopCheckNewMsgTimer(); return; } var type = getCookie("TYPE_IN_COOKIE"); var img = getCookie("IMGNAME_IN_COOKIE"); //alert(getCookie("TYPE_IN_COOKIE")+ getCookie("IMGNAME_IN_COOKIE")); deleteCookie("TYPE_IN_COOKIE"); deleteCookie("IMGNAME_IN_COOKIE"); //alert(getCookie("TYPE_IN_COOKIE")+ getCookie("IMGNAME_IN_COOKIE")); var jsonData = $.parseJSON( data ); var addExpand1 ; var addExpand2 = 1 ; if(jsonData && jsonData.length > 0){ $(".trClass").remove(); var msgs = jsonData; var trs = ''; for(var i = 0; i<msgs.length ; i++){ var msg = msgs[i]; var messages = msgs[i].messages; trs+='<tr class = "trClass" >'; trs+='<td>' trs+='<input type="hidden" name="'+msg.type+'" value="'+msg.definitionType+'"/>'; if(null == type && null == img ){ if(msg.expandStatus == 0 && addExpand2 == 1){ trs+='<img class="xiala" name="'+msg.type+'" src="${pageContext.request.contextPath}/images/pwr/messageObjectDown.png" /> '; addExpand1 = 2; addExpand2 = 2; }else{ trs+='<img class="xiala" name="'+msg.type+'" src="${pageContext.request.contextPath}/images/pwr/messageObjectRight.png" /> '; addExpand1 = 3; } }else{ if(msg.type == type){ trs+='<img class="xiala" name="'+msg.type+'" src="${pageContext.request.contextPath}/images/pwr/messageObjectDown.png" /> '; }else{ trs+='<img class="xiala" name="'+msg.type+'" src="${pageContext.request.contextPath}/images/pwr/messageObjectRight.png" /> '; } } //var strStart = msg.messageHead.indexOf("ROT | RO資料項GRO"); var length = msg.messageHead.length; var msgHead = ''; var index=msg.messageHead.lastIndexOf("\("); if(length > 29){ var subStr = msg.messageHead.substring(0,28) + "..."; //msgHead = "ROT | RO資料項GRO" + msg.messageHead.substring(index,msg.messageHead.length); msgHead = subStr + msg.messageHead.substring(index,msg.messageHead.length); // trs+='<span class="dataTR" onclick="folderSpan(this)" >'+msgHead+'</span><br>'; trs+='<a href="javascript:void(0)" onclick="openDiv(this)">'+msgHead+'</a>'; }else{ // trs+='<span class="dataTR" onclick="folderSpan(this)" >'+msg.messageHead+'</span><br>'; trs+='<a href="javascript:void(0)" onclick="openDiv(this)">'+msg.messageHead+'</a>'; } if(null == type && null == img ){ if(addExpand1 == 2){ trs+='<div id="div1" class="folderDiv" name="folderDiv" style="display:block" >'; for(var j = 0; j < messages.length; j++){ var message = messages[j]; //alert(message); trs+=' <span class="typeBtn" >'+message+'</span><br> '; } }else{ trs+='<div id="div1" class="folderDiv" name="folderDiv" >'; for(var j = 0; j < messages.length; j++){ var message = messages[j]; //alert(message); trs+=' <span class="typeBtn" >'+message+'</span><br> '; } } }else{ if(msg.type == type){ trs+='<div id="div1" class="folderDiv" name="folderDiv" style="display:block" >'; for(var j = 0; j < messages.length; j++){ var message = messages[j]; //alert(message); trs+=' <span class="typeBtn" >'+message+'</span><br> '; } }else{ trs+='<div id="div1" class="folderDiv" name="folderDiv" >'; for(var j = 0; j < messages.length; j++){ var message = messages[j]; //alert(message); trs+=' <span class="typeBtn" >'+message+'</span><br> '; } } } /* trs+='<div id="div1" class="folderDiv" name="folderDiv" >'; for(var j = 0; j < messages.length; j++){ var message = messages[j]; //alert(message); trs+=' <span class="typeBtn" >'+message+'</span><br> '; } */ trs+='</div>'; trs+='</td>' trs+='</tr>'; } $(trs).prependTo($("#dataBody")); //$("#dataBody").prepend(trs); } },"html"); } //初始化訊息的操作 function initMsg(){ //點選型別 開啟視窗 //第一次訪問時間 var beginDate = "${beginDate}"; var endDate = "${endDate}"; beginDate = beginDate.substring(0,10); endDate = endDate.substring(0,10); $(".typeBtn").live("click",function(){ var $input = $(this).parent().parent().children().eq(0); // 訊息型別 var msgType = $input.attr("name"); // 是熱點還是定製化訊息型別 var difineType = $input.attr("value")+""; //運價審批訊息顯示 if(msgType=="AZJ"){ var url="<%=path%>/pwr/assist/approval/showApprover.jsp"; window.open(url,'newwindow',"height=600,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no"); }else if(difineType != "null"){ // 定製化和訊息類 // 定製化型別 if(difineType == "0"){ msgType = msgType + "_" + difineType; //msgType = msgType + "_" + "1"; var actionUrl=path+ '/queryMessages2.action?msgType='+ msgType+"&isDeal=${isDeal}&pageSize=10¤tPage=1" ; window.open(actionUrl,'newwindow',"height=600,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no"); } // 熱點型別 if(difineType == "1"){ msgType = msgType + "_" + difineType; var actionUrl=path+ '/queryMessages2.action?msgType='+ msgType+"&isDeal=${isDeal}&pageSize=10¤tPage=1" ; window.open(actionUrl,'newwindow',"height=600,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no"); } }else{ var actionUrl=path+ '/queryMessages2.action?msgType='+ msgType +"&beginDate="+beginDate+"&endDate="+endDate+"&isDeal=${isDeal}&pageSize=10¤tPage=1" ; window.open(actionUrl,'newwindow',"height=600,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no"); if($(this).next()){ //$(this).next().remove(); }} }); $(".dataTR").live("mouseover",function(){ $(this).css("background","#CCCCCC"); }).live("mouseout",function(){ $(this).css("background","while"); }); $(".typeBtn").live("mouseover",function(){ $(this).css("background","#DFDFE2"); }).live("mouseout",function(){ $(this).css("background","while"); }); } $(document).ready(function() { initMsg(); startCheckNewMsgTimer(); queryNewMsg(); //檢測操作的id startCheckOperMsgTimer(); }); function startCheckNewMsgTimer(){ //定時查詢 checkNewMsgTimer = setInterval(function(){ var oDate = new Date(); var hours = oDate.getHours() if(hours>=8 && hours<=20){ queryNewMsg(); }else{ //not thing } },60*1000); } var checkOperMsgTimer; function startCheckOperMsgTimer(){ //定時查詢 checkOperMsgTimer = setInterval(function(){ var operMsgIds = myStoreage.getOperMsgTypeIds(); if(operMsgIds!="undefined"&&operMsgIds!="null"){ $("#dataBody tr").each(function(){ var $_this = $(this); var msgUnique = $_this.attr("msgType")+"_"+$_this.attr("msgId"); if( operMsgIds.indexOf(msgUnique)!=-1){ $_this.remove();//then remove from the DOM } }); myStoreage.clearOperMsg(); } },50*5000); } function stopCheckNewMsgTimer(){ clearInterval(checkNewMsgTimer); }
JS實現分組功能
/**
* 解決瀏覽器不相容
*/
// 1 如果瀏覽器不支援document.getElementsByClassName
if (!document.getElementsByClassName) {
// 2 將要寫的方法封裝成一個函式
document.getElementsByClassName = function (className, element) {
// 3 獲取html中所有的DOM節點
var children = (element || document).getElementsByTagName('*');
// 4 用一個空陣列存放要獲取的class類名
var elements = [];
for (var i = 0; i < children.length; i++) {
var child = children[i];
// 5 將所有的class節點儲存在一個數組之中
var classNames = child.className.split(' ');
// 6 遍歷迴圈，將滿足要求的class存入elements空陣列中
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
// 6 返回新的陣列 dom物件的標籤陣列
return elements;
};
}
/**
* 通過js實現動態分組功能
*/
//1.點選分組名稱可以展開當前分組
//2.點選分組名稱先關閉其他展開的分組，再展開當前分組
//3.如果分組是展開的，點選則關閉分組，如果分組是關閉的，點選則展開分組
function openDiv(thisobj){
/*點選分組:
如果分組是展開的,點選之後則關閉
如果分組是關閉的,點選之後則展開,在展開之前先關閉所有分組,在展開當前分組
*/
// 1 獲取當前被點選的a元素後面相鄰的div元素
var div = getNextElement(thisobj);
//console.log(div.style.display);
//var div=thisobj.parentNode.getElementsByTagName("div")[0];
// 2 如果當前的物件是展開的狀態,則點選進行關閉
//var $img1 = thisobj.previousSbiling;
var $img1 = $(thisobj).prev(".xiala")[0];
if(div.style.display=="block"){
div.style.display="none";
//$(div).animate({height: 'show'}, 1000);
$img1.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectRight.png");
//$img1.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"; // 用同一張圖片調轉0度
//$img1.style.msTransform = "rotate(0deg)";
}else{
// 3 如果當前物件是關閉的狀態,在展開當前分組之前，先關閉所有分組
var arrDivs = document.getElementsByClassName("folderDiv");
for(var i=0;i<arrDivs.length;i++)
{
var $img2 = $(arrDivs[i]).prev().prev()[0];
$img2.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectRight.png");
//$img2.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"; // 用同一張圖片調轉0度
arrDivs[i].style.display="none";
}
// 4 將a元素後面相鄰的div元素設定為顯示
div.style.display="block";
$img1.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectDown.png");
//$img1.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; // 用同一張圖片調轉90度
//$img1.style.msTransform = "rotate(-90deg)";
}
}
/**
* 獲得兄弟元素 用jquery中next獲取，IE無法相容，故js封裝函式來獲取
*/
function getNextElement(node){
var NextElementNode = node.nextSibling;
while(NextElementNode.nodeValue != null){
NextElementNode = NextElementNode.nextSibling
}
return NextElementNode;
}
/**
* 通過標籤的id和className來獲得標籤的資料
*/
function compatibleID(id,classname){//封裝語句
//支援getElementsByClassName的情況下
if(document.getElementsByClassName){
if(id){//有ID的情況下
var arrId=document.getElementById(id);
return arrId.getElementsByClassName(classname);
}else{
return document.getElementsByClassName(classname);
}
}else{//不支援getElementsByClassName的情況下
if(id){
var arrId=document.getElementById(id);
var dom=arrId.getElementsByTagName("*");
var arr=[];
for(var i=0;i<dom.length;i++){
var txtArr=dom[i].className.split(" ");
for(var j=0;j<txtArr.length;j++){
if(txtArr[j]==classname){
arr.push(dom[i]);
}
}
}
return arr;
}
}
}
function getImageAttr(){
var arrDivs = document.getElementsByClassName("xiala");
if(arrDivs.length > 0){
for(var i=0;i<arrDivs.length;i++)
{
var $img = $(arrDivs[i]);
var index=$img.attr("src").lastIndexOf("\/");
var imgName = $img.attr("src").substr(index+1);
var type = $img.attr("name");
if(imgName.replace(/\s*/g,"") === "messageObjectDown.png"){
document.cookie = "type="+type+";path=/";
document.cookie = "img="+imgName+";path=/";
}
}
}
}
function deleteCookie(name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}
四、功能頁面展示
