tab标签页切换效果.
tab标签页的显示.
相关文件
1.deptViewSummary.jsp
2.common_style.css //引用的css
2.common_style.css 相关属性.
相关文件
1.deptViewSummary.jsp
2.common_style.css //引用的css
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %> <!-- 引入常用标签库,含有s的. -->
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分类汇总</title>
<%--时间控件部分 放在上面--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/My97DatePicker/WdatePicker.js"></script>
<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/common/My97DatePicker/skin/WdatePicker.css"> 不需要--%>
<%--2.Ztree使用的,放上面. common_style.css来冲掉 前面的小 样式 ${pageContext.request.contextPath}/css/common/zTreeStyle/zTreeStyle.css 之前的←. --%>
<link href="${pageContext.request.contextPath}/css/adminx/zTreeStyle_special.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/common/zTreeStyle/demo.css" rel="stylesheet" type="text/css" />
<%--北京方面制定的样式 添加. --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/myLand.js"></script><!-- 这里有对ajax 数据的一些处理-->
<%--分页用CSS --%>
<link href="${pageContext.request.contextPath}/css/adminx/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/webcustomer/pagination.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/webcustomer/pagination.css">
<link href="${pageContext.request.contextPath}/css/adminx/basic_layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery/jquery-1.7.2.js"></script>
<!-- 树形图专属 3个js+2个css -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/catType.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/demo/ztreeNodes.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/commonAll.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/highcharts/highcharts.js"></script>
<%--可以下载的.
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/highcharts/exporting.js"></script> --%>
<script type="text/javascript">
var zNodes = ${jsonTree};
$(document).ready(function(){ //doc的ready事件(fucntion方法)
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
/*
subDetail(${vc.deptId })
下级明细
*/
function subDetail(id){
$("#deptId_Param").attr("value",id);
//alert($("#fm_s").attr("action"));
myLandAjax("${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do?flag=tab", "fm_s","html",doReplace);
/*C.一次 原表单提交
$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do?flag=tab"); // deptId_Param=+id post,get都不行 传参,得不到这个.>=3次.★$)
$("#fm_s").submit(); */
}
/*
学员明细的
*/
function personDetail(id){
//alert(id+":"+id);
$("#deptId_P").attr("value",id);
$("#flag").attr("value","sum");
//alert(2);
$("#fm_person").attr("action","${pageContext.request.contextPath}/adminx/deptViewPerson_sum.do");
$("#fm_person").submit();
}
/*
驾校明细
*/
function agentDetail(id){
$("#deptId_Param").attr("value",id);
$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/agentViewDetail.do").submit();
}
/*
柱状图显示
JavaScript获取table中某一列的值的方法
*/
function getTdValue(cellNum){
var tableId = $("#tab")[0]; //$("#tab") ★$) 30min|
//alert(tableId.innerHTML);
var str = "";
for (var i = 1; i < tableId.rows.length; i++) { // 去掉分页行.
//拼成串,传到另一个页面.
var deptName = $.trim(tableId.rows[i].cells[1].innerHTML); //获取所以后的注册人数.
var registerNum = $.trim(tableId.rows[i].cells[cellNum].innerHTML);
if(str ==""){ //第一次不要,
str = deptName+":"+registerNum;
}else{ //小心空格+\n\t
//alert(deptName+":"+registerNum);
str = str+","+deptName+":"+registerNum;
}
}
$("#registerData").attr('value',str);
var typeNum;
if(cellNum==2){
typeNum ='注册人数分析';
//$("#typeNum").attr('value','注册人数分析');
}else if(cellNum==3){
typeNum ='学习人数分析';
//$("#typeNum").attr('value','学习人数分析');
}else if(cellNum==4){
typeNum ='完成人数分析';
//$("#typeNum").attr('value','完成人数分析');
}
var url="${pageContext.request.contextPath}/adminx/highcharts!toHighcharts.do?registerData="+str+"&typeNum="+typeNum; //后台根据cellNum转为分析字符串.
url = encodeURI(encodeURI(url));
return url;
//alert(url);
/* 原模式化显示窗口的.
showModalDialog(url,window,"dialogHeight=600px;dialogWidth=1000px;status=no;");*/
//B.原 form请求的.
//$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/highcharts!toHighcharts.do").submit();
}
/*
进行切换显示
*/
function show_myDiv(my_div){
//data_div
switch(my_div){
case 'data_div':
//选中的tab标签页增加选中的样式,去掉原来的选中的.
/* ★Core lzl :idea: :
$("#data").addClass("select"). 去掉原来的.
parent().find("li"). ul找到li的集合
not("#data").removeClass("select") 其他的去掉select.
*/
$("#data").addClass("select").parent().find("li").not("#data").removeClass("select"); //厉害啊!
//url,回调函数. /adminx/deptViewSummary.do 注意 是下级明细的时候 ★
myLandAjax("${pageContext.request.contextPath}/adminx/deptViewSummary.do?flag=tab","fm","html",doReplace); //html
/* 写法2 使用属性:值的方法. .B
$ .ajax({
url : "${pageContext.request.contextPath}/adminx/planNodeCourse.do?licenseType=" + $("#licenseType").val()+"&planId=" + $("#planId").val(),
success : function(data) {
$("#show").replaceWith(data);
}
}); */
break;
case 'chart_div':
$("#chart").addClass("select").parent().find("li").not("#chart").removeClass("select");
var url = getTdValue(2);
$.post(url,function(data){
//alert(data);
$("#showMessage").replaceWith(data);
});
break;
}
}
/*
数据取代. |回调函数 必须两个参数.
*/
function doReplace(code,data){
if(code=="00"){
$("#showMessage").replaceWith(data);
}
/* else{
alert(message);
} */
}
/*
重置查询条件
*/
function czcxtj() {
//下拉框使其默认选中为全部.
$("#deptId").val("全部");
$("#begintime").attr("value","");
$("#endtime").attr("value","");
$("#catTypeId").attr("value","");
}
</script>
</head>
<body>
<!-- form 标签选择器,样式整体的.-->
<form id="fm" name ="fm" action="${pageContext.request.contextPath}/adminx/deptViewSummary.do?flag=tab" method="post">
<div id="container"><!-- 总外容器 含两部分,头部条件,下部分列表显示的-->
<div class="ui_content"> <!-- 1.头部 溢出隐藏. -->
<div class="ui_text_indent"> <!-- 与最外头紧密联系,规定首行缩进 -->
<%--整体盒子分 三大部分.头部 搜索提示 --%>
<div id="box_border"> <%--头部的css --%>
<div id="box_center" style="height:110px;"> <!-- 中部,真正放置查询条件的 -->
<%--margin-top:-45px; margin-left:-35px; --%>
<div id="menuContent" class="menuContent" style="display:none;position:absolute;z-index: 100;">
<ul id="treeDemo" class="ztree" style="margin-top: 0;height:120px;"></ul>
</div>
<table>
<tr>
<td>
组织者:
</td>
<td>
<s:select list="deptList" listValue="name" listKey="id" headerKey="" headerValue="全部" id="deptId" name="deptId" theme="simple" cssClass="ui_input_txt04"></s:select>
</td>
</tr>
<tr>
<td>
时间段:
</td>
<td>
<input id="begintime" class="ui_input_txt02" style="height:28px;" name="begintime" value="<s:date name="begintime" format="yyyy-MM-dd"/>" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" />
至
<input id="endtime" class="ui_input_txt02" style="height:28px;" name="endtime" value="<s:date name="endtime" format="yyyy-MM-dd"/>" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})"/>
<%--1.原,精确到s onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
2.B <s:textfield id="begintime" name="begintime" cssClass="ui_select01" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})"></s:textfield> 缺陷:onfocus
关键控制显示的值.否则,onclick变为1900年的.
--%>
</td>
<td>
类别体系:
</td>
<td>
<!-- <div class="zTreeDemoBackground left"> </div>-->
<s:textfield id="catTypeId" name="catTypeId" readonly="readonly" cssClass="ui_input_txt04" onclick="showMenu();return false;"></s:textfield>
<s:hidden name="licenseType" id="licenseType"></s:hidden> <!-- licenseType 放什么的. -->
</td>
</tr>
</table>
</div> <!-- 搜索条件 end -->
<div id="box_bottom" style="text-align:left;">
<input type="button" value="查询" class="ui_input_btn01" onclick="show_myDiv('data_div')" />
<input type="button" value="重置" class="ui_input_btn01" onclick="czcxtj()" name="re" id="re" />
<%--全都屏蔽了.
<input type="button" value="导出" class="ui_input_btn01" />
<input type="button" value="注册人数分析" class="ui_input_btn01" onclick="getTdValue(2)"/>
<%-- <input type="button" value="学习人数饼图显示" class="ui_input_btn01" onclick="getTdValue(3)"/>
<input type="button" value="完成人数饼图显示" class="ui_input_btn01" onclick="getTdValue(4)"/>--%>
</div>
</div>
</div><!-- 头部 end -->
</div><!-- 1.头部 溢出隐藏. end -->
<div style="padding:0 10px 10px 10px; border:1px #ECECEC solid; margin-bottom:50px;">
<div class="ul_top_cont">
<ul>
<li class="select" id="data"><a href="javascript:show_myDiv('data_div');">数据</a></li>
<li id="chart"><a href="javascript:show_myDiv('chart_div')">图表</a></li>
</ul>
<div class="clear"></div>
</div> <%--ul_top_cont end | 与中间数据ui_content并列的 --%>
<%--中部 显示具体数据区,含分页 --%>
<div id="showMessage">
<div id="show" class="ui_content">
<div class="ui_tb"> <%--onclick="getTdValue()"| alert('你好')" | getTdValue(); --%>
<table id="tab" class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<th>序号</th>
<th>组织机构</th>
<th>注册人数</th>
<th>学习人数</th>
<th>完成人数</th>
<th colspan="2" align="center">操作</th>
</tr>
<c:choose>
<c:when test="${empty viewCountList_map}">
<tr>
<td colspan="6">
无相关数据
</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${viewCountList_map }" var="vc" varStatus="stats"> <!-- items ★$ item×-->
<tr>
<%--键的获取更简洁 B--%>
<%-- <c:forEach items="${vc}" var="item">
<td>
<myland:cache key="${item.key}" cacheType="_DEPT" /> <!-- 什么情况使用缓存 dept-->
</td>
<c:set var="stauts" value="${item.value}" scope="page"></c:set>
</c:forEach> --%>
<td>
${stats.index+1}
</td>
<td> <%--显示市的值. --%>
<myland:cache key="${vc.deptId_status }" cacheType="_DEPT"></myland:cache>
</td>
<td>
<c:choose>
<c:when test="${vc['99']==null }">
0
</c:when>
<c:otherwise>
${vc["99"] }
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="${vc['3']==null }">
0
</c:when>
<c:otherwise>
${vc["3"] }
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="${vc['4']==null }">
0
</c:when>
<c:otherwise>
${vc["4"] }
</c:otherwise>
</c:choose>
</td>
<td>
<span class="chakan">
<a href="javascript:subDetail('${vc.deptId_status }')" >下级明细</a>
<a href="javascript:personDetail('${vc.deptId_status }')">学员明细</a>
<myland:adminx_auth action="/adminx/agentViewDetail.do">
<a href="javascript:agentDetail('${vc.deptId_status }')">驾校明细</a>
</myland:adminx_auth>
</span>
</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
</div> <%--中部 end --%>
<myland:page pagination="${qc.pagination }"></myland:page>
<%-- ${bar } --%>
</div><%--ui_content end 原中间主要部分--%>
</div> <%--showMessage的div end --%>
</div> <%--中部数据显示 end --%>
</div><!-- container end -->
</form>
<!-- 专用于提交的fm, 只是传递哪些参数 -->
<form name="fm_s" id="fm_s" action="${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do" method="post">
<s:hidden name="deptId_Param" id="deptId_Param"></s:hidden> <%--B.这种得到的是ids带,的String <input type="hidden" name="deptId_Param" value="${vc.deptId_status }"/> --%>
<s:hidden name="registerData" id="registerData"></s:hidden>
<s:hidden name="typeNum" id="typeNum"></s:hidden>
</form>
<!-- 学员明细 提交的表单 -->
<form id="fm_person" name="fm_person" action="" method="post">
<s:hidden name="deptId_P" id="deptId_P"></s:hidden>
<s:hidden name="flag" id="flag"></s:hidden>
</form>
</body>
</html>
2.common_style.css 相关属性.
/*...省略其他不相关*/
.ul_top_cont{ height: 32px; line-height: 32px; margin-bottom: 10px; background-color: #E8E8E8; }
.ul_top_cont li{ float: left; padding-left: 20px; padding-right: 20px; color: #717171; border-right-width: 1px; border-right-style: solid;
border-right-color: #FFFFFF; } /*未选中的为灰色的*/
.ul_top_cont li.select{ background: #fff; font-weight: bold; color: #333; } /*选中的白色的罢了*/
/*...省略其他不相关*/