lengzl
- 浏览: 15954 次
- 性别:
- 来自: 济南
-
文章分类
最新评论
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; } /*选中的白色的罢了*/
/*...省略其他不相关*/
分享到：
发表评论
-
三级菜单树的组装与遍历显示
2017-03-03 14:28 918Action: UserManagerAction.java ... -
App问题审核 - jsp页面判断根据是否有图片决定是否显示,自定义标签实例
2017-03-01 16:59 581主要结构: 1.MessageHaveImageTag.jav ... -
Test图片显示样式调整
2015-09-14 17:24 0整理采用ssh结构, personActi ... -
window.print() 打印学时证明
2016-12-08 15:51 911主要按照MVC的顺序,+mapper.xml文件. 参考前 ... -
一个简单的行拖动效果 _id="table"
2017-02-10 09:56 470一个简单的行拖动效果 ... -
客人服务 学员查询 级联,zTree的使用
2015-03-02 10:25 857客服学员查询: 技术点: 1. doChange(); 省市与 ... -
汇总统计(部门),涉及结果集转横向(功能样板博客)
2014-12-23 19:44 826[size=medium] 主要按照MVC的顺序,+mappe ... -
数据权限的控制 SSH,jdk7 阶段性总结. --两个select来回移动-模板文章★
2014-12-08 18:38 9831. 2. 二次Rev 贴上去. //=== ... -
省市区三级级联,含有数据库.单一外键模式.
2014-11-09 23:24 11341.最重要的是js部分.其他的数据库使用Oralce10g,M ...
相关推荐
jQuery标签页Tab选项卡切换是一款视觉效果较好常用的选项卡切换插件。
tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效 tab 标签切换效果网页特效
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link...
jQuery点击切换Tab标签选项卡代码，点击标签滑动切换效果，固定的单排列表切换代码。
标签页切换效果 tab切换
今天给大家分享一款设计和精致的jQuery Tab页面切换插件，它的样式风格与传统的Tab...另外，在切换tab时，tab标签的样式也很有特点，是一个凸起的弧形，给人3D立体的视觉效果。同时切换tab时背景颜色还可以自动切换。
纯css3实现的tab标签切换效果
jquery选项卡插件多种tab标签切换效果 jquery插件
纯CSS实现的tab标签切换代码，其实是由六个html文件组成，相互切换的效果。懒人之家推荐下载
本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码，供大家参考，具体内容如下 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想： 1）、所有元素全部清除样式（干掉其他人） 2）、给当前...
这是一款基于js实现的tab标签切换效果，是一款无需jQuery，原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能，非常具有实用价值。 运行效果图：——————-查看效果 下载源码——...
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这是一款微信小程序界面设计的实例源码，滑动的TAB切换效果，如示例图界面所示，用手轻触TAB，则滑动切换TAB和内容，除了这个主旨功能外，还实现了获取系统信息 ，滑动切换tab ，点击tab切换等功能。代码中有注释，...
仿天猫tab切换标签仿天猫tab切换标签仿天猫tab切换标签仿天猫tab切换标签仿天猫tab切换标签
今天无聊，特意写了一个原生javascript切换效果，需要的童鞋可以拿来用用 使用方法： 1、将head中的css样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可 (转载请注明出处)
适合做购物类网站导航页面，支持底部tab标签切换。类似360浏览器的欢迎页面导航效果
Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果，TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...
js实现Tab标签切换，很方便的表达了一个页面上的多个页面效果
C:\Users\jouel\Desktop\tab选项卡切换效果，tab选项卡内容宽度自适应
支持自动切换效果，当然懒人们也可以设置不自动切换 附件提供了两种切换效果 效果一：直接切换，无切换过程 效果二：左右滑动切换 使用方法： 1、将index.html中的css样式引入到你的...