lengzl
- 浏览: 16594 次
- 性别:
- 来自: 济南
-
文章分类
最新评论
客服学员查询:
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.
显示效果:
1)选择北京,后面的plan为北京对应
2)选择全国,后面的plan为全国对应
客服学员查询页面 deptViewPersonList_cs.jsp
doChange()事件.
dept.js 引入的专门处理树js的文件.
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.
显示效果:
1)选择北京,后面的plan为北京对应
2)选择全国,后面的plan为全国对应
客服学员查询页面 deptViewPersonList_cs.jsp
doChange()事件.
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/common/common.jsp"%>
<!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/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/myLand.js"></script>
<%--分页用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 href="${pageContext.request.contextPath}/css/adminx/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen"></link>
<link href="${pageContext.request.contextPath}/css/adminx/basic_layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/commonAll.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!-- 树状图的 3js+2css 都有ztee关键词-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/dept.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>
<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" />
<link id="artDialogSkin" href="${pageContext.request.contextPath }/js/adminx/artDialog/skins/blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/adminx/artDialog/jquery.artDialog.source.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/adminx/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
/**
* 根据部门查找相应的计划,显示列表
* obj当前对象,changeId 变动的id,
url 路径.考虑将来 三级级联.留着.
*/
var zNodes = ${jsonTree};
$(document).ready(function(){//doc的ready事件(fucntion方法)
var zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,zNodes); //获得zTreeObj的对象,也就是treeDemo的那个树. lzl)
// 根据deptId的value值,付给前面的框 值.
if($("#deptId").val() != ""){
/*
keyString
需要精确匹配的属性名称 //自身id
value?
需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可 //对应的值.
parentNodeJSON
可以指定在某个父节点下的子节点中搜索
*/
var snode = zTreeObj.getNodeByParam("id",$("#deptId").val(),null);
zTreeObj.selectNode(snode);
onClick1();
}
});
//重写 树的onclick方法. 未调用.
function doChange(obj,changeId,url){
var url='${pageContext.request.contextPath}/adminx/changePlanList!changePlanList.do'
//alert(durl);
var id = "#"+changeId;
//alert("要改动的id:"+id);
//alert($(obj).val());
if($("#deptId").val()!='0'){ //有选中的 obj 0为全部的.
var data = $("#deptId").val(); //deptId的值. 原obj
//alert(data);
url = url +"?deptId="+data;
$.post(url,function(data){ //data json数组,字符串.
$(id).html("");
//alert("data:"+typeof(data));
if(data !=null&&data!=""){
//alert(2);
var planArray = eval(data);
$.each(planArray,function(i,item){
//alert(3);
//可以判断选择的是...
$(id).append("<option value="+item.id+">"+item.name+"</option>");
});
$(id).append("<option value='all'>全部</option>");
}
/*wayB:
for(var i = 0;i<planArray.length;i++){
} */
});
}else{ //如果第一个是全部,那么下一个也就是全部了.
//alert("第一个选中的是全部!");
//让计划列表默认选中的是 全部.
$(id).html(""); //清空所有. 加上全部.
$(id).attr("disabled",true);
// $("#planId").val("all"); //让计划的也是all 全部. 无效的. //<select id="planId" name="planId" class="ui_select01"></select>?
}
}
//重置学员密码
function resetPersonPwd(id){
mylandConfirmByFunc(
"重置学员密码","确定要重置该学员密吗？",
function yesFunc(){
$("#personId").attr("value",id);
var doUrl = "${pageContext.request.contextPath}/adminx/resetPersonPwd.do ";
myLandAjax(doUrl,"personResetPwd","json",restPersonPwdAlert);
},
function noFunc(){},
"重置");
}
//重置密码提示信息
function restPersonPwdAlert(code, data){
if(code == "00") {
var rsObj = JSON.parse(data);
if(rsObj.flag) {
mylandAlert("提示",rsObj.message.mess);
}else{
mylandAlert("错误",rsObj.message.mess);
}
}
}
//关闭 开启人脸
function effectIsFace(ppid,isface){
if(isface == "1"){
mylandConfirmByFunc(
"关闭人脸识别","确定关闭该学员人脸识别？",
function yesFunc(){
$("#personPlanId").attr("value",ppid);
$("#isFace").attr("value",isface);
$("#effectIsFaceForm").submit();
},
function noFunc(){},
"确定",
"取消");
}else if(isface == "0"){
mylandConfirmByFunc(
"开启人脸识别","确定开启该学员人脸识别？",
function yesFunc(){
$("#personPlanId").attr("value",ppid);
$("#isFace").attr("value",isface);
$("#effectIsFaceForm").submit();
},
function noFunc(){},
"确定",
"取消");
}
}
</script>
</head>
<body>
<%--学员信息列表查询 --%>
<form id="agentAction" name="quryForm" action="${pageContext.request.contextPath}/adminx/deptViewPerson_cs.do" method="post">
<s:hidden name="flag" id="flag"></s:hidden>
<div id="container"><!-- 总外容器 含两部分,头部条件,下部分列表显示的-->
<div class="ui_content"> <!-- 头部 溢出隐藏. -->
<div class="ui_text_indent">
<%--整体盒子分 三大部分.头部 搜索提示 --%>
<div id="box_border"> <%--头部的css --%>
<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>
<c:if test="${ agent_id==null}">
<%--如果没有agent_id,就是从组织者学员查询来的;有则是从代理明细/学员查询过来的. --%>
<div id="box_center"> <!--css 时间,普通用2,select用4. -->
身份证号：<%--<s:textfield id="pIdCard" name="viewPerson.pIdCard" cssClass="ui_input_txt02" value="${qc.conditionStr.pIdCard }"/>原input --%>
<input class="ui_input_txt02" name="viewPerson.pIdCard" value="${qc.conditionsObj.pIdCard }"/>
姓名：
<input id="pRealName" name="viewPerson.pRealName" class="ui_input_txt02" value="${qc.conditionsObj.pRealName }"/>
<%--headerKey无法获取动态值,故使用value 接收后台的传值 --%>
树级省市:
<input type="text" id="catTypeId" name="catTypeId" readonly="readonly" style="width:220px;" class="ui_input_txt02" onclick="showMenu();return false;" />
<input type="hidden" name="deptId" id="deptId" value="${qc.conditionsStr.deptId }"/><%--如下关区的 id的.licenseType --%>
学习计划:<%-- ${qc.conditionsStr.planId }###${planList.size() }##${planList !=null && fun:length(planList)>0}
0 C函数标签 --%>
<select id="planId" name="planId" class="ui_select01">
<option value="all">全部</option>
<c:if test="${planList !=null && fun:length(planList)>0}"><%--or ""改为'' ★$)45min. --%>
<c:forEach var="p" items="${planList }">
<option value="${p.id }" <c:if test="${qc.conditionsObj.planId==p.id }">selected</c:if>>${p.name }</option>
</c:forEach>
</c:if>
</select>
</div> <!-- 中间部分的搜索条件 **) end-->
<div id="box_bottom" style="text-align:left;">
<input type="submit" value="查询" class="ui_input_btn01" />
</div>
</c:if>
</div>
</div> <!-- ui_text_indent end-->
</div> <!-- ui_content end -->
<div class="ui_content">
<div class="ui_tb">
<table id="dataTable" class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<th width="50">序号</th>
<th>身份证号</th>
<th>姓名</th>
<th>联系电话</th>
<th>最后登录时间</th>
<th>计划名称</th>
<th>注册时间</th>
<th>当前学时/目标学时</th>
<th>最后学习时间</th>
<th>操作</th>
</tr>
<c:choose>
<c:when test="${empty viewList}">
<tr>
<td colspan="15">
无相关记录
</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach var="viewList" items="${viewList}" varStatus="stats">
<tr>
<td>
<myland:index qc="${qc}" step="${stats.index+1}"/>
</td>
<td>${viewList.pIdCard}</td>
<td>${viewList.pRealName}</td>
<td>${viewList.pTel}</td>
<td><fmt:formatDate value="${viewList.pLastLogin}" pattern="yyyy-MM-dd HH:dd:ss"/></td>
<td>${viewList.planName}</td>
<td>
${viewList.pAddTime }<%--datetime的显示方式 --%>
</td><%-- String的显示方式 s:date format="yyyy-MM-dd" datetime 数据类型 只显示时分秒--%>
<td>${viewList.ppSumStudyTime}/${viewList.ppTargetStudyTime}</td>
<td>${viewList.ppLastDate}</td>
<td width="80" >
<span class="chakan"><%--部门尝试不要传递 --%>
<a href="${pageContext.request.contextPath}/adminx/personRecordAction_cs.do?personId=${viewList.ppPersonId}&personPlanId=${viewList.ppId}&flag=cs&deptId_P=${deptId_P}">学习记录</a>
</span>
<span class="chakan">
<a href="${pageContext.request.contextPath}/adminx/personExamAction_cs.do?personPlanId=${viewList.ppId}&flag=cs&deptId_P=${deptId_P}">考试记录</a>
</span>
<span class="chakan">
<a href="javascript:resetPersonPwd(${viewList.ppPersonId})" class="edit">重置密码</a>
</span>
<span class="chakan">
<c:choose>
<c:when test="${viewList.ppIsFace=='0'}">
<a href="javascript:effectIsFace(${viewList.ppId},1)" class="edit">关闭人脸</a>
</c:when>
<c:when test="${viewList.ppIsFace=='1'}">
<a href="javascript:effectIsFace(${viewList.ppId},0)" class="edit">开启人脸</a>
</c:when>
</c:choose>
</span>
</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
</div> <%--中部 end --%>
<myland:page pagination="${qc.pagination}" showType="002"/>
</div><%--ui_content end --%>
</div><!-- 总外容器 end-->
</form> <!-- 总form end -->
<%--重置学员密码form表单 --%>
<form id="personResetPwd" method="post">
<input id="personId" name="personId" type="hidden"/>
</form>
<%--设置人脸识别form表单 --%>
<form id="effectIsFaceForm" method="post" action="${pageContext.request.contextPath}/adminx/effectIsFace.do">
<input id="personPlanId" name="personPlanId" type="hidden"/>
<input id="isFace" name="isFace" type="hidden"/>
</form>
</body>
</html>
dept.js 引入的专门处理树js的文件.
/**
* 类别体系下拉选择功能方法
*/
//設置菜單的顯示類型
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: null ,
onClick: onClick
}
};
//選中后操作 不必判断末级节点.
/*function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("只能选择末节点子类型！");
return check;
}*/
//選中操作
function onClick(e, treeId, treeNode) {
//alert("onClick单击选中操作~");
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
var ids = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
ids += nodes[i].id;
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#catTypeId");
cityObj.attr("value", v);
cityObj.focus();
$("#deptId").attr("value",ids);
hideMenu();
doChange(this,'planId','/jpv2/adminx/changePlanList!changePlanList.do'); //${pageContext.request.contextPath}
}
//页面加载时候选中
function onClick1() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
var ids = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
ids += nodes[i].id;
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#catTypeId");
cityObj.attr("value", v);
$("#deptId").attr("value",ids);
hideMenu();
}
//顯示下拉菜單
function showMenu() {
//alert(1);
var cityObj = $("#catTypeId");
var cityOffset = $("#catTypeId").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
//隱藏下拉菜單
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
//監聽鍵盤操作
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
分享到：
发表评论
-
三级菜单树的组装与遍历显示
2017-03-03 14:28 980Action: UserManagerAction.java ... -
App问题审核 - jsp页面判断根据是否有图片决定是否显示,自定义标签实例
2017-03-01 16:59 611主要结构: 1.MessageHaveImageTag.jav ... -
Test图片显示样式调整
2015-09-14 17:24 0整理采用ssh结构, personActi ... -
window.print() 打印学时证明
2016-12-08 15:51 945主要按照MVC的顺序,+mapper.xml文件. 参考前 ... -
一个简单的行拖动效果 _id="table"
2017-02-10 09:56 511一个简单的行拖动效果 ... -
tab标签页切换效果.
2015-03-16 10:59 2114tab标签页的显示. 相关文件 1.deptViewSumma ... -
汇总统计(部门),涉及结果集转横向(功能样板博客)
2014-12-23 19:44 861[size=medium] 主要按照MVC的顺序,+mappe ... -
数据权限的控制 SSH,jdk7 阶段性总结. --两个select来回移动-模板文章★
2014-12-08 18:38 10181. 2. 二次Rev 贴上去. //=== ... -
省市区三级级联,含有数据库.单一外键模式.
2014-11-09 23:24 11641.最重要的是js部分.其他的数据库使用Oralce10g,M ...
相关推荐
但需要注意，过度使用级联查询可能会导致性能问题，因为它可能会引发"n+1查询"问题，即每获取一个父对象就查询一次子对象，这在数据量大时效率极低。 为了优化，可以考虑使用JOIN查询或二级缓存。在Hibernate中，...
用户选择了一个选项，然后javascript脚本将该选项的值传递给服务器，服务器端的脚本将根据该值从数据库中查询相关数据，并将其返回给客户端，然后客户端根据返回的数据生成下一个级联菜单。 动态级联菜单的实现 ...
"MATLAB 级联失效"指的是使用MATLAB来实现级联失效的模型和算法。"级联_级联失效 代码"则表明这个压缩包包含了级联失效的程序代码，这些代码可能是由MATLAB编写，用于仿真和分析网络中的级联失效现象。 "级联失效...
“Hibernate 级联查询”是指在使用Hibernate这个Java持久化框架时，如何处理对象之间的关联查询。Hibernate提供了级联操作来简化数据的保存、更新和删除等操作，使得开发者无需手动编写复杂的SQL语句，就能实现关联...
1. **复选框与单选按钮**：zTree允许在节点上添加复选框或单选按钮，支持全选、反选、级联选择等操作，常用于多选场景。 2. **节点操作**：如展开/折叠节点、选择/取消选择节点、添加/删除节点等，为用户提供丰富的...
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...
Oracle数据库中的级联查询、级联删除和级联更新是数据库设计中常用的操作，它们用于在多表关联的关系型数据库中实现数据的联动处理。在Oracle中，这些操作主要涉及外键约束和触发器。 首先，级联查询是通过自连接来...
菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联
可以通过代理服务器1使用代理服务器2，比如如果公司上网需要使用公司的代理服务器，不能直接连结Internet上的代理服务器，并且公司的代理服务器屏蔽了某些网站，那么通过这个软件就可以使用Internet上的代理服务器了...
iBATIS 级联iBATIS 级联iBATIS 级联
省市县区/乡-级联表以及数据
2015年最新最全的省市区街道级联查询
在IT领域，动态实现下拉列表框的三级级联查询是一项常见的前端交互功能，它能够为用户提供更加便捷的导航和筛选体验。在这个场景中，我们使用JSP（JavaServer Pages）脚本语言来实现这一功能。JSP是Java平台上的...
例如，在JPEG2000标准中，就使用了级联字典来实现高质量的图像压缩。在机器学习领域，级联字典可以用于特征提取和表示学习，帮助模型更好地理解输入数据的复杂结构。 5. **性能优势**：级联字典相比于单一的过完备...
STM32定时器级联是STM32微控制器中一种高效利用硬件资源、扩展定时功能的方法。在STM32系列芯片中，定时器可以被配置为级联模式，以实现更复杂的定时或计数任务，比如产生精确的PWM输出、高分辨率的计数等。下面我们...
行政区域级联查询js，可引用至网页。。
利用javascript+json实现级联查询
相邻级联一旦建立，调整带宽就需要重新配置整个链路，这在某些情况下可能造成服务中断。 在SDH网络中，虚级联通常用于STM-N（Synchronous Transport Module level N）级别的复用。例如，两个VC-4（STM-1）可以被虚...
在JSP页面中实现级联效果，通常需要通过数据库查询获取到相关的数据，并将其动态地绑定到前端的选择框中。当用户选择了某个选项后，会触发相应的JavaScript函数来更新下一个级别的选择框中的选项。 ### 实现步骤...