AdubyTree5.0介绍

shimingxy

浏览: 13363 次
性别:
来自: 上海

最近访客更多访客>>

sunanwenjun

zhanggx512

a972182797

wj85956271

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

adubytree

jQuery json Apache JavaScript OpenSource

jQuery AdubyTree Plugin

version: 5.0 (2011-05-20)
Copyright (c) 2011, Crystal, shimingxy@163.com
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Date: 2011-05-20 rev 13

AdubyTree Plugin based jquery,Simple and util Utility 、OpenSource and FREE.

support XML and JSON
support local data and remote AJAX data.
support checkbox that you need.,checkbox can before or after the leaf node.
support three style,simple、strengthen、extend
have Basic、Sample、Books、Org、OrgUser、Vista six themes，you can custom themes youself
have Context Menu with user function define,you can move node user Context Menu

Homepage&Blog:
http://blog.163.com/shimingxy/
any questions ,you can visite
download source:
http://code.google.com/p/jquery-adubytree/

AdubyTree Plugin基于JQuery框架，实用，调用简单，基于开源协议，免费使用。

支持XML和JSON两种数据格式
支持本地数据和动态AJAX远程数据。
支持checkbox复选框，方便实际应用,checkbox叶节点的前面或者后面。
支持三种样式，简单样式、增强样式和扩展样式
自带Basic、Sample、Books、Org、OrgUser、Vista六套主题，用户可以扩展定制主题。
支持右键菜单，可自定义事件，可通过右键菜单移动节点

项目博客：http://blog.163.com/shimingxy/

源代码的下载:

http://code.google.com/p/jquery-adubytree

Screenshot

How to use

在网页的头加入js和css,在body中加入adubytree的定义标签<div id="adubytree" ></div>

 <html>  
        <head> 
         <script src="jquery.js" type="text/javascript"></script> 
               <script src="jquery.easing.1.3.js" type="text/javascript"></script> 
            <script src="jquery.adubytree.js" type="text/javascript"></script> 
             <link rel="StyleSheet" href="themes/basic/adubytree.css" type="text/css" /> 
    </head> 
        <body> 
         <div id="adubytree" ></div> 
    </body> 
</html>

Aduby code

 $("#adubytree").AdubyTree({  
     url:"",//if you want get data from server,set url,else load data from data param
        id:"-1",//if url param is set,send the root id to server
        type: "GET",//if url param is set,the POST method ,GET or POST,default is GET
        dataType:"json",//datatype json、xml，default is json
        checkboxes:true,//is use checkbox,true is user,false is not,default is false
        themes  : "themes/vista/images/",//default is "themes/basic/images/"
        data:"dataEg",//if url param is set ,not need set data
        treeType:"simple",//simple、strengthen、extend,default is extend
        checkboxPos:"before",//checkbox position before or after,default is before
        cookie: true,//Is use cookie,true or false
        themes:"Basic",//Basic,Sample,Books,Org,OrgUser,Vista six themes
        onSelected:function(node){      
                //selected node add you code,node is return Node type
        },
        onClick:function(node){ 
                //onClick node add you code,node is return Node type
        },
        onDblClick:function(node){      
                //onDblClick node add you code,node is return Node type
        }
        onCBXClick:function(node){      
                //onCBXClick node add you code,node is return Node type
        },
        onCBXDblClick:function(node){   
                //onCBXDblClick node add you code,node is return Node type
        },
        onMouseOver:function(node){     
                //onMouseOver node add you code,node is return Node type
        },
        onMouseOut:function(node){      
                //onMouseOut node add you code,node is return Node type
        },
        onOpen:function(node){  
                //onOpen node add you code,node is return Node type
        },
        onAddNewNode:function(node){    
                //onAddNewNode add you code,click contextMenu add
        },
        onEditNode:function(node){      
                //onEditNode node add you code,click contextMenu Edit
        },
        onMoveNode:function(node){      
                //onMoveNode node add you code,click contextMenu Move
        },
        onMoveToNextNode:function(node){        
                //onMoveToNextNode node add you code,click contextMenu MoveToNext 
      },
        onMoveToChildNode:function(node){       
                //onMoveToChildNode node add you code,click contextMenu MoveToChild 
    },
        onDeleteNode:function(node){    
                //onDeleteNode node add you code,click contextMenu delete 
      }
        });

Opration function

 open all tree items
 $("#adubytree").openAll();
  
close all tree  items
 $("#adubytree").closeAll();
 
get the  node you give the nodeid
 $("#adubytree").getNode(nodeid)
 
get the current selected node id
 $("#adubytree").getSelected()
 
add node to adubtytree pid is nodeid
 node ={ 
        id : "node-3-1-1-2" , 
        data: "node3.1.1.2",
 };
 node.id=node.id+"-"+x;
 node.data=node.data+"-"+x;
 $("#adubytree").addNode(node,nodeid);
 
modify node when id eq nodeid,value is in node
 $("#adubytree").modify(nodeid,node)
 
remove the Node id eq nodeid   
 $("#adubytree").removeNode(nodeid);
 
get all checkbox checked item ids
 $("#adubytree").getChecked()
 
refresh the adubytree 
 $("#adubytree").refresh();

dataEg JSON

 var jsondata ={id : "node-0" , data: "C:",
                children: [
                        { id : "node-1" ,data: "node1",
                                children: [
                                        { id : "node-1-1" ,data: "node1.1",
                                                children: [
                                                { id : "node-1-1-1" ,data: "node1.1.1"},
                                                { id : "node-1-1-2" ,data: "node1.1.2"}
                                                ]},
                                        {id : "node-1-2" , data: "node1.2"},
                                        {id : "node-1-3" ,data: "node1.3"}
                                ] 
                        },
                        {id : "node-2" ,data: "node2"},
                        {id : "node-3", data: "node3",
                                children: [
                                        { id : "node-3-1" ,data: "node3.1",
                                        children: [
                                                {id : "node-3-1-1" , data: "node3.1.1",
                                                        children: [
                                                                { id : "node-3-1-1-1" , data: "node3.1.1-1"},
                                                                { id : "node-3-1-1-2" , data: "node3.1.1-2"}
                                                        ] 
                                                }
                                        ] 
                                        }
                                ] 
                        }
                ] 
        };

XML

 var xmldata ='<?xml version="1.0"?><root>';
        xmldata +="<id>node-1</id><data>c:</data><children>";
        xmldata +=              "<node><id>node-1-1</id><data>node-1-1</data></node>";
        xmldata +=              "<node><id>node-1-2</id><data>node-1-2</data></node>";
        xmldata +=              "<node><id>node-1-3</id><data>node-1-3</data><children>";
        xmldata +=                      "<node><id>node-3-1</id><data>node-3-1</data><children>";
        xmldata +=                              "<node><id>node-3-1-1</id><data>node-3-1-1</data></node>";
        xmldata +=                              "<node><id>node-3-1-2</id><data>node-3-1-2</data></node>";
        xmldata +=                      "</children></node>";
        xmldata +=              "<node><id>node-3-2</id><data>node-3-2</data></node>";
        xmldata +=      "</children></node>";
        xmldata +="</children></root>";

adubytreeWeb

 is eclipse Project ,you can import to eclipse workspace
  
is include src,WebRoot 
lib
 
       commons-logging-1.1.1.jar
 
               Apache Commons Logging
 
               Copyright 2003-2007 The Apache Software Foundation
 
               This product includes software developed by
 
               The Apache Software Foundation (http://www.apache.org/). 
       flexjson-2.0.jar
 
               Apache License Version 2.0, January 2004
 
                http://www.apache.org/licenses/ 
               http://flexjson.sourceforge.net/

adubytreeWeb.war

deploy to tomcat ,or copy to $TOMCAT_HOME$/webapps

visit url http://website:port/adubytreeWeb/demo.html

http://website:port/adubytreeWeb/themesdemo.html

http://website:port/adubytreeWeb/styledemo.html

http://website:port/adubytreeWeb/ajaxdemo.html

分享到：

JqWeb-framework 3.0 | Json2Form

2011-05-19 16:42
浏览 1086
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论