下拉树图示:
主要实现部分:
第一,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. **异步数据加载**:当用户展开树节点时,通过异步请求获取该节点的子节点数据,而不是在初始化时一次性加载所有数据。 2. **缓存管理**:对已加载的节点数据进行...
2. **Ajax 数据源**:异步加载数据通常通过Ajax请求实现。需要定义一个`TreeStore`,配置`proxy`为`Ext.data.TreeProxy`,并设置`url`属性指定服务器接口地址,用于获取节点数据。 3. **JsonReader**:数据解析器,...
在ExtJS4中实现树结构的异步加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是树结构的数据源,它负责管理与服务器之间的数据通信。对于异步加载,我们需要配置TreeStore,设置`autoLoad`为`false`...
本文将深入探讨“手机移动端Tab选项卡切换带下拉数据异步加载js插件”的相关知识,包括其工作原理、实现方式以及如何优化。 1. **Tab选项卡设计** - Tab选项卡是一种常见的界面设计模式,它允许用户通过点击不同的...
本资源"jQuery实现支持Ajax异步加载的树形下拉菜单源码.zip"提供了一个利用jQuery创建的树形下拉菜单,该菜单具有通过AJAX异步加载数据的功能。下面我们将详细探讨这个技术点。 首先,jQuery的核心优势在于其简洁的...
此外,它还可能实现了与后端数据的交互,如异步加载子节点,以优化用户体验和性能。 在CSS方面,虽然没有直接的CSS文件,但我们可以假设在HTML文件中存在内联样式或`<style>`标签,用于定制下拉树的外观。这些样式...
本示例是一个HTML实现,通过结合JavaScript(可能使用了jQuery或其他JS库)和CSS,实现了点击input框后展示一个可下拉的树形结构,用户可以逐级浏览和选择。 1. **HTML 结构**:HTML部分可能包含了`<input>`元素,...
总之,"ext 下拉树 ext2"是一个基于Ext JS 2.x的下拉树组件,具备异步加载树节点的能力,提供了丰富的用户体验。开发者可以通过解析给定的文件,学习如何利用JavaScript和相关的资源文件来创建并实现类似的功能。
异步加载页面通常通过设置 `href` 或 `url` 属性,并配合 `onLoad` 事件来实现。`href` 或 `url` 属性指向需要加载的网页地址,而 `onLoad` 事件则在页面加载完成后触发,可以用来执行一些初始化或验证操作。为了...
Bootstrap框架是目前非常流行的一款前端开发工具,它以其简洁、响应式的设计和强大的组件库而闻名。在Bootstrap中,为了提升用户...在实际项目中,根据具体需求,还可以进一步扩展功能,例如增加多选、异步加载等特性。
对于更复杂的场景,例如异步加载数据或自定义样式,可能需要结合Ajax请求和自定义JavaScript函数。此外,还可以利用现有的开源插件,如Select2、Selectize或Chosen,它们提供了丰富的自定义选项和优化的性能。 总的...
"redis + ajax实现异步下拉列表加载"的主题聚焦于如何结合Redis内存数据库和Ajax技术来实现在网页中动态加载下拉列表内容。下面我们将详细探讨这两个关键技术和它们如何协同工作。 首先,Redis是一个开源的、基于...
2. **异步加载**:对于大型数据集,可以采用懒加载策略,只在用户展开某个节点时加载其子节点,以提高页面性能。 3. **搜索功能**:提供搜索框,让用户能快速定位到目标节点。 4. **样式定制**:为了满足不同的设计...
- **ComboBoxTree.js:** 这是实现下拉树功能的主要JavaScript文件,它定义了自定义的ComboBoxTree组件,包含了构造函数、配置项、方法等,用于创建和操作下拉树。 - **ComboBoxTree-min.js:** 这是压缩后的版本,...
**iscroll.js 实现下拉刷新与上拉加载详解** 在Web开发中,尤其是在移动设备上,为了提供更好的用户体验,下拉刷新(Pull-to-Refresh)和上拉加载(Infinite Scroll)功能变得越来越常见。iscroll.js 是一个轻量级...
如果数据量大,需要考虑异步加载和懒加载策略,以减少初始加载时的性能开销。另外,对于移动设备,可能需要考虑触屏友好的交互设计和响应式布局。 总的来说,Combox下拉树是提升用户交互体验的一种有效方式,它能...
这种菜单在JavaScript(简称js)的帮助下可以轻松实现,为用户提供了一种直观且高效的导航方式。本文将详细讲解如何使用JavaScript来创建一个树型下拉菜单。 首先,我们需要理解树型下拉菜单的基本结构。它通常由一...
在网页开发中,为了提高用户体验,我们常常会采用异步加载(Ajax)技术来实现分页功能,这样用户无需等待整个页面刷新,仅需加载新数据即可。本示例是基于jQuery库实现的简单而实用的分页代码,它允许开发者自定义...
在写一个功能的时候需要根据司机查询车辆,后台数据动态追加到下拉框,因为车辆较多,所以需要用搜索,刚开始用了一种,但是跟打印功能冲突,后来找到了select2,这里有三个文件,一个js,一个css,还有一个用法说明,...