`
shuaijie506
  • 浏览: 136151 次
  • 性别: 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框架)实现,还是比较简单的。

相关推荐

    js实现点击向下展开的下拉菜单效果代码

    主要介绍了js实现点击向下展开的下拉菜单效果代码,涉及javascript鼠标事件控制页面元素样式变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    级联下拉列表

    五句代码实现 级联下拉列表 有文档和源码,希望对大家能有帮助!

    博主推荐html下拉框树形(附好看的登录界面)

    完善的树形下拉框功能,根据自定义层级规则展开,可以直接嵌入项目,还附带两个漂亮的登录界面; 更多介绍:https://blog.csdn.net/weixin_43151418/article/details/124689160

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    将下拉菜单嵌到树节点中,使操作更加简便、紧凑。 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态 图示3: 选中并选择菜单 如上,当鼠标悬浮在树节点上时,出现竖着的三个小

    react-dropdown-tree-select:轻巧,可访问,可自定义且快速的React下拉树选择组件

    React下拉树选择React下拉树选择一种轻量级且快速的控件,用于呈现可以显示分层树数据的选择组件。 另外,该控件以药丸形式显示选择,并允许用户搜索选项以进行快速过滤和选择。 还支持显示部分选定的节点。目录随着...

    树形文件夹动态添加修改

    ASP.NET2003纯后台实现文件夹树形结构,包括新建,删除,合并,分开,打开,下载等内容

    FineReport功能说明

    FineReport功能说明:、 多 sheet 报表设计:支持在设计器中创建多 Sheet...复选框、下拉树,下拉多选树、单/复选框组,密码框,网页框,列表、表格树、多文件上 传等二十多种编辑器,报表参数页面和报表内容合二为一。

    js当当网上书店-首页

    当鼠标指针停在“我的当当”超链接上时,显示下拉树形菜单;当鼠标指针离开“我的当当”超链接或树形菜单时,树形菜单隐藏 (1)使用onmouseover、onmouseout事件来实现树形菜单的效果。 (2)使用display属性实现...

    javascript大全---个人认为是很全了

    实现多级关联选择地址 js代码-全国省市县无刷新多级关联菜单.html 背景居中.htm 变颜色的菜单.htm 标题栏显示时间.htm 打开于关闭窗口.htm 带阴影的时钟.htm 倒计时.htm 倒计时2.htm 导 航 条下拉 式 菜 单.htm ...

    ComboboxTree

    用Div和TreeView模拟的下拉框树. 并解决了Select总在最顶端的问题,即下拉框中的树不被Select控件遮盖 用c# + asp.net 2.0实现 ComboBoxTreeCtrl.ascx为自定义下拉树控件 Default.aspx为例子页面

    antd多选下拉框一行展示的实现方式

    我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局。 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏。 下面有2种方案来实现这...

    Delphi7编程100例

    在下拉列表框中显示树形视图 自定义系统的About项 修改系统级菜单 实现透明窗体效果 爆破特技窗体 只允许建立一次子窗体的MDI程序 从外部DLL中调用子窗口 新颖的资源管理器界面 如何生成半圆形窗口...

    地平线cms v2.3

    系统前端设计大气典雅,适合模板定制和更换,导航栏采用下拉菜单方式,与后台目录树成功对接文章列表页采用文章摘要和文章缩略图的方格子展示方式,摘要和缩略图为系统后台添加或者编辑文章时候系统智能提取的,不...

    Delphi编程100例

    在下拉列表框中显示树形视图 自定义系统的About项 修改系统级菜单 实现透明窗体效果 爆破特技窗体 只允许建立一次子窗体的MDI程序 从外部DLL中调用子窗口 新颖的资源管理器界面 如何生成半圆形窗口 制作字幕滚动窗体...

    《Delphi7编程100例》代码

    --------------------ToolBar工具栏控件的使用动态建立主菜单选项窗口界面的动态分隔条动态设置选项卡页面在标题栏中自定义按钮窗体开合窗帘效果Windows XP界面效果实现OutLook滚动工具栏效果在下拉列表框中显示树形...

    vue日期控件实现可以选择年月或者选择年月日

    1、可以选择年月或者选择日期,比如:选择年月,在显示框中就显示2022-06,如果选择日期,则显示2022-06-04 2、默认是当前日期,当点击控件时弹框显示定位到当前的年和月,日默认为空

    Delphi 7编程100例

    在下拉列表框中显示树形视图 自定义系统的About项 修改系统级菜单 实现透明窗体效果 爆破特技窗体 只允许建立一次子窗体的MDI程序 从外部DLL中调用子窗口 新颖的资源管理器界面 如何生成半圆形窗口 制作字幕滚动窗体...

    EasyUI创建人员树的实例代码

    我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面。如需调用,只需要include这个jsp即可 userTree.jsp: &lt;&#37;@ page contentType=...

    ExtAspNet_v2.3.2_dll

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

Global site tag (gtag.js) - Google Analytics