Jquery.dynatree.js控件的应用

Jquery.dynatree.js控件的使用

1，在后台拼字符串产生json，json的格式为：[{title :"xxxx",  key: xerx, ,expand:true/false ,children:[{title:"yyyyy",key:eeee,expand:true},

{title:"zzzzz",key:dfds,expand:true}]}]。这么嵌套下去，实际使用时可以用StringBuffer这样拼字符的速度快些。expand:true时产生的树是展开的，当为false时树是闭合的。把这个json字符串放入map中在前台展示。（我用的springmvc框架）

2，引入css和js文件：dynatree/src/skin/ui.dynatree.css，dynatree/jquery/jquery-ui.custom.js，dynatree/jquery/jquery.cookie.js，

dynatree/src/jquery.dynatree.js。

3，在jsp中添加这样的div      <div name=test  style="width:170px;height:200px;overflow: auto ;background-color: white; border: #83BCF5 1px solid;" value="1">

4，在js中：

$(function(){   //这是为了在打开页面时就调用这个方法
        initTree();
         });

function initTree(){
         //初始化树状结构
        $("#test").dynatree({
            checkbox: true,
            // Override class name for checkbox icon, so rasio buttons are displayed:
            classNames: {nodeIcon: ""},
            // Select mode 3: multi-hier
            selectMode: 3,
            children: ${sjon}   //这个${sjon}就是后台保存在map中的json字符串
        });

}       

4，为该树添加全选与全部选操作：   

function selectAll(){    //全选
      $("#test").dynatree("getRoot").visit(function(node){
        node.select(true);
      });

}

function deSelectAll(){   //全不选
      $("#test").dynatree("getRoot").visit(function(node){
        node.select(false);
      });

}

5，把此树的key发送到后台的方法：

比如这个树在  id为form1的form中，var formData = $("#form1").serializeArray();//这为了把树以外的内容序列化和树的数据一起发送

var tree1;

         tree1 = $("#test").dynatree("getTree");

        formData = formData.concat(tree1.serializeArray());    //这就把树的数据得到并和树之外的数据连在一起了。

然后把formData发送就over了。

 6，判断树是否有节点选择

$("#test).dynatree("getSelectedNodes").length==0表示没选择。