客人服务 学员查询 级联,zTree的使用_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
最新资讯 | 百度新闻 | GOOGLE地图 | RSS订阅 | 更多
热搜：
更多>>
 
您所在的位置： 程序员俱乐部 > 编程开发 > JAVA > 客人服务 学员查询 级联,zTree的使用

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

 2015/3/2 12:44:19  lengzl  程序员俱乐部  我要评论(0)
  • 摘要：客服学员查询:技术点:1.doChange();省市与计划(某个部门制定的计划)的级联.2.树的应用.直接百度ztreeAPI,进入后,ztreeAPI找相关属性,方法就ok了.客服学员查询页面deptViewPersonList_cs.jspdoChange()事件.<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%><
  • 标签：使用 服务
客服学员查询:
技术点:
1. doChange(); 省市与计划(某个部门制定的计划)的 级联.
2. 树的应用.
  直接百度 ztree API, 进入后, ztree API 找相关属性,方法就ok了.

客服学员查询页面 deptViewPersonList_cs.jsp
doChange()事件. 
class="java">
<%@ 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();
		}
	}


上一篇： Java程序员应当知道的10个面向对象设计原则 下一篇： 雷军：中国创业市场缺执行力不缺主意，允许创业者犯错
客人服务 学员查询 级联,zTree的使用
二三线城市互联网服务渗透率调查：娱乐最深
WinForms中TreeView控件的扩展与使用
【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例
IBM将向云服务和移动技术投资40亿美元

发表评论
用户名: 匿名

最新文章
Java程序员应当知道的10个面向对象设计原则
Java程序员..
开源 java CMS - FreeCMS2.3 链接管理
开源 java..

最新标签
  • 高手
  • 大型网站
  • 天猫
  • 回溯
  • 循环
  • SWT
  • class
  • instance
  • 摄像头
  • NullPointerException

    • 今日热点

    推荐文章
    unable to find valid certification path to requested target 的简单解决办法
    unable ..
    老三携剑出山，Swing法力无边
    老..