KvaTree-Jquery-plugin研究使用

[b][/b]KvaTree 的官方站点：http://www.kvaq.sk/en/kvatree-jquery-plugin.html

Version:
Jquery.js – jQuery library v1.2.6 (full, not packed)
Jquery-ui-personalized-1.5.3.min.js – jQuery UI v1.5.3 (ui.core,ui.draggable,ui.droppable)
kvaTree.js – kvaTree js file (full, not packed)
kvaTree.min.js – kvaTree js file packed

[size=medium]kvaTree核心库kvaTree.min.js的功能及事件：[/size]

kvaTree — 设置Tree

可以设置Tree：是否默认打开、背景色、图片路径、是否运行事件
设置方式如下：

kt.options = {
                autoclose: true,
                background: 'white',
                imgFolder: 'img/',
                overrideEvents: false,
                multi: true,
                dragdrop: true,
                onClick: false,
                onDblClick: false,
                onExpand: false,
                onCollapse: false,
                onAddNode: false,
                onEditNode: false,
                onDeleteNode: false,
                onDrag: false,
                onDrop: false
            };

[b]InitKvaTree — 初始化生成Tree[/b]
数据构建Tree

[b]InitDragDrop — 拖拽事件[/b]
拖拽节点或者叶节点将其加入其他节点下，这里我做了改动，将拖拽后的节点记录新的上级节点的ID
加入代码：

//change parentId
 var li    = $(this).parents('li:first');
 var lin   = $(this).parents('li.node:first');

li.removeAttr('parentId');
li.attr('parentId',lin.attr('id'));

[b]CancelDragDrop — 清除拖拽事件[/b]
清理

[b]AddNode — 添加节点或者叶节点[/b]
这里做了改动，新添加的新节点或叶节点，会记录上级节点的ID，并且为自身随机生成一个ID
可以在加入名称时直接加入对应的URL
格式为：[name],[URL]
例：Downloads,down.action

改动代码如下：

// arented 
var  arented = lin.attr(‘id’);
//random id
var id = Math.random()*101-1;
var nli=’<li’+cn+’ id=’+id+’  arented=’+ arented+’><span id=”tree” class=”text”> </span><input type=”text” value=”New item” /></li>’;

[b]EditNode — 编辑节点或者叶节点[/b]
通过编辑可以修改节点或叶节点的名称，及URL

[b]DeleteNode — 删除节点[/b]
删除节点或者叶节点，删除节点时子节点及叶节点都会被删除。

[b]SaveInput — 保存AddNode和EditNode操作结果[/b]
保存添加或者编辑的操作结果，由于加入了id、parentId、URL属性，所以保存时此方法要做修改，修改代码如下：

var li=$(input).parents(‘li:first’);
//remove url
li.removeAttr(‘url’);
//add url
li.attr(‘url’,val.split(‘,’)[1]);
//add text
input.replaceWith(‘<span id=”tree” class=”active text”>’+val.split(‘,’)[0]+’</span>’);

[b]IeSetStyles — 初始化页面时判断节点是否默认展开[/b]
如果想在初始化页面时，节点默认展开，设置方法<li class=”open”>

[b]Clean — 节点间的虚线背景[/b]
节点展开或者收缩重新设置虚线效果

[b]AddSigns —节点展开或收起时添加标记[/b]
初始化Tree时为默认展开的节点和默认关闭的节点添加标记

[b]BindEvents — 处理点击Tree时的效果处理[/b]
节点的展开和收缩，此处还扩展了双击节点打开相应的URL功能
添加功能代码：

//redirect URL
var li = clicked.parents('li:first');
var url = li.attr('url');
//LOAD URL 
//$("#url").load(url);
$("#url").load('test.html');

[b]ToggleNode — 收起或者展开节点[/b]
根据节点的Class属性是否为’open’ 调用ExpandNode或CollapseNode事件

[b]ExpandNode — 展开节点[/b]
CollapseNode — 收起节点

数据传输
这里使用JSON作为前台页面和后台Struts2的数据传输格方式。
前台用Jquery的$.ajax方法获取JSON数据，使用递归算法遍历出所有的节点及叶节点输出到页面，kvaTree.min.js库负责生成树型菜单并承担对Tree的相关操作。
编辑后的Tree通过JavaScript读取封装成JSON格式，并用$.ajax方法提交到后台。

[size=large]DEMO说明[/size]
服务器如何构造Tree的数据
Tree的POJO类：
[color=red]SimpleTreeNode.java[/color]

public class SimpleTreeNode {
        private Object id;
        private String text;
        private Object parentId;
        private String url;
        //省略Get Set method
        /**
         * 仅用于需要异步读取数据的文件夹节点。当节点有子节点时，该属性不起作用。节点永远为文件夹节点 
         */
        private boolean isfolder=false; 
        private HashMap<String, Object> attrs=new HashMap<String,Object>();

        public SimpleTreeNode(Object id, String text,Object parentId){
                this.id=id;
                this.text=text;
                this.parentId=parentId;
        }

        public SimpleTreeNode(Object id, String text, Object parentId,boolean isFolder){
                this.id=id;
                this.text=text;
                this.parentId=parentId;
                this.isfolder=isFolder;
        }

        public SimpleTreeNode(Object id, String text, Object parentId,boolean isFolder,String url){
                this.id=id;
                this.text=text;
                this.parentId=parentId;
                this.isfolder=isFolder;
                this.url = url;
        }

        public SimpleTreeNode(Object id, String text, Object parentId,boolean isFolder,HashMap<String,Object> attrs){
                this.id=id;
                this.text=text;
                this.parentId=parentId;
                this.isfolder=isFolder;
                this.attrs=attrs;
        }

        public void addAttribute(String key,Object value){

                this.attrs.put(key, value);
        }

}

[b]Action类：[/b]
Action中的demoTest()方法用于构建Tree数据
[color=red]TreeAction.java[/color]

public class TreeAction extends ActionSupport {

        private List<SimpleTreeNode> nodes=new ArrayList();
        private SimpleTreeNode simpletree;
                //省略Get Set method
        //create Tree data
        public String demoTest(){

                nodes.add(new SimpleTreeNode(1,"Item 1 here ",0,true,"www.joyplus.com.cn"));
                nodes.add(new SimpleTreeNode(2,"Item 2 here ",0,true,"www.google.com"));
                nodes.add(new SimpleTreeNode(3,"Item 3 here ",1,true,"dev.joyplus.com.cn"));
                nodes.add(new SimpleTreeNode(4,"Item 4 here ",1,true,"mail.joyplus.com.cn"));
                nodes.add(new SimpleTreeNode(5,"Item 5 here ",2,true,"tools.google.com"));
                nodes.add(new SimpleTreeNode(6,"Item 6 here ",2,true,"dev.google.com"));
                nodes.add(new SimpleTreeNode(7,"Item 7 here ",5,true,"map.google.com"));
                nodes.add(new SimpleTreeNode(8,"Item 8 here ",6,true,"gson.google.com"));
                //from DAO rocessing
                //.........
                //.........
                return SUCCESS;
        }

        //save Tree's update
        public String saveTree(){
                ActionContext ctx = ActionContext.getContext();
                String json = ctx.getParameters().keySet().toString().substring(1, ctx.getParameters().keySet().toString().length()-1);
                System.out.println(json);
                //JSONObject js = JSONObject.fromObject(json);
                try {
                        Object obj = JSONUtil.deserialize(json);
                        List list = (List) ((Map)obj).get("nodes");

                        for(int i = 0; i<list.size();i++){
                                Map map = (Map)list.get(i);
                                System.out.print(map.get("id")+"      ");
                                System.out.print(map.get("text")+"      ");
                                System.out.print(map.get("parentId")+"      ");
                                System.out.print(map.get("isfolder")+"      ");
                                System.out.print(map.get("url")+"      ");
                                System.out.println("");

                                //nodes.add(new SimpleTreeNode(map.get("id"),(String)map.get("text"),map.get("parentId"),(Boolean)map.get("isfolder"),(String)map.get("url")));

                                //add DAO Processing
                                //...........
                                //...........
                        }

                } catch (JSONException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                }
                return SUCCESS;
        }



}

[b]Struts xml的配置[/b]
Struts-tree.xml

<struts>
        <package name="tree" extends="json-default">
        <action name="tree" class="org.kvatree.action.TreeAction" >
            <result  type="json" />
        </action>
        </package>
</struts>

[b]页面获取JSON数据生成Tree[/b]
Jquery获取JSON数据，并生成Tree

$(document).ready(function(){
        //获取JSON数据
         $.ajax({
                    type: "POST",
                    url: "tree!demoTest.action",
                    dataType: "json",
                   // data:{id:"ab"},
                    success: function(data){
                      treeDate(data,0,0,"","");
                    },
                    error:function() {alert('数据传送失败');}
                });

         $("#divtree").ajaxComplete(function(event,request, settings){
              var obj  = $('ul#tree1');
            var opts = {
                multi: false
            };
            obj.kvaTree(opts);
            Bind('.ctrls:eq(0)',obj);
     });

});

//递归生成Tree数据
function treeDate(data,defid,flag,li,ul,pid){
        var ulflag = 0;
        var dataLength = data.nodes.length;

        if(defid==0){
        for(var i=0;i < dataLength;i++){
                 ul = document.createElement("ul");
                if(data.nodes[i].parentId==defid){
                defid = data.nodes[i].id;

          li = document.createElement('li');
          li.id=data.nodes[i].id;
          li.parentId=data.nodes[i].parentId;
          li.url=data.nodes[i].url;


         li.innerHTML = "<span id='tree'>"+data.nodes[i].text+"</span>";

        $("#divtree").append(li);

        treeDate(data,defid,flag+1,li,"",pid);
        if(flag==0){
                defid=0;
        }
        }
        }
       }else{
                       for(var k=0;k < dataLength;k++){
                               if(ul==""){

                                 ul = document.createElement("ul");
                               }
                               if (data.nodes[k].parentId == defid) {

                               if(typeof(pid)!="undefined"&&ulflag==0){
                                       ul = document.createElement("ul");
                                       ulflag = 1;
                               }
                               if(typeof(pid)=="undefined"){
                                       ulflag = 0;
                               }
                 li1 = document.createElement('li');
                 li1.id=data.nodes[k].id;
                           li1.parentId=data.nodes[k].parentId;
                           li1.url=data.nodes[k].url;


                                li1.innerHTML = "<span id='tree'>"+data.nodes[k].text+"</span>";

                ul.appendChild(li1);
                li.appendChild(ul);

                               var temp = defid;
                               defid = data.nodes[k].id;
                               treeDate(data,defid,flag+1,li1,ul,data.nodes[k].parentId)
                               flag = flag-1;
                               defid = temp;
                       }
               }
       } 

}

[b]双击节点LOAD页面[/b]
双击触发BindEvents事件中嵌套的dblclick事件并LOAD进URL的页面

[b]节点被修改或新增删除后提交[/b]
页面新加了一个update node / leaf 链接<p class="update">update node / leaf</p>
修改后的Tree可通过点击此链接提交到后台Action 的saveTree()方法处理
[color=red]也可在页面关闭事件中增加提交的事件[/color]

相关javaScript代码:

$(".update").click(
        function(){
                var tree  = $('ul#tree1');
                var li = $('li');

                var actel=tree.find('span').get(1);
                var json="";;
                //alert($('ul#tree1').html());
                for(var i=0;i<li.length;i++){
                        var actel = tree.find('span').get(i);
                        var spanFlag = $(actel).attr('id');
                        if(actel&&spanFlag=="tree"){
                         var selfli=$(actel).parents('li:first');

                         var text = $(actel).text();
                         var id = selfli.attr('id');
                         var parentId = selfli.attr('parentId');
                         var url = selfli.attr('url');

                         json = json+"{'id':"+id+", 'isfolder':true ,'parentId':"+parentId+" ,'text':'"+text+"' ,'url':'"+url+"'},"
                }
                }
                json = "{'nodes' : ["+json.substring(0,json.length-1)+"]}";

                $.ajax({
                   type: "POST",
                   url: "tree!saveTree.action",
                   dataType: "json",
                   data: json,
                   success: function(json){
                    alert('submit success');
              treeDate(json,0,0,"","");
                   },
                   error:function() {alert('数据传送失败');}
             }); 



        }
)