客人服务 学员查询 级联,zTree的使用

2024-06-08 16:38

本文主要是介绍客人服务 学员查询 级联,zTree的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

客服学员查询:
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.
显示效果:
1)选择北京,后面的plan为北京对应
[img]http://dl2.iteye.com/upload/attachment/0125/6057/49817179-0efb-34b9-856d-f5be4c936402.png[/img]
2)选择全国,后面的plan为全国对应
[img]http://dl2.iteye.com/upload/attachment/0125/6059/1628cafe-a354-3f16-a855-2f24a32c8396.png[/img]

客服学员查询页面 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();		}	}

这篇关于客人服务 学员查询 级联,zTree的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1042732

相关文章

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典