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

阅读更多

客服学员查询:
技术点:
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"%>





<%--北京方面制定的样式 添加. --%>



<%--分页用CSS --%>

























	<%--学员信息列表查询 --%>


	

		
 
			

				<%--整体盒子分 三大部分.头部 搜索提示 --%>
				
 <%--头部的css --%>
						

							

						
 
					
					<%--如果没有agent_id,就是从组织者学员查询来的;有则是从代理明细/学员查询过来的. --%>
					
 
						身份证号：<%--原input --%>
						
						姓名：
							
						<%--headerKey无法获取动态值,故使用value 接收后台的传值 --%>
						树级省市:
						
						<%--如下关区的 id的.licenseType --%>
						
						学习计划:<%-- ${qc.conditionsStr.planId }###${planList.size() }##${planList !=null && fun:length(planList)>0}
						0 C函数标签  --%>
						
							全部						
							<%--or ""改为'' ★$)45min. --%>
								
									selected>${p.name }
								
							
						
						
					
 
					
					

						
					
					
					
				
			
 
		
	
		

			

				
					
						
						
						<%-- String的显示方式 s:date format="yyyy-MM-dd" datetime 数据类型 只显示时分秒--%>
							

				

					
序号
					
身份证号
					
姓名
					
联系电话
					
最后登录时间
					
计划名称
					
注册时间
					
当前学时/目标学时
					
最后学习时间
					
操作
				
				

							

								无相关记录
							
						
					
					

							

								
							
							
${viewList.pIdCard}
							
${viewList.pRealName}
							
${viewList.pTel}
							

							
${viewList.planName}
							

							${viewList.pAddTime }<%--datetime的显示方式 --%>
							
${viewList.ppSumStudyTime}/${viewList.ppTargetStudyTime}
							
${viewList.ppLastDate}
							

								<%--部门尝试不要传递 --%>
									学习记录									
								
								
									考试记录
								
								
									重置密码
								
								
									
										
											关闭人脸
										
										
											开启人脸
										
																		
								
							
						
					
					
				
			
			
 <%--中部 end --%>
			
		
<%--ui_content end --%>
	

 	
<%--重置学员密码form表单 --%>

	

<%--设置人脸识别form表单 --%>

	
	

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 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 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();
		}
	}

• 
• 大小: 112.9 KB

• 
• 大小: 144.6 KB

• 查看图片附件