`

jsTree树控件(基于jQuery, 超强悍)[转]

阅读更多

转自http://zhanjia.iteye.com/blog/369038

2009-4-17

 

jsTree是基于javascript的一个跨浏览器树控件,功能强大,而且是免费的。

1、支持基于HTML定义、Json、XML方式加载树节点

2、支持拖放,动态增加、删除、重命名树节点

3、支持复选框

4、支持复制、剪切、粘贴树节点,动态刷新树

5、提供足够的回调方法:

beforechange: function() { log("About to change"); return true },
        beforeopen  : function() { log("About to open"); return true },
        beforeclose : function() { log("About to close"); return true },
        beforemove  : function() { log("About to move"); return true }, 
        beforecreate: function() { log("About to create"); return true }, 
        beforerename: function() { log("About to rename"); return true }, 
        beforedelete: function() { log("About to delete"); return true }, 
        onselect    : function() { log("Select"); },
        ondeselect  : function() { log("Deselect"); },
        onchange    : function() { log("Focus changed"); },
        onrename    : function() { log("Rename"); },
        onmove      : function() { log("Move"); },
        oncopy      : function() { log("Copy"); },
        oncreate    : function() { log("Create"); },
        ondelete    : function() { log("Delete"); },
        onopen      : function() { log("Open"); },
        onopen_all  : function() { log("Open ALL"); },
        onclose     : function() { log("Close"); },
        error       : function() { },
        ondblclk    : function() { log("Doubleclick"); TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); TREE_OBJ.select_branch.call(TREE_OBJ, NODE); },
        onrgtclk    : function() { log("Rightclick"); },
        onload      : function() { log("Tree loaded"); },
        onfocus     : function() { log("Tree got focus"); },
        ondrop      : function() { log("Foreign node dropped"); }





6、此外,还提供了详细的使用文档

 

 

 

        jsTree is a javascript based, cross browser tree component. It uses jQuery and Sarissa (optionally). jsTree is absolutely free (licensed same as jQuery - under both GPL and MIT - whichever suits your needs).

Currently supported browsers are: Internet Explorer 6 +, Mozilla Firefox, Safari 3, Opera 9+, Google Chrome. The latter three are not thoroughly tested. jsTree may also work with other browsers - please drop me a note if you performed some tests.

 

Key features

  • Data sources :
    • predefined HTML - convert nested lists into a tree on the fly
    • JSON - provide a json object
    • XML - provide a nested structure or a flat (id -> parent_id) one
  • Async loading - just provide an URL and the tree will request data as needed (works for XML & JSON sources)
  • Open, close, rename, create, delete nodes (all with definable rules)
  • Various callbacks (onchange, oncreate, ondelete, onload, etc …)
  • Drag & drop support (definable with rules)
  • Multiple select
  • Localization - maintain the same tree in as many languages as you like
  • Right-to-left support (supported in both supplied themes)
  • Theme support (change icons, sizes, backgrounds, etc …)
  • Animated open & close (configurable)
  • Optional keyboard navigation
  • multitree support - move/copy nodes form to tree to tree (definable with rules)
  • also works as a jQuery plugin

 

下载地址http://code.google.com/p/jstree/
文档http://jstree.com/reference/_documentation/1_files.html
例子http://jstree.com/reference/_examples/1_datasources.html  

分享到:
评论

相关推荐

    jquery超漂亮树形控件

    在这个场景中,我们关注的是一个基于jQuery的"超漂亮树形控件",这通常用于构建可交互的、层次化的数据展示。树形控件是一种常见的用户界面元素,用于显示具有层级关系的数据,比如文件系统、组织结构或菜单。 标题...

    jsTree树控件(基于jQuery, 超强悍)[推荐]

    jsTree是一个基于jQuery实现的跨浏览器的JavaScript树控件。它被广泛推荐使用,因为它不仅功能强大,而且还是一个开源免费的项目。此控件能够满足多种树形结构数据的展示需求,并且在使用上具备较高的灵活性。 1. ...

    jstree目录树控件

    3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...

    jstree.js Tree控件

    jsTree 是一个 基于 jQuery 的 Tree 控件。支持 XML,JSON,Html 三种数据源。提供创建,重命名,移动,删除,拖 " 放节点操作。可以自己自定义创建,删 除,嵌套,重命名,选择节点的规则。在这些操作上可以添加...

    jQuery的Tree控件 jstree

    **jQuery的Tree控件 jstree详解** 在Web开发中,常常需要展示层次结构的数据,例如文件系统、组织架构或导航菜单,这时就需要用到Tree控件。jQuery的jstree插件是一款强大的、可定制化的树形视图库,它能够轻松地将...

    基于Jquery的JSTree实例

    JSTree是一款强大的基于JavaScript的树型视图库,它能够方便地在网页中构建和操作交互式的树结构。JSTree与jQuery库结合,提供了丰富的API和多种可配置选项,使得开发者能够轻松实现自定义功能,如拖放操作、搜索、...

    jstree树形控件

    **jsTree:强大的jQuery树形控件** **一、jsTree基本介绍** jsTree是一款功能丰富的JavaScript库,专为在Web应用中实现交互式的树形结构而设计。它基于流行的jQuery框架,允许开发者轻松地在网页上创建和管理树形...

    jstree-实用的jQuery目录树插件

    jstree是一款基于jQuery的开源插件,它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款插件支持多种操作,如展开/折叠节点、搜索、拖放等,适用于文件系统、组织结构、导航菜单等多个场景。 **一、安装...

    基于jquery的树形结构JsTree 使用心得

    **基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    jsTree树形菜单

    jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据层级结构的展现。jsTree在Web开发中被...

    js TreeMenu 异步加载树形控件

    JS TreeMenu 的异步加载功能通过 jQuery 实现,大大提高了用户体验,特别是对于拥有大量数据的树形控件。通过监听节点事件,结合 AJAX 请求,我们可以在需要时按需加载数据,减少初次加载时的负担。同时,这样的设计...

    jsTree中文文档

    引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html <link rel="stylesheet" href="jstree/dist/themes/default/style.css" /> ...

    js树控件,大家分享

    1. **jsTree基本使用**:jsTree提供了一套完整的API,包括初始化树控件、加载数据、操作节点等方法。例如,`$("#tree").jstree({})`用于初始化一个树,其中的大括号内是配置项,可以设置数据源、主题、可操作性等。 ...

    基于jsTree的无限级树JSON数据的转换

    在本文中,我们将探讨如何基于jsTree库进行无限级树结构的JSON数据转换。jsTree是一个流行的JavaScript库,用于创建交互式的树视图。它支持多种数据源,包括JSON格式,这使得它可以方便地与后端数据进行交互。 首先...

    jquery jstree

    基于强大的jQuery框架,jsTree提供了一种简单而灵活的方式来创建和管理树结构,适用于各种应用场景,如文件系统、导航菜单或组织结构的展示。 ### 一、主要特性 1. **拖放操作**:jsTree 支持节点的拖放功能,允许...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单而设计。它支持动态加载大量节点,即使面对超过10000个节点的情况,也能保持良好的性能,解决了传统方法在处理大数据量时可能导致的页面卡顿...

    jsTree 左侧导航树大集合

    jsTree是一款基于JavaScript的开源库,专用于创建交互式的树形数据结构,通常被用作网页中的导航菜单或数据组织工具。它支持多种数据源,如JSON、HTML、XML等,并提供了丰富的API和事件系统,使开发者能够自定义行为...

Global site tag (gtag.js) - Google Analytics