javascript 树控件 比较好用_javascript技巧

 1.ExtJS TreePanels


TreePanels 是ExtJS自身使用的树控件,它是目前最好用的树控件之一,它有诸多优点比如支持自由拖放,ExtJS本身就有非常完善的API和开发文档,但是商业项目是需要购买license的。


2.QooXdoo Tree Widget

QooXdoo Tree Widget是一款OOP风格的js树控件,它支持自由扩展树控件的样式,比如做成跟文件系统一样的风格,还支持动态添加子节点、键盘导航。

 

3.jsTree

jstree兼容多个浏览器,它有诸多跟extjs TreePanels一样的有点,不过由于是基于Jquery的插件,所以代码风格就不是OOP。

 

4.TreeView

TreeView 是基于Jquery的轻量性、可扩展性强的树控件,它可以把ul列表转变成可以折叠伸缩的树,支持基于配置存储和cookie的树结构保存策略,树控件的基础代码比较轻量很适合在集成到各种项目。

5.Destroydrop

跟4功能比较类似,风格更接近xp文件系统,构造起来非常方便。

 

6.jQuery File Tree

这是一款可配置的、ajax方式读取的Jquery文件浏览插件,大概用一行代码你就可以构造一颗树,它支持的服务端语言包括:PHP, ASP, ASP.NET, JSP, and Lasso,(它直接输出HTML,而jsTree和Extjs分别是通过json和xml来构建树)。

 

7.jQuery Simple Tree

jQuery SimpleTree是用来展示树形结构的可拖放插件,简介美观但是代码比较晦涩所以扩展可能比较难。

 

8.DHTML TreeView

又一个轻量级树控件。

9.Graphic JavaScript Tree with Layout

实现了J.Q.WalkerII(译者注:一种节点定位算法)一款js树控件。

10、Fly mini Tree 1.0 js 树控件

总结

构建树控件的比较理想的一种方法是用ul、li这种简单的标签组合来实现,但是你如果想实现复杂一点的比如要节点可编辑、可拖动、可更换风格等等我想ExtJS是最好的选择了。

时间: 2024-12-11 02:15:49

javascript 树控件 比较好用_javascript技巧的相关文章

javascript遍历控件实例详细解析_javascript技巧

js遍历页面控件, 复制代码 代码如下:  var inputArr = document.forms[0];   for( var i = 0; i < inputArr.length; i++ ) {    if( inputArr[i].type.toUpperCase() == "BUTTON" ) {     inputArr[i].disabled="disabled";    }else if( inputArr[i].type.toUpperC

设置点击文本框或图片弹出日历控件的实现代码_javascript技巧

<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "> <input class="canlderImg" data-tag="start" type="ima

动态加载图片路径 保持JavaScript控件的相对独立性_javascript技巧

当时考虑有三种方法: 1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了. 2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用.但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做. 3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯. 关键代码如下: 复制代码 代码如下: //创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strPath=wi

javascript 获取所有id中包含某关键字的控件的实现代码_javascript技巧

//获取某容器控件中id包含某字符串的控件id列表 //参数:容器控件.要查找的控件的id关键字.要查找的控件的标签名称 //返回值:查找到的控件id列表字符串,以逗号分割. 复制代码 代码如下: function GetIdListBySubKey(container,subKey,TagName) { var idList = ""; for(var i = 0; i < container.childNodes.length;i++) { if(container.chil

JS日期和时间选择控件升级版(自写)_javascript技巧

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

解析使用JS 清空File控件的路径值_javascript技巧

1.关于如何用脚本修改fileupload控件值的问题, 开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件 这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑) 方法1).使用脚本把这个file的input移动到一个form中,然后调用reset,如果有多个这样的input当然还要再移出来.这个方法我不会采用,因为对.net开发者 来讲习惯了一个页面就一个form所有控件都在其中. 方法2).这个方法有点

js Calender控件使用详解_javascript技巧

最近一直在赶项目.项目现在终于处于稳定的状态,只是修修改改.作为后台程序员的我真是苦逼啊,从web到手机端接口我都得写,杂七杂八的事情...这两天终于闲下来了,没事儿看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧...        首先一个常用的日期函数:Date(year,month,day) 复制代码 代码如下:   var   date=new  Date();        获取年份 复制代码 代

Bootstrap开关(switch)控件学习笔记分享_javascript技巧

bootstrap-switch插件是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸.颜色等属性的自定义.开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用.但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展. 功能说明: 介绍chekbox与radio的两个表单的简单使用,其他更多的效果与功能可以浏览demo,点击按钮以滑动的方式进行on/off切换. 使

BootStrap的Datepicker控件使用心得分享_javascript技巧

2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能! 公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单.今天遇到要使用它的datepicker这个控件. 问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后.于是一顿研究,从上午研究到3点才解决问题. 总结了一下问题所在.主要原因是项目里用的jquery