`
yulon
  • 浏览: 118280 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js异步加载下拉树的实现

阅读更多

下拉树图示:

 

 
 主要实现部分:

第一,freemarker页面显示部分

	<input type="hidden" name="comboxId" id="comboxId">
	<div style="position:relative;float:left;">
	<div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200px;height:16px;" >
	    <div id="downICON" align="center"><img src="${path}/images/combo.gif" /></div>
		<div id="displyContent">${displayName}</div>				
	</div>
	
	<ul id="comboxTree" class="tree" style="display:none;overflow:auto;background-color:#f5f5f5;border :1px solid Silver;position:absolute;z-index:5;"></ul>
	
	</div>

 外层div的position要设置为relative,里层的<ul>要设置position:absolute;z-index:5,z-index设置为一个大于0的值就可以。这样显示ul对象的时候才会叠在其他层的上面,而不会把下面的层挤走。这部分熟悉div布局的读者应该会比较清楚。

显示树的组件比较多,如dtree,zTree之类的,在这不作介绍,本人使用的是zTree,zTree是jquery的一个插件,可以实现异步加载,不用一下子将整个树加载进来。

第二,js方法 showComboxTree,如下:

function showComboxTree(obj, treeName){
			if (document.getElementById(treeName).style.display == 'none') {			
				var objTop = obj.offsetTop;
				var objLeft = obj.offsetLeft;
				var treeTop = objTop + parseInt(obj.style.height);
				var treeLeft = objLeft;
				document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
				document.getElementById(treeName).style.left = treeLeft;
				document.getElementById(treeName).style.display = 'block';
				document.getElementById(treeName).style.width = obj.style.width;
				document.getElementById(treeName).style.height = '150'; //控制高度
			}else{
				document.getElementById(treeName).style.display = 'none';
			}
		}

 comboxTree.ftl完整代码如下:

<#assign path="${request.getContextPath()}">
<link rel="stylesheet" href="${path}/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${path}/ztree/jquery-1.4.2.js"></script>
<script type="text/javascript" src="${path}/ztree/jquery-ztree-2.3.min.js"></script> 
	<style>
		#combo{
			cursor:hand;
			border:1px solid #949DA4;
		}
		#displyContent{
			float:center;
			
		}
		#downICON{
			float:right;
			width:15px;
		}
	</style>
	<script language="javascript">
		function showComboxTree(obj, treeName){
			if (document.getElementById(treeName).style.display == 'none') {			
				var objTop = obj.offsetTop;
				var objLeft = obj.offsetLeft;
				var treeTop = objTop + parseInt(obj.style.height);
				var treeLeft = objLeft;
				document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
				document.getElementById(treeName).style.left = treeLeft;
				document.getElementById(treeName).style.display = 'block';
				document.getElementById(treeName).style.width = obj.style.width;
				document.getElementById(treeName).style.height = '150'; //控制高度
			}else{
				document.getElementById(treeName).style.display = 'none';
			}
		}
	</script>
	<input type="hidden" name="comboxId" id="comboxId">
	<div style="position:relative;float:left;">
	<div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200px;height:16px;" >
	    <div id="downICON" align="center"><img src="${path}/images/combo.gif" /></div>
		<div id="displyContent">${displayName}</div>				
	</div>
	
	<ul id="comboxTree" class="tree" style="display:none;overflow:auto;background-color:#f5f5f5;border :1px solid Silver;position:absolute;z-index:5;"></ul>
	
	</div>
	<SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;
		setting = {
			checkable: false,
			async: true,
			asyncUrl: "${path}${treepath}",  //获取节点数据的URL地址
			asyncParam: ["isRoot", "id"],  //获取节点数据时,必须的数据名称,例如:id、name
			callback:{
				asyncSuccess: zTreeOnAsyncSuccess,
				asyncError: zTreeOnAsyncError,
				click: zTreeOnClick
			},
			expandSpeed:""
		};
		var zNodes =[];
	$(document).ready(function(){
		refreshTree();
	});
	//点击事件
	function zTreeOnClick(event, treeId, treeNode) {
		document.getElementById('displyContent').innerHTML = treeNode.name;
		document.getElementById('comboxTree').style.display = 'none';
		onclickTreeNode(treeNode);
		$("#comboxId").val(treeNode.id);
	}
	
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		
	}

	function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
	
	}

	function refreshTree() {
		setting.asyncUrl = "${path}${treepath}";
		zTree1 = $("#comboxTree").zTree(setting, zNodes);
	}
  //-->
  </SCRIPT>

 

第三步,自定义jsp标签,jsp标签处理类实现如下:

public class ComboxTreeTag extends TagSupport{

	private static final long serialVersionUID = 2659323085594887144L;
	private String displayName;
	private String actionUrl;
	private final static String defaultUrl="/tree/getTreeOnParent.action"; 
	
	public int doStartTag() throws JspException {
		Configuration freemarkerCfg = FreemarkerService.getConfiguration();
		JspWriter out=super.pageContext.getOut();
		pageContext.getServletContext();
		try {
			Writer writer = new StringWriter();
		
			Template template = freemarkerCfg.getTemplate("comboxTree.ftl", "UTF-8");
			SimpleHash root = new SimpleHash(ObjectWrapper.BEANS_WRAPPER); 
			//给模板动态填充数据
			root.put("treepath",actionUrl==null?defaultUrl:actionUrl);
			root.put("displayName",displayName);
			//处理模版      
			 try {
					template.process(root, writer);
				} catch (TemplateException e) {
					e.printStackTrace();
				}    
			writer.flush();    
			String content = writer.toString();
			writer.close(); 
			out.write(content);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return super.doStartTag();
	}
	public String getDisplayName() {
		return displayName;
	}
	public void setDisplayName(String displayName) {
		this.displayName = displayName;
	}
	public String getActionUrl() {
		return actionUrl;
	}
	public void setActionUrl(String actionUrl) {
		this.actionUrl = actionUrl;
	}
}

 

 第四步,webtag.tld

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
    version="2.1">
  <description>JSTL 1.1 core library</description>
  <display-name>JSTL core</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>c</short-name>
  <uri>/web-tags</uri>
  <tag>
    <name>comboxTree</name>
    <tag-class>com.tc.jsptag.ComboxTreeTag</tag-class>
    <body-content>JSP</body-content>
    <attribute>
        <name>actionUrl</name>
		<type>java.lang.String</type>
    </attribute>
    <attribute>
    	<name>displayName</name>
    	<type>java.lang.String</type>
    	<required>true</required>
    	<rtexprvalue>true</rtexprvalue>
    </attribute>
  </tag>
</taglib>

 

第五部分,在页面使用comboxTree,testComboxTree.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="tc" uri="/web-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试comboxTree</title>
  </head>
  <body>
    <tc:comboxTree displayName="默认部门"/>
    <br><br>
    <div style="top: 50px;"><img src="${basePath}images/01.jpg"/> </div>  
  </body>
</html>

 

 

  • 大小: 19.3 KB
  • 大小: 21.2 KB
1
7
分享到:
评论

相关推荐

    帆软报表填报预览下的懒加载下拉树控件

    实现懒加载下拉树控件的关键在于以下几个方面: 1. **异步数据加载**:当用户展开树节点时,通过异步请求获取该节点的子节点数据,而不是在初始化时一次性加载所有数据。 2. **缓存管理**:对已加载的节点数据进行...

    ExtJS3 实现异步下拉树

    2. **Ajax 数据源**:异步加载数据通常通过Ajax请求实现。需要定义一个`TreeStore`,配置`proxy`为`Ext.data.TreeProxy`,并设置`url`属性指定服务器接口地址,用于获取节点数据。 3. **JsonReader**:数据解析器,...

    Extjs4树结构异步加载

    在ExtJS4中实现树结构的异步加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是树结构的数据源,它负责管理与服务器之间的数据通信。对于异步加载,我们需要配置TreeStore,设置`autoLoad`为`false`...

    手机移动端Tab选项卡切换带下拉数据异步加载js插件

    本文将深入探讨“手机移动端Tab选项卡切换带下拉数据异步加载js插件”的相关知识,包括其工作原理、实现方式以及如何优化。 1. **Tab选项卡设计** - Tab选项卡是一种常见的界面设计模式,它允许用户通过点击不同的...

    jQuery实现支持Ajax异步加载的树形下拉菜单源码.zip

    本资源"jQuery实现支持Ajax异步加载的树形下拉菜单源码.zip"提供了一个利用jQuery创建的树形下拉菜单,该菜单具有通过AJAX异步加载数据的功能。下面我们将详细探讨这个技术点。 首先,jQuery的核心优势在于其简洁的...

    下拉树(下拉页面)的实现

    此外,它还可能实现了与后端数据的交互,如异步加载子节点,以优化用户体验和性能。 在CSS方面,虽然没有直接的CSS文件,但我们可以假设在HTML文件中存在内联样式或`&lt;style&gt;`标签,用于定制下拉树的外观。这些样式...

    下拉树加载

    本示例是一个HTML实现,通过结合JavaScript(可能使用了jQuery或其他JS库)和CSS,实现了点击input框后展示一个可下拉的树形结构,用户可以逐级浏览和选择。 1. **HTML 结构**:HTML部分可能包含了`&lt;input&gt;`元素,...

    ext 下拉树 ext2

    总之,"ext 下拉树 ext2"是一个基于Ext JS 2.x的下拉树组件,具备异步加载树节点的能力,提供了丰富的用户体验。开发者可以通过解析给定的文件,学习如何利用JavaScript和相关的资源文件来创建并实现类似的功能。

    EasyuiTabs异步加载页面

    异步加载页面通常通过设置 `href` 或 `url` 属性,并配合 `onLoad` 事件来实现。`href` 或 `url` 属性指向需要加载的网页地址,而 `onLoad` 事件则在页面加载完成后触发,可以用来执行一些初始化或验证操作。为了...

    bootstrap框架下带搜索功能的下拉树插件

    Bootstrap框架是目前非常流行的一款前端开发工具,它以其简洁、响应式的设计和强大的组件库而闻名。在Bootstrap中,为了提升用户...在实际项目中,根据具体需求,还可以进一步扩展功能,例如增加多选、异步加载等特性。

    js,javascript写的一个下拉框和下拉树带滚动条

    对于更复杂的场景,例如异步加载数据或自定义样式,可能需要结合Ajax请求和自定义JavaScript函数。此外,还可以利用现有的开源插件,如Select2、Selectize或Chosen,它们提供了丰富的自定义选项和优化的性能。 总的...

    redis + ajax实现异步下拉列表加载

    "redis + ajax实现异步下拉列表加载"的主题聚焦于如何结合Redis内存数据库和Ajax技术来实现在网页中动态加载下拉列表内容。下面我们将详细探讨这两个关键技术和它们如何协同工作。 首先,Redis是一个开源的、基于...

    下拉树形列表

    2. **异步加载**:对于大型数据集,可以采用懒加载策略,只在用户展开某个节点时加载其子节点,以提高页面性能。 3. **搜索功能**:提供搜索框,让用户能快速定位到目标节点。 4. **样式定制**:为了满足不同的设计...

    ExtJs下拉树

    - **ComboBoxTree.js:** 这是实现下拉树功能的主要JavaScript文件,它定义了自定义的ComboBoxTree组件,包含了构造函数、配置项、方法等,用于创建和操作下拉树。 - **ComboBoxTree-min.js:** 这是压缩后的版本,...

    iscroll.js实现下拉刷新上拉加载

    **iscroll.js 实现下拉刷新与上拉加载详解** 在Web开发中,尤其是在移动设备上,为了提供更好的用户体验,下拉刷新(Pull-to-Refresh)和上拉加载(Infinite Scroll)功能变得越来越常见。iscroll.js 是一个轻量级...

    combox下拉树combox下拉树

    如果数据量大,需要考虑异步加载和懒加载策略,以减少初始加载时的性能开销。另外,对于移动设备,可能需要考虑触屏友好的交互设计和响应式布局。 总的来说,Combox下拉树是提升用户交互体验的一种有效方式,它能...

    js实现树型下拉菜单

    这种菜单在JavaScript(简称js)的帮助下可以轻松实现,为用户提供了一种直观且高效的导航方式。本文将详细讲解如何使用JavaScript来创建一个树型下拉菜单。 首先,我们需要理解树型下拉菜单的基本结构。它通常由一...

    jQuery+ajax异步加载分页代码

    在网页开发中,为了提高用户体验,我们常常会采用异步加载(Ajax)技术来实现分页功能,这样用户无需等待整个页面刷新,仅需加载新数据即可。本示例是基于jQuery库实现的简单而实用的分页代码,它允许开发者自定义...

    select2最好用的异步请求下拉搜索

    在写一个功能的时候需要根据司机查询车辆,后台数据动态追加到下拉框,因为车辆较多,所以需要用搜索,刚开始用了一种,但是跟打印功能冲突,后来找到了select2,这里有三个文件,一个js,一个css,还有一个用法说明,...

Global site tag (gtag.js) - Google Analytics