`
zqb666kkk
  • 浏览: 732066 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

JS简洁版下拉树

阅读更多

这是struts2的应用其他也可以根据需要灵活改动:

        <script type="text/javascript">
    //JS下拉 树
var data =new Array();
<s:iterator  value="#request.articleTypelist" status="stuts">
data[${stuts.index}]= {id:'<s:property value="id" />',pid:'<s:property value="parentID" />',text:'<s:property value="name"  escape="false"/>'};

  </s:iterator>
function TreeSelector(item,data,rootId){
this._data = data;
this._item = item;
this._rootId = rootId;

}
TreeSelector.prototype.createTree = function(){
var len =this._data.length;
for( var i= 0;i<len;i++){
if ( this._data[i].pid == this._rootId){
this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id));
for(var j=0;j<len;j++){
this.createSubOption(len,this._data[i],this._data[j]);

}
}
}
}

TreeSelector.prototype.createSubOption = function(len,current,next){
var blank = "    ";
if ( next.pid == current.id){
intLevel =0;
var intlvl =this.getLevel(this._data,this._rootId,current);
for(a=0;a<intlvl;a++)
blank += "    ";
blank += " ├-";
this._item.options.add(new Option(blank + next.text,next.id));

for(var j=0;j<len;j++){
this.createSubOption(len,next,this._data[j]);

}

}
}

TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){

var pid =currentitem.pid;
if( pid !=topId)
{
for(var i =0 ;i<datasources.length;i++)
{
if( datasources[i].id == pid)
{
intLevel ++;
this.getLevel(datasources,topId,datasources[i]);
}
}
}
return intLevel;
}
function VF(){
    $('myselect').value=$('realtype').value;
}
</script>

 

 

 

分享到:
评论
2 楼 zqb666kkk 2011-12-17  
xyxyweb 写道
代码没贴完整啊!!

就是struts2后台返回一个list的集合到前台 然后遍历下
1 楼 xyxyweb 2011-11-23  
代码没贴完整啊!!

相关推荐

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

    在IT行业中,"下拉树(下拉页面)"是一种常见的用户界面组件,它结合了下拉菜单和树形结构的特点,使得用户可以在一个简洁的界面上进行层级选择。这种组件通常用于显示具有层次关系的数据,如组织结构、地区分类、产品...

    下拉树形列表

    在IT界,尤其是在前端开发领域,下拉树形列表是一种常见的交互元素,它结合了下拉菜单和树状结构的特点,使得用户可以在一个简洁的界面中进行多级选择。本篇将深入探讨“下拉树形列表”的相关知识点,以及如何在实际...

    jquery无限极复选框下拉树

    **jQuery无限极复选框下拉树**是一种交互式的用户界面元素,常用于在Web应用中展示层次结构的数据,如组织结构、目录树或者复杂的分类系统。这种组件允许用户通过展开和折叠节点来查看和选择多级选项。下面将详细...

    19款JS版简洁下拉菜单特效-包括图片菜单.rar

    标题中的“19款JS版简洁下拉菜单特效-包括图片菜单.rar”表明这是一个包含JavaScript实现的下拉菜单集合,其中可能包含多个不同设计风格的菜单,并且这些菜单还支持图片作为菜单项。这些特效通常用于网站的导航部分...

    zepto.js 版时间 日期 下拉 省市区级联

    `mobiscroll版时间 日期 下拉 省市区级联.zip`则是mobiscroll组件的压缩包,包含了相关的CSS和JS文件,用于构建级联选择器。`css`和`js`目录则分别存储了项目的样式表和脚本文件。 综上所述,这个项目展示了HTML5的...

    带变形动画特效的下拉导航菜单特效

    总结起来,"带变形动画特效的下拉导航菜单特效"是结合了jQuery库的JavaScript编程和CSS3动画技术的优秀示例。它提高了用户体验,增强了网页的互动性,同时也展示了现代Web开发中的创新设计思维和技术融合。开发者在...

    js下拉菜单生成器dropMenu使用方法详解

    下拉菜单因其优秀的用户体验及界面简洁性而被广泛使用。我们今天要详细解析的是一个名为dropMenu的JavaScript下拉菜单生成器,它为开发者提供了一种快速创建和定制下拉菜单的方法。本篇文章将详细阐述dropMenu的使用...

    暖色漂亮的js下拉菜单【封装版】.rar

    效果挺简洁的下拉菜单,由Js和CSS共同实现,包括了一个js封装库,菜单背景所用的图片资源同时也附有PSD文档,修改起来就方便多了,js css横向二级导航菜单--桔黄色风格,一种暖人心的颜色。主菜单中若包括了子菜单,...

    最新js精美下拉菜单.rar

    在网页交互设计中,下拉菜单是一种常见的用户界面元素,能够帮助用户以简洁的方式浏览和选择多个选项。本压缩包“最新js精美下拉菜单.rar”包含了一系列精心设计的JS下拉菜单实现,适用于各种网页项目,特别强调了...

    纯JS省市区三级联动,全国省市区用js实现三级下拉,直接引用js即可,后续更新版

    标题"纯JS省市区三级联动,全国省市区用js实现三级下拉,直接引用js即可,后续更新版"表明这是一个基于JavaScript编写的、用于实现全国范围内的省市区三级联动效果的代码库。它强调了“纯JS”,意味着不依赖任何外部...

    js的下拉菜单

    jQuery是一个高效、简洁且易用的JavaScript库,它简化了许多DOM操作,动画效果和事件处理,因此在创建下拉菜单时,jQuery常被作为首选工具。 创建一个基于jQuery的下拉菜单,首先需要了解HTML结构。基础的下拉菜单...

    简易清新的CSS3下拉菜单.zip

    在实际应用中,为了确保浏览器兼容性,开发人员可能还需要结合JavaScript(JS)来处理某些功能,比如在不支持CSS3的旧版浏览器中模拟过渡效果。这里的"JS特效-菜单导航"标签可能意味着此菜单还包含了一些JavaScript...

    mootools版无限级纵向下拉菜单

    MooTools是一个轻量级且模块化的JavaScript库,其设计目标是提供简洁的API和高效的代码。MooTools的核心理念是"Write Less, Do More",它支持面向对象的编程方式,使得JavaScript开发更加规范和易于维护。 ### 二、...

    20多款比较酷的js下拉菜单效果

    本文将深入探讨“20多款比较酷的js下拉菜单效果”这一主题,涵盖js(JavaScript)在创建动态下拉菜单中的应用、设计趋势以及实现这些效果的技术细节。 首先,JavaScript作为一种强大的客户端脚本语言,为网页添加了...

    js css折叠展开菜单简洁版.rar

    这个“js css折叠展开菜单简洁版”是一个实用的脚本实例,它允许用户通过鼠标单击主菜单项来展开或收起子菜单,这种效果也常常被称为下拉菜单。下面我们将详细探讨这个菜单实现的技术细节及其应用。 首先,...

    dwr-下拉菜单实现

    主要涉及的技术点包括:DWR的基本原理、如何通过DWR调用服务器端方法获取列表数据、前端JavaScript处理获取的数据以及动态生成下拉菜单选项。 #### DWR简介 DWR是一种简化Ajax应用开发的Java库,它允许在浏览器端...

    js下拉菜单.zip

    "js下拉菜单.zip"这个压缩包文件显然包含了与JavaScript下拉菜单相关的代码和资源,这是网页设计中常见的一种交互元素,尤其对于创建用户友好的导航菜单至关重要。在这里,我们将会探讨JavaScript下拉菜单的基本原理...

    下拉列表控件

    dtree是一款全JavaScript实现的下拉树形控件。它允许开发者将层级结构的数据以树状形式展现,并且可以作为下拉列表使用。这个插件的特点在于其轻量级,无需依赖其他库,因此在页面加载速度和资源占用上具有优势。...

    三级联动下拉列表框(SELECT)jquery插件(js 三级联动) php版

    2. **js 三级联动**:这个描述表明项目中的JavaScript代码实现了三个下拉列表之间的联动效果。当用户在一级列表中做出选择时,JavaScript会发送请求到服务器获取对应的二级选项;同样,当二级选择改变时,会获取三级...

    selectpage.js,版本2.19

    SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用。 兼容Bootstrap2、3样式,以及非...

Global site tag (gtag.js) - Google Analytics