动态生成时间轴。且右边的div生成是根据左边生成的。
1、jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String userName = (String)request.getSession().getAttribute("username")==null?"":(String)request.getSession().getAttribute("username");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<base href="<%=basePath%>">
<title>时间轴</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/shared/icons/silk.css" />
<link rel="stylesheet" type="text/css" href="ext/ux/fileuploadfield/css/fileuploadfield.css" />
<link rel="stylesheet" type="text/css" href="front/lhxd/lh/timeline/css/style.css" />
<style type="text/css">
.search{
position:relative;
margin:0px auto 0px;
padding-left:0px;
width:1040px;
padding-right:0px;
height:auto;
overflow:hidden;
background-color:#F5F7FA;
}
.search_left{
float: left;
}
.search_sk{
margin-left:20px;
margin-top:10px;
}
.sctj{
border:1px dotted #640000;
background: #F7F9FC;
margin-top:5px!important;
color:#000;
padding:5px;
margin-left:10px;
white-space: nowrap;
cursor: pointer;
}
.sctj:hover{
border:1px solid #640000;
background: #FD7F88;
}
.search_center{
float: center;
}
.search_right{
float: right;
}
.search-input{
color:#999;
border:1px solid #D0D0D0;
height:33px;
line-height:30px;
margin-right:5px;
width:268px;
font-size: 14px;
}
.search-btn{
background:none repeat scroll 0 0 #FD7F88;border:0 none;border-radius:0;
color:#FFFFFF;cursor:pointer;height:35px;line-height:33px;padding:0;vertical-align:baseline !important;
width:76px;text-align:center;vertical-align:middle;white-space:nowrap;margin-bottom:0;font-weight:normal;
font-size:14px;display:inline-block;position:relative;
}
.xz_div {
border:2px solid white;float:left;border-right:solid 5px white;font-weight:blod;
}
.collapse {
background-image: url(img/tp_images/in.gif);width:20px;height:20px;float: left;margin-top: 5px;
cursor: pointer;
}
.buttonSpan{
border:1px dotted #F1F1F1;
color:#000;
padding:5px;
margin-left:10px;
white-space: nowrap;
cursor: pointer;
}
.buttonSpan:hover{
border:1px solid #939393;
}
</style>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ux/fileuploadfield/FileUploadField.js"></script>
<script type="text/javascript" src="ext/ux/CheckColumn.js"></script>
<script type="text/javascript" src="front/lhxd/lh/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="front/lhxd/lh/timeline/js/smohan.blog.plug.js"></script>
<jsp:include page="../../../main.jsp"></jsp:include>
</head>
<body>
<div id="title">
<div class="search">
<div class="search_left">
<div class="search_sk" >
筛选条件>>
<span id="WQS" class="sctj" οnclick="cjsxtj('WQS','未签收')" data-start="0">未签收</span>
<span id="YQS" class="sctj" οnclick="cjsxtj('YQS','已签收')" data-start="0">已签收</span>
<span id="WFK" class="sctj" οnclick="cjsxtj('WFK','未反馈')" data-start="0">未反馈</span>
<span id="YFK" class="sctj" οnclick="cjsxtj('YFK','已反馈')" data-start="0">已反馈</span>
</div>
<!-- <div style="height:30px;background-color:white;padding:0px 0px 0px 5px;" id="sxtj">
<div class="xz_div">筛选条件：</div>
</div> -->
</div>
<div class="search_right">
<U style="text-align:center;margin-right:150px;width:50px;cursor: pointer;" οnclick="FXClick()" >分析</U>
<input id="searchInput" class="search-input" type="text"></input>
<button class="search-btn btn" οnclick="SSClick()">搜索</button>
</div>
</div>
</div>
<div class="fixed_div">
<p id="back-to-top"><img src="front/lhxd/lh/timeline/images/top.png"/></p>
</div>
<div class="fixed_div_center" style="text-align: center;vertical-align:middle;background-image: url('front/lhxd/lh/timeline/images/center.png'); ">
<a οnclick="zdFK()">主动<br/>反馈</a>
</div>
<div id="container">
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
<div class="plus2"></div>
</div>
</div>
<div style="float:left;" id = "leftRW">
</div>
<div style="float:left;" id = "rightAP">
</div>
</div>
<script type="text/javascript">
var QAPID = '';
var basePath = '<%=basePath%>';
var userName = '<%=userName%>';
$(function(){
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
var p=$('#container').parent();
if(p!=undefined){
p.animate({scrollTop:0},500);
}
return false;
});
});
});
</script>
<script type="text/javascript" src="front/lhxd/js/TimeLine.js"></script>
</body>
</html>function getRW(userName,RWID,CXTJ,SSZT){
$.ajax({
url:basePath+'servlet/front/LHXDS?type=cxAPRW',
type:'post',
timeout:1000*60*60,
data:{
userName : userName,
CXTJ : CXTJ,
SSZT : SSZT,
RWID : RWID
},
dataType:'json',
success:function(obj,textStatus){
if(obj.success){
var html_RWXX = '';
var html_APXX = '';
var data_RWXX = obj.data_RWXX;
var data_APXX = obj.data_APXX;
XZRWID = RWID;
var js=0;
var size=10;
var top = 10;
var left_panel=$('#leftRW');
var right_panel=$('#rightAP');
if(data_RWXX.length > 0){
$.each(data_RWXX, function(commentIndex, comment){
var APID = comment['APID'];
var ZT = comment['SFFK'];
var QSZT = comment['QSZT'];
var SFCS = comment['SFCS']==undefined?'':comment['SFCS'];
var FKZT = '';
if(QSZT=='未签收'){
FKZT = '签收';
}else if(QSZT=='未反馈'){
FKZT = '反馈';
}else if(QSZT=='已反馈'){
FKZT = '追加反馈';
}
var margin_left=size;
var APFKLX = comment['FKLX']==undefined?'':comment['FKLX'];
var CJR = comment['CJR']==undefined?'':comment['CJR'];
var APXM = comment['XM']==undefined?'':comment['XM'];
var APCJSJ = comment['CJSJ']==undefined?'':comment['CJSJ'];
var APSJH = comment['SJH']==undefined?'':comment['SJH'];
var APGZNR = comment['GZNR']==undefined?'':comment['GZNR'];
var APFKSJ = comment['FKSJ']==undefined?'':comment['FKSJ'];
html_RWXX +='<div class="item" style="margin-top :'+ margin_left +'px; " id='+APID+'> '+
'<h3 style="background-color: #5BD0D9" οndblclick="bjAPXX(\''+CJR+'\',\''+APID+'\',\''+RWID+'\')" >' +
'<div class="collapse" id ="'+APID+'_TOGGLE" onClick="div_toggleCollapse(\''+APID+'\')"> </div>'+
'<span class="fl">'+APFKLX+'</span>' +
'<span class="fr">生成时间： '+APCJSJ+'</span>' +
'</h3>' +
'<p class="con" id ="'+APID+'_TEXT" style="display:none;">' +
'发起人:'+comment['XM']+'<br/>' +
'发起人联系方式:'+APSJH+'<br/>' +
'任务描述：'+APGZNR+'<br/>' +
'反馈截止时间：'+APFKSJ+' <font style="color:red">'+SFCS+'</font></p>' +
'<h4 id="gdzt'+APID+'">' +
'<span class="fl">任务状态：'+QSZT+'</span>' +
'<span class="fr"><a id="CZ'+APID+'" href="javascript:void(0);" οnclick="addFK(\''+QSZT+'\',\''+APID+'\',\''+RWID+'\');">'+FKZT+'</a></span>' +
'</h4>' +
'<span class="rightcorner"></span>'+
'</div>' ;
//var height = document.getElementById(APID).offsetHeight;
$('#leftRW').html(html_RWXX);
var left_panel_height=$('#'+APID).outerHeight();
html_APXX+='<div id='+APID+'_2 style="margin-top :10px;height:'+left_panel_height+'px;"></div> ';
$('#rightAP').html(html_APXX);
//取出右边div
var arrAP = data_APXX[APID];
if(arrAP.length>0){
$.each(arrAP, function(commentIndex, commentAP){
var FKID = commentAP['FKID'];
var margin_right=size;
var FKLX = commentAP['FKLX']==undefined?'':commentAP['FKLX'];
var XM = commentAP['XM']==undefined?'':commentAP['XM'];
var SJFKSJ = commentAP['SJFKSJ']==undefined?'':commentAP['SJFKSJ'];
var SJH = commentAP['SJH']==undefined?'':commentAP['SJH'];
var MS = commentAP['MS']==undefined?'':commentAP['MS'];
var TXMCS = commentAP['TXMCS']==undefined?'':commentAP['TXMCS'];
var ZCMC = commentAP['ZCMC']==undefined?'':commentAP['ZCMC'];
var FJMC = commentAP['FJMC']==undefined?'':commentAP['FJMC'];
html_APXX +='<div class="item" style="margin-top :'+ margin_right +'px; " id='+FKID+' name='+APID+'> '+
'<h3 style="background-color: #FD7F88">'+
'<div class="collapse" id ="'+FKID+'_TOGGLE" onClick="div_toggleCollapse(\''+FKID+'\')"> </div>'+
'<span class="fl">'+FKLX+' </span>'+
'<span class="fr">处理时间： '+SJFKSJ+'</span>'+
'</h3>'+
'<p class="con" style="display:none;" id="'+FKID+'_TEXT">'+
'处理人: '+XM+'<br/>'+
'处理人联系方式: '+SJH+'<br/>'+
'描述:'+MS+'<br/>'+
'图形：'+TXMCS+'<br/>'+
'附件：<a href="javascript:void(0);" οnclick="ckFKXX(\'FJ\',\''+ZCMC+'\')">'+FJMC+'</a>'+
'</p>'+
'<h4><b>处理状态：</b>已处理</h4>'+
'<span class="leftcorner"></span>'+
'</div>';
$('#rightAP').html(html_APXX);
var right_panel_height=$('#'+FKID).outerHeight();
html_RWXX+='<div id='+FKID+'_2 style="margin-top :10px;height:'+right_panel_height+'px;"></div> ';
$('#rightAP').html(html_APXX);
});
}else{
$('#rightAP').html(html_APXX);
}
});
}else{
$('#leftRW').html(html_RWXX);
$('#rightAP').html(html_APXX);
}
}else{
alert(obj.msg);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
}div的显示和隐藏<pre name="code" class="javascript">function div_toggleCollapse(panel_id){
if($('#'+panel_id+'_TEXT').css('display')=='none'){ //需要展开
$('#'+panel_id+'_TOGGLE').css('backgroundImage','url(img/tp_images/out.gif)');
$('#'+panel_id+'_TEXT').css('display','');
$('#'+panel_id+'_2').css('height',$('#'+panel_id).outerHeight());
}else{ //需要隐藏
$('#'+panel_id+'_TOGGLE').css('backgroundImage','url(img/tp_images/in.gif)');
$('#'+panel_id+'_TEXT').css('display','none');
$('#'+panel_id+'_2').css('height',$('#'+panel_id).outerHeight());
}
}
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
