jquery树形插件 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表示没选择。二、以下是自己做的一个小列子实例，树形分类。树形分类的代码就不提供了。
<-- view 层-->
<script src="__JS__/dynatree/jquery/jquery-ui.custom.js" type="text/javascript"></script>
<link href="__JS__/dynatree/src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="__JS__/dynatree/src/jquery.dynatree.js" type="text/javascript"></script>
<!--添加 expanded 类是为了初始化页面，默认打开就展开某些项-->
<div id="tree">
<ul id="treeData" >
<?php foreach ($cateTree as $key => $cate) :?>
<li id="{$cate['id']}" title="" class="li_{$cate['id']} top expanded" data-cateid="{$cate['id']}" >{$cate['cateName']}
<a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $cate['id'];?>');">
<i class="iconfont"></i>
</a> |
<a class="text-muted" href="javascript:deleteCate('<?php echo $cate['id'];?>');" onclick="return nat_del()">
<i class="iconfont"></i>
</a>
<ul>
<?php foreach ($cate['child'] as $key => $child) :?>
<li id="{$child['id']}" class="li_{$child['id']}" data="code:{$child['id']}" >{$child['cateName']}
<a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $child['id'];?>');">
<i class="iconfont"></i>
</a> |
<a class="text-muted" href="javascript:deleteCate('<?php echo $child['id'];?>');" onclick="return nat_del()">
<i class="iconfont"></i>
</a>
<ul>
<?php foreach ($child['child'] as $key => $last) :?>
<li id="{$last['id']}" class="li_{$last['id']}" data="code:{$last['id']}" >{$last['cateName']}
<a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $last['id'];?>');">
<i class="iconfont"></i>
</a>|
<a class="text-muted" href="javascript:deleteCate('<?php echo $last['id'];?>');" onclick="return nat_del()">
<i class="iconfont"></i>
</a>
<ul>
<volist name="last['child']" id="four" >
<li id="{$four['id']}" class="li_{$four['id']}" data="code:{$four['id']}">{$four['cateName']}
<a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $four['id'];?>');">
<i class="iconfont"></i>
</a>
|
<a class="text-muted" href="javascript:deleteCate('<?php echo $four['id'];?>');" onclick="return nat_del()">
<i class="iconfont"></i>
</a>
<ul>
<?php foreach ($four['child'] as $key => $five) :?>
<li id="{$five['id']}" class="li_{$five['id']}" data="code:{$five['id']}">{$five['cateName']}
<a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $five['id'];?>');">
<i class="iconfont"></i>
</a>
|
<a class="text-muted" href="javascript:deleteCate('<?php echo $five['id'];?>');" onclick="return nat_del()">
<i class="iconfont"></i>
</a>
<?php endforeach;?>
</ul>
</volist>
</ul>
<?php endforeach;?>
</ul>
<?php endforeach;?>
</ul>
<?php endforeach;?>
</ul>
</div>
<scsript type="text/javascript>
//初始化树形，（备注：如果初始化默认页面中要展开某些项时，在标签中要添加"expanded"类。）
$(function(){
$("#tree").dynatree({
}
});
})
</script>
