一、需求场景
页面数据分组，点击当前组，其他组关闭，当前组展开。在数据刷新的时候，当前数据是否为展开的状态保持不变。
二、后台提供封装后的数据如下：
[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();
}
四、功能页面展示
