JSTREE简介:
JSTREE是一款基于JQUERY的树形插件,其功能相当强大,尤其是其右键菜单,很轻松地就能实现节点的增加节点、重命名节电、删除节点、复制节点、剪切节点等操作。
使用JSTREE:
1.首先,要去JSTREE下载插件包: http://www.jstree.com/ 最新版本。
插件包包含四个文件夹,一个JSTREE主文件JS
_demo 相关案例,存放了用JSTREE做的几个例子
_docs JSTREE说明文档,里面有相关使用说明及API
_lib JSTREE插件JS库
Themes JSTREE主题包
jquery.jstree.js JSTREE主JS库
我们要用到的是 _lib、Themes、jquery.jstree.js 把这三个文件夹拷到我们工程的JS目录下(只是示例,拷贝到随意地方,只要引用正确即可)
2.接下来就可以使用JSTREE了
<!-- JQUERY 主要JS库-->
<script type="text/javascript" src="js/_lib/jquery.js"></script>
<!-- JSTREE 主要JS库-->
<script type="text/javascript" src="js/_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="js/_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="js/_jquery.jstree.js"></script>
插件选择:
"plugins" : [ "themes", "json_data","ui", "crrm", "cookies", "dnd","search", "types", "hotkeys","contextmenu" ]
每个元素代表一类插件,比如说要显示右键菜单,那么把“contextmenu”加入插件集合即可,反之删除此项,右键菜单将不再显示。
数据来源:JSTREE提供了三种数据
1、HTML:预定的HTML列表格式
2、JSON:JOSN格式文件或字符串
3、XML:来源于XML文件
这里我们使用JSON作为数据承载方式,JSON格式如下:
//此段JSON { data:[{ attr:{id:"1"}, data:"省市列表", children:[ { attr:{id:"01"}, data:"广东省珠海市" , children:[ { attr:{id:"001"}, data:"香洲区", children:[ {attr:{id:"0001"},data:"夏美" }, {attr:{id:"0002"},data:"光明街"} ] }] }, { attr:{id:"02"}, data:"广东省东莞市" }] }] }
绑定事件:
JSTREE提供右键操作的事件绑定,创建节点(create.jstree) ,移除节点(remove.jstree),重命名节点(rename.jstree),拖拽剪切粘贴(move_node.jstree)
//右键创建事件 .bind("create.jstree", function (e, data) { //数据以POST方式发送 $.post("ajaxTree.action", { //需要传递的参数 "ac" : "create_node", "parentid" : data.rslt.parent.attr("id").replace("node_",""), "nodename" : data.rslt.name }, function(r) { //操作结果回调 if(r.message=="success") { $(data.rslt.obj).attr("id", "node_" + r.id); } //失败 else { $.jstree.rollback(data.rlbk); } } ); }) //连续绑定多个事件 .bind("remove.jstree", function (e, data) { }) .bind("rename.jstree", function (e, data) { } ……
相关推荐
2. 插件选择:有许多jQuery树插件可供选择,如jqTree、jstree、treeview等。它们都有不同的特性和配置选项,选择时应考虑项目需求和性能。 3. 渲染树形结构:利用插件提供的API,将JSON数据转换为树形结构,并渲染到...
`jQuery.simple.tree.js` 是`jQuery SimpleTree`的核心代码文件,通过阅读源码,你可以了解到插件是如何解析JSON数据,渲染树结构,以及处理异步加载和复选框事件的。在`iteye`博客上发布的链接...
**基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...
**jstree:jQuery的强力目录树插件** 在网页开发中,为了更好地展示层级结构的数据,目录树组件是不可或缺的工具。jstree是一款基于jQuery的开源插件,它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款...
1. 引入jQuery库和GridTree插件的JS与CSS文件。 2. 初始化表格树,设置必要的配置项,如数据源URL、懒加载参数等。 3. 调用插件提供的方法,如`gridtree.init()`启动表格树,`gridtree.expandNode(nodeId)`展开指定...
**jsTree:基于jQuery的超强大树形控件** jsTree是一款高度可定制的JavaScript库,专注于构建交互式的树形结构。它完全基于jQuery,因此能够无缝地融入任何已使用jQuery的项目中,同时支持所有主流浏览器,包括...
jsTree是一款基于jQuery的开源树形插件,它提供了丰富的功能和自定义选项,可以轻松实现网页中的可交互、动态展示的树结构。jsTree支持HTML、JSON等多种数据源,并且提供了搜索、拖放、上下文菜单、多选、异步加载等...
JSTree是一款强大的基于JavaScript的树型视图库,它能够方便地在网页中构建和操作交互式的树结构。JSTree与jQuery库结合,提供了丰富的API和多种可配置选项,使得开发者能够轻松实现自定义功能,如拖放操作、搜索、...
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jstree是一款基于jQuery的开源目录树插件,它以其强大的功能和灵活性在Web开发领域备受青睐。该插件允许开发者轻松地在网页上创建交互式的、可自定义的树状视图,适用于展现层级结构的数据,如文件系统、组织结构或...
在Web开发中,jQueryzTree和JSTree是两个广泛使用的JavaScript库,它们主要用于构建交互式的树形结构,如导航菜单、组织架构图等。这两个库都提供了丰富的功能和高度的自定义性,其中,对数组的操作是实现这些功能的...
jQuery的jstree插件是一款强大的、可定制化的树形视图库,它能够轻松地将HTML元素转换为交互式的树结构。本文将深入探讨jstree的核心特性、配置选项、API使用以及实际应用案例。 1. **核心特性** - **多用途**:js...
引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html <link rel="stylesheet" href="jstree/dist/themes/default/style.css" /> ...
总的来说,`jQuery jsTree` 是一个强大且易用的树形视图插件,适用于需要展示和操作树状数据的项目。它的灵活性和丰富的功能使其成为开发者的首选工具之一。通过熟练掌握jsTree的使用,可以提升项目的用户体验,实现...
- 使用jQuery选择下拉菜单元素,并调用`.jstree()`方法初始化树形结构。 - 配置jsTree选项,例如设置主题、启用多选或单选、定义异步加载等。 ### 3. 自定义配置和扩展 jsTreeSelect允许通过配置对象进行高度定制...
jQuery Tree插件有很多实现,例如`jstree`,这是一个非常流行的选择,它提供了丰富的功能和良好的社区支持。但也有其他类似插件,如`jQuery UI Treeview`、`EasyTree`等,开发者可以根据项目需求和自身喜好进行选择...
3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...