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

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

阅读更多

这几天看到又有人用这个下拉树了,没有及时解答,深感抱歉,现将最新使用的源码贡献出来,希望能帮助那些有需要的人。

 

最近项目中要用到下拉多选树,有人从网上找了一个,用了一段时间后发现有一些问题,一个页面中只能有一个下拉树,我就研究其中的代码,自己重新写了一个下拉页面的脚本,能够在一个页面中使用多个下拉树。

其原理其实就是用DIV的隐藏的显示来实现下拉页面,页面放在了DIV里的一个FRAME里,用JS来控制这些显示与隐藏,废话不多说了,把源码给大家公布一下。代码中如有不足之处敬请大家指出。

给大家说一下它的用法,首先在页面里加上JS文件:<script src="TSelect.js"></script>
在需要下拉树的地方写一个DIV:

 

JS里用到了两个图片,你可以把这两个图片放到主页面同一层的路径下,或者直接修改JS源文件,把它指向你自己的路径。

目标页面需要加一些东西,写一个函数:

function getUserData(tag){
 var ids = tree1.getAllChecked();
 if(ids.length==0)return "";
 if(tag=="id")
  return tree1.getAllChecked();
 else if(tag=="name"){
  var idArray = ids.split(",");
  var names=tree1.getItemText(idArray[0]);
  for(i=1;i    names += "," + tree1.getItemText(idArray[i]);
  return names;
 }
}
其中的返回值可以根据你的页面要实现的功能改动。


在页面中需要用到树的地方这样写:<script language="javascript">addTree("aa","bb","equ","checkBox=true","500px");</script>

这个函数中的参数给大家详细解释一下,
存储名字的字段名,(id或name都行,如果你的主页面里没有这样的字段,JS会帮你创建它); 

存储ID的字段名,

树的类型,

树中加的参数, 

显示下拉树的宽度(可以用html语言中的宽度来表示) 

 

 

 

 

 

 

1
1
分享到:
评论
5 楼 lw07100015 2013-11-04  
就是不靠谱 ,奇怪的东西,根本用不了。哎,包里面都是点垃圾东西
4 楼 zqb666kkk 2010-10-18  
TSelect.js这个文件呢?
3 楼 lq410 2009-01-16  
遇到个小问题,Example.rar 实例中,如果只选中设备1的话,点击页面时,会弹出个错误提示框,不知道有没有解决的办法,急啊。
2 楼 liuqingyou 2007-05-10  
2.htm中,怎样才能让它初始化时处于不展开的状态?
1 楼 wilddonkey 2006-11-23  
用ajax或者dwr(ajax框架)实现,还是比较简单的。

相关推荐

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

    本文将详细讲解如何在Bootstrap环境下实现一个带有搜索功能的下拉树插件,并基于`bootstrap-select`和`bootstrap-treeview`两个库进行介绍。 首先,`bootstrap-select`是Bootstrap官方推荐的一个下拉菜单增强插件,...

    Select 下拉树 Ztree

    实现"Select 下拉树",首先需要理解ZTree的基本配置和使用方法。ZTree的初始化通常涉及以下几个步骤: 1. 引入ZTree的CSS和JS文件:在HTML文件中,需要引入ZTree的样式表和JavaScript库,确保其正常运行。 2. 准备...

    ext js 下拉树

    在实际应用中,你可能还需要关注CSS样式,确保下拉树与页面其他元素保持一致的视觉风格。这可能涉及到修改Ext JS默认的主题或创建自定义样式。 以下是一个简单的下拉树实例代码片段,展示了如何配置`Ext.form.field...

    下拉树形列表

    在实现下拉树形列表时,还需要考虑以下几点: 1. **事件处理**:包括点击事件、展开/折叠事件等,这些事件需要绑定到每个节点上,以便用户进行交互。 2. **异步加载**:对于大型数据集,可以采用懒加载策略,只在...

    bootstrap treeview可搜索下拉树形

    这个特定的压缩包文件包含了一个实现可搜索下拉树形功能的示例,这在许多Web应用中非常有用,比如用于导航菜单、组织结构展示或者层级数据的交互操作。 在jQuery中,Bootstrap Treeview通过添加特定的CSS样式和...

    下拉树jquery

    总的来说,下拉树jQuery组件是通过jQuery库实现的一种交互式UI元素,它提供了跨浏览器的兼容性和丰富的用户体验,适用于展示和操作具有层级关系的数据。通过理解其基本概念、实现原理和代码实例,开发者可以更好地在...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    ExtJS3 实现异步下拉树

    在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载时间,提高了用户体验。 核心知识点: 1. **ExtJS TreePanel**:下拉树的基础是TreePanel组件,它是一个显示树形数据结构的...

    extjs下拉树

    4. **添加到容器**:将下拉树组件添加到容器或面板中,以便在页面上显示。 ```javascript var formPanel = Ext.create('Ext.container.Container', { layout: 'fit', // 使用fit布局,使下拉树填满容器 items: ...

    layui树形下拉菜单完整实例

    在“layui树形下拉菜单完整实例”中,我们主要关注的是如何将tree组件与下拉菜单相结合,实现如初始化、动态赋值以及获取选中值等关键功能。 首先,让我们了解layui的tree组件。tree组件是layui提供的一种用于展示...

    layui树形下拉菜单

    本教程将详细介绍如何在layui中实现一个功能完备的树形下拉菜单。 一、layui简介 layui是一款基于HTML5/CSS3的轻量级前端组件库,它提供了一整套UI解决方案,包括表格、按钮、表单、弹窗、导航等,且支持响应式布局...

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

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

    基于ztree开发的下拉树控件ztree-select

    【基于ztree开发的下拉...通过这些配置,你可以实现一个符合业务需求的、具有搜索功能的下拉树控件。同时,由于ztree-select是基于ztree的,所以它也继承了ztree的灵活性和可扩展性,能够适应复杂多变的前端应用场景。

    下拉树形控件

    在网页开发中,下拉树形控件是一种常见的交互元素,尤其在数据层级关系复杂时,它能够有效地展示和管理这些层次结构。本教程将深入探讨如何使用jQuery库来实现这种功能。 首先,jQuery是一个轻量级的JavaScript库,...

    selectTree 下拉树菜单控件

    下面我们将深入探讨下拉树菜单控件的工作原理、实现方式以及其在实际应用中的优势。 首先,SelectTree控件的核心功能是将数据结构化为可交互的树形展示,并提供下拉操作。在JavaScript中,通常通过AJAX技术从服务器...

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

    通过这个压缩包,开发者可以快速地在自己的项目中实现一个具有搜索功能的下拉树,无需从头开始编写复杂的交互逻辑和样式。只需按照提供的模板和说明进行适当的配置和调整,就能实现类似的功能。这对于那些需要处理...

    Ext下拉树、下拉表格

    在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...

    下拉树控件组合自定义控件

    实现下拉树控件,开发者可以利用各种前端框架或库,如React、Vue、Angular等。例如,在React中,可以使用`react-select`库的自定义组件功能配合`react-nested-select`或`react-widgets`等专门处理树形结构的库来创建...

    ext 下拉树 ext2

    2. `dropTree.htm`:同样,这可能是一个与下拉树相关的HTML页面,可能包含了不同的实现或示例。 3. `MzTreeView1.2.js`:这可能是名为MzTreeView的JavaScript库的1.2版本,虽然不是Ext JS,但可能被用作辅助实现下拉...

Global site tag (gtag.js) - Google Analytics