1. 程式人生 > >JavaWeb 模擬QQ分組功能

JavaWeb 模擬QQ分組功能

一、需求場景

    頁面資料分組,點選當前組,其他組關閉,當前組展開。在資料重新整理的時候,當前資料是否為展開的狀態保持不變。

二、後臺提供封裝後的資料如下:

[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" />&nbsp;';
								addExpand1 = 2;
								addExpand2 = 2;
							}else{
								trs+='<img class="xiala" name="'+msg.type+'"  src="${pageContext.request.contextPath}/images/pwr/messageObjectRight.png" />&nbsp;';
								addExpand1 = 3; 
							}
						}else{
							if(msg.type == type){
								trs+='<img class="xiala" name="'+msg.type+'" src="${pageContext.request.contextPath}/images/pwr/messageObjectDown.png" />&nbsp;';
							}else{
								trs+='<img class="xiala" name="'+msg.type+'"  src="${pageContext.request.contextPath}/images/pwr/messageObjectRight.png" />&nbsp;';
							}
						}
						//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+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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&currentPage=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&currentPage=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&currentPage=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();
}

四、功能頁面展示