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) { } ……
相关推荐
jstree是一款非常实用的jQuery目录树插件。jsTree树插件易于扩展,可以配置主题,支持HTML和JSON格式的数据,还支持异步回调数据,支持多级树结构等。
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jQuery树插件演示族谱Family tree和日程安排
demo以及源码 博文链接:https://lanrenjun.iteye.com/blog/824985
jstree是一款非常实用的jQuery目录树插件。jsTree树插件易于扩展,可以配置主题,支持HTML和JSON格式的数据,还支持异步回调数据,支持多级树结构等。
jquery.tree.js树形导航菜单插件
jsTree 是基于jquery的树插件,支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保存状态等等
支持懒加载,解决了大数据量显示效率的问题; 提供表格树回调接口,方便实现自己的业务; 优化以前表格树代码,并且公开源码。
这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可展开和折叠的树。 Treeview – Expandable and Collapsible Tree jQuery Plugin jQuery Treeview是一个轻巧和灵活的jQuery插件。它将一个无序...
是jquery插件,提供交互式树。 它是完全免费的,并根据MIT许可进行分发。 jsTree易于扩展,可定义和配置,它支持HTML和JSON数据源,AJAX和异步回调加载。 jsTree可以在盒子模型(内容框或边框)中正常运行,可以...
jquery树型结构插件jstree-3.3.4版本,多层树结构,动态加载等所需要的插件
jquery树型结构插件jstree-3.3.4版本,多层树结构,动态加载插件
有关插件jstree的共享,一般的详细jstree更加强大。
JSTree 大型树形菜单控件(基于jQuery),应用当然就非常广泛了,有采用XML的,有使用动态的. 本文档包含有近50种实例,是jsTree快速上手的最佳参考文档。
jsTree是基于javascript的一个跨浏览器树控件,功能强大,既可以一次性把所有节点都加载到客户端,也可以只加载一层,点击节点后再去服务端获取下层节点。
主要介绍了jQuery树形插件jquery.simpleTree.js用法,结合实例形式分析了jQuery树形菜单插件jquery.simpleTree.js的功能与基本用法,需要的朋友可以参考下
插件描述:jsTree是基于javascript的一个跨浏览器树控件,功能强大.
非常好用的jquery树插件,带API文档,示例。
MagicDTree 是JQuery树型插件 Dynatree 的封装,使之更易使用,并提供了一些扩展。 JQuery著名树形插件Dynatree的包装类,增加右键菜单,添加、删除、更新接口。