`
tk_zhang
  • 浏览: 232083 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery的JSTree（上篇）

jQueryCSSjsonJavaScript数据结构 
阅读更多

   这是一个树形菜单的展示。其功能及其强大，几乎可以提供你对树结构的各种要求。下面，对其简述。

   首先，感谢 Ivan Bozhanov利用JQuery对该组件的开发。同时还要感谢我的技术总监Mr. Lu和网友“漂流瓶”的帮助。
   组件目前更新至 v0.9.8 版本，当然，版本还会继续升级，作者试图将它变得更加强大和完美，Ivan Bozhanov在博客中说：“I just thought it would be nice if I posted all my ideas for the upcoming 0.9.9 and see which ones you like, or do not like.”
    使用JSTree，需要在文件头写类似如下内容的代码，也就是说，它基于JQuery技术，自然需要jquery.js文件支持，同时 还有css.js和tree_component.js这2个文件做支持以及tree_comopnent.css文件的渲染。
<script src="<%=request.getContextPath() %>/js/jquery-0.9.6.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/js/css.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/tree_component.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/tree_component.css" />
  这个树，我们需要给它提供一个容器，如div。
 
  容器内不需要给出内容，<div id="divForTree"></div>即可。内容会在JSTree被Init的时候来渲染。
 PART A.

   来看一个普通的树：
$(function () {
    $.ajaxSetup({cache:false});//这个是为了树的准确性做的一个缓存区清理的工作
   $("#divForTree").tree({//从这里开始初始化JSTree
    data  : {
        type  : "json",//支持如xml等多种类型，这里是获取JSON格式数据源
        url   : src,//每次获得数据从这个链接
        async : true,//动态加载数据
        async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。
                                        return { parent_Id : $(NODE).attr("id") || 0}
                                     }
      },
      lang:{
           loading:"目录加载中……"  //在用户等待数据渲染的时候给出的提示内容，默认为loading
            },
       ui:{//在这个option中设置context来控制JSTree的右键操作，如果在context的visible函数内始终返回false则表示在任何节点的右键都无效。
           context:{visible : function (NODE, TREE_OBJ) {
                    return false;
                }}
           },
   callback : {//响应函数，如节点被选中的onselect，还有onopen,onload,beforeopen等很多可定义内容。
        onselect: function(node) {
            //自定义操作
          
        }
    }
 
});
});
  再看一下JSON的数据吧，可以在后台JAVA程序段获得一个根据实际情况如当前打开节点的ID作为parent_id获取它的子节点List。然后在一个JSP中迭代这个List（这里的迭代利用了Struts2的标签）：
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
[
<s:iterator  value="noteslist"  >
{
    attributes: { id : ${id} },
    data: "${name}" ,state: "closed"
}
,
</s:iterator>
]
  PART B.

   现在看一个带有右键操作的树形菜单
$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#browser").tree({
    data  : {
        type  : "json",
        url   : src,
        async : true,
        async_data : function (NODE) {
                                        return { parent_Id : $(NODE).attr("id") || 0}
                                     }
      },
      lang:{
           loading:"目录加载中……"
            },
      rules:
      {
      draggable   : "all"   //这个设置可以使得节点进行拖动操作
      },
      ui:{
           context     : [ //自定义右键操作的可操作内容
            {
                id      : "create",
                label   : "添加下级目录", //右键弹出菜单的此项操作屏显字样
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
                icon    : "<%=request.getContextPath() %>/css/themes/default/create.png",//右键弹出菜单的此项操作图标
                action  : function (NODE, TREE_OBJ) {
                                                //进行此项操作，将有这个函数事件被响应
                                                     }
            },
            "separator"//这个是在两个操作之间画一条分隔线
           ,
            {
                id      : "edit",
                label   : "编辑目录信息",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/image/reg2.gif",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator"
            ,
            {
                id      : "privilege",
                label   : "设置目录权限",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/rename.png",
                action  : function (NODE, TREE_OBJ) {
                                                    openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
                                                    }
            },
            "separator",
            {
                id      : "delete",
                label   : "删除",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/themes/default/remove.png",
                action  : function (NODE, TREE_OBJ) {
                                                    var tree=$.tree_reference("browser");
                                                    openWindow('myurl','','',function(){
                                               //下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
                                                    NODE=$(tree.parent(NODE));
                                                    if($(NODE).attr("id")==undefined){
                                                        tree.refresh();
                                                    }else{
                                                        TreeRefresh();
                                                    }
                                                    });
                                                    }
            },
            "separator",
            {
                id      : "others",
                label   : "其他操作",
                visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
                icon    : "<%=request.getContextPath() %>/css/images/cut.png",
                action  : function (NODE, TREE_OBJ) {
                                                    alert("暂无可提供操作。");
                                                    }
            }
            ]
      },
   callback : {
         onselect: function(node) {
            //(a);
           
        }
    }
 
});
function treeRefresh(nodeid){
                     var rid=nodeid;
                    var tree=$.tree_reference("browser");
                    var par_node=tree.parent($("#"+rid));
                    tree.refresh(par_node);
}
});
 
分享到：
| JUnit Assert方法总结
评论
10 楼 ihibernate 2010-06-21  
callback : {
beforedata : function(node,tree_obj){
alert($(node).attr("id") + "  " + $(node).attr("type"));
return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数
}
}
ihibernate 写道
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。  
                                        return { parent_Id : $(NODE).attr("id") || 0}  
                                     }  
这样写没用吧，应该在callback的beforedata里写才对吧


如果要是传多个参数，这里beforedata该怎么写？ 

callback : {			 
	beforedata : function(node,tree_obj){
	alert($(node).attr("id") + "  " + $(node).attr("type"));
return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数 
	}
}


请问这里的return 里能这样些么？
在IE6下我的参树只能传那个ID值，type却不能传？
什么原因



9 楼 ihibernate 2010-06-21  
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。  
                                        return { parent_Id : $(NODE).attr("id") || 0}  
                                     }  
这样写没用吧，应该在callback的beforedata里写才对吧


如果要是传多个参数，这里beforedata该怎么写？ 

callback : {			 
	beforedata : function(node,tree_obj){
	alert($(node).attr("id") + "  " + $(node).attr("type"));
							return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传哪些参数 
	}
}


请问这里的return 里能这样些么？
在IE6下我的参树只能传那个ID值，type却不能传？
什么原因


8 楼 ihibernate 2010-06-21  
flysheet 写道
async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。  
                                        return { parent_Id : $(NODE).attr("id") || 0}  
                                     }  
这样写没用吧，应该在callback的beforedata里写才对吧



如果要是传多个参数，这里beforedata该怎么写？ 
						beforedata : function(node,tree_obj){
							alert($(node).attr("id") + "  " + $(node).attr("type"));
							return {type : $(node).attr("type"),id : $(node).attr("id") || 0 }; //设置get方式传的参数 
						}
请问这里的return 里能这样些么？
在IE6下我的参树只能传那个ID值，type却不能传？
什么原因？
7 楼 flysheet 2010-05-10  
async_data : function (NODE) {//请求数据时带的参数列表，可通过getParameter获得。  
                                        return { parent_Id : $(NODE).attr("id") || 0}  
                                     }  
这样写没用吧，应该在callback的beforedata里写才对吧
6 楼 Kupid 2009-11-04  
tk_zhang 写道
Kupid 写道
大哥啊。。。您从我的新浪博客转载，好歹也注明一下吧。。。

=。=

呵呵，我也忘了在那里转载的，当时看到时候感觉文章写得不错，就转了，不好意思哈！

啊……感觉写得不错吗？那当然了~~~俺的文采。。。
5 楼 tk_zhang 2009-10-23  
wang363714266 写道
我想点击树上的某个节点，然后跳转到我想要去的页面，就是Onclick事件，但是我在提供的API里面没有发现这个函数，怎么办？

那个在Jstree中是onselect，你可以在那里面定义你的跳转操作的！
4 楼 wang363714266 2009-10-23  
我想点击树上的某个节点，然后跳转到我想要去的页面，就是Onclick事件，但是我在提供的API里面没有发现这个函数，怎么办？
3 楼 tk_zhang 2009-09-25  
Kupid 写道
大哥啊。。。您从我的新浪博客转载，好歹也注明一下吧。。。

=。=

呵呵，我也忘了在那里转载的，当时看到时候感觉文章写得不错，就转了，不好意思哈！
2 楼 Kupid 2009-09-25  
大哥啊。。。您从我的新浪博客转载，好歹也注明一下吧。。。

=。=
1 楼 xoquoxxotil 2009-09-16  
我要是把css文件和js文件分开放网页就不出效果，怎么回事？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于Jquery的JSTree实例

    本篇将详细介绍如何在实际项目中应用JSTree，以及一些关键知识点。 首先，我们需要理解JSTree的基本结构。JSTree的数据源通常是一个JSON对象，其中包含节点信息，如ID、文本、父节点ID等。例如： ```json [ { ...

    关于jquery的JsTree

    本篇文章将深入探讨jsTree的核心特性、用法以及如何将其整合到你的项目中。 1. **jsTree的基本概念** jsTree通过HTML元素和JavaScript数据结构来呈现树状结构。每个节点都可以包含子节点，并具有可扩展性，支持...

    JsTree静态例子

    本篇文章将深入探讨如何使用JsTree创建一个静态的例子。 首先，我们需要从JsTree的官方网站下载最新版本的库文件。这通常包括`jstree.js`（核心脚本）、`jstree.css`（样式表）以及可能的插件和主题文件。确保将...

    jstree ajax application

    根据提供的文件信息，我们可以推断出这是一篇关于 jstree 的 AJAX 应用程序的文章。jstree 是一个 jQuery 插件，用于创建树形结构的导航菜单或图谱。通过结合 AJAX 技术，可以实现动态加载数据，提高用户体验。 ###...

    jstree 1.0 详细介绍

    &lt;script type="text/javascript" src="../../../resources/libs/jstree/1.0-rc3/jquery.jstree.js"&gt; ``` 3. **Cookies 扩展库**: 用于处理与 Cookies 相关的功能。 ```html ...

    jquery tree

    在本篇文章中，我们将深入探讨 jQuery Tree 的核心特性、使用方法以及与其他相关技术如 AJAX 和 jstree 的关联。 ### 1. jQuery Tree 功能特性 - **右键操作**：jQuery Tree 支持右键菜单，用户可以通过右键点击...

    jquery.jstree 增加节点的双击事件代码

    jQuery的插件jstree提供了一个功能强大的树形控件，它基于jQuery构建，具有丰富的交互功能，例如节点的拖放、复制、删除、快捷键支持、节点的多选功能、自定义节点图标、自定义右键菜单选项以及跨页面保存状态等。...

    jquery.Ztree.js + css

    本篇文章将详细介绍如何利用jQuery ZTree来实现这一目标。 **1. jQuery ZTree的核心特性** - **动态加载**：ZTree支持异步加载数据，可以在用户展开节点时按需加载子节点，有效减少初次加载时的数据量，提高页面...

    使用jquery建立tree

    例如，`jstree`是一个广泛使用的jQuery插件，它可以提供更多的配置选项和交互特性，对于复杂tree的构建非常有帮助。不过，理解基础原理并能够自己动手实现，将有助于更好地理解和应用这些高级工具。

    jquerytree.zip

    在本篇文章中，我们将深入探讨jQuery Tree的实现原理，以及如何将其迁移到现代前端框架Vue.js中。 一、jQuery Tree基础 1. 技术栈：jQuery Tree的核心依赖于jQuery和Bootstrap，jQuery提供了丰富的DOM操作和事件...

    jQuery树形插件jquery.simpleTree.js用法分析

    通过本篇内容的介绍，希望对大家在使用jQuery进行程序设计时有所帮助，特别是在树形菜单的实现与应用上。如果你对其他jQuery相关的内容也感兴趣，可以查阅本站提供的相关专题，进一步扩展你的知识库。

    jquery下jstree简单应用 – v1.0

    第一篇文章，具体使用也过去很长时间了，直接贴码： 1.代码中使用json数据格式（直接在页面中组装成的，并非后台组装，具体方法：function _callBack(d)） 2.提供右键菜单及功能实现 3.具有checkbox，提供获取选中...

    广告项目：（4） jquery树

    总的来说，这个项目提供了使用jQuery和jstree创建树形结构的实践指导，对想要提升前端开发技能，特别是处理层级数据展示的开发者来说，是一份宝贵的资源。通过阅读博客文章，理解源码，以及查阅jstree的文档，学习者...

    jquery树

    **jQuery树插件详解** ...3. **初始化jstree**：在HTML元素上应用`jstree`方法，传递配置项。 4. **事件监听**：注册jstree提供的事件，如`select_node`、`open_node`等。 示例代码如下： ```html ...

    jQuery三级树状菜单代码.zip

    4. **树状菜单插件（jquery.treemenu.js）**：此文件是树状菜单的核心，它扩展了jQuery的功能，实现了树状菜单的动态加载、展开/折叠、点击事件处理等功能。 三、jQuery树状菜单的实现原理 1. **DOM操作**：通过...

    easyui tree扁平化扩展，不用再为children嵌套结构烦恼

    EasyUI Tree插件是基于jQuery的一个轻量级插件，它提供了一种简单的方式创建树形控件。然而，在实际应用中，我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...

    jquery.treeview.zip

    在本篇文章中，我们将深入探讨jQuery Treeview的原理、使用方法及其实战应用。 一、jQuery Treeview基本概念 jQuery Treeview是基于jQuery框架的一个插件，由Peter Hausser开发。它的主要功能是将无序列表（`&lt;ul&gt;`...

    jquery-easyui

    在本篇文章中，我们将深入探讨 jQuery EasyUI 的核心概念、主要功能以及使用方法。 ### 1. 核心概念 - **jQuery**: jQuery 是一个轻量级的 JavaScript 库，简化了 DOM 操作、事件处理和动画制作。EasyUI 基于 ...

Magicbox
Global site tag (gtag.js) - Google Analytics