客人服务 学员查询 级联,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

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意