客人服务 学员查询 级联,zTree的使用
客服学员查询:
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.
客服学员查询页面 deptViewPersonList_cs.jsp
doChange()事件.
dept.js 引入的专门处理树js的文件.
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.
客服学员查询页面 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();
}
}