本文主要是介绍客人服务 学员查询 级联,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的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
