<!doctype>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#tree li{}
#tree li ul{display:none}
</style>
<script type="text/javascript">
$(function(){
var $tree = $("#tree")//获取tree
var $a_tops = $tree.children("li").children("a")//找到tree下第一层菜单
$a_tops.bind("click", function(){//为第一层菜单绑定事件
var $this = $(this).next("ul")
if($this.length >0){//判断当前第一层菜单下是否有第二层菜单
$this.is(":hidden") ? $this.show() : $this.hide()//根据状态判断是隐藏还是现实第二层菜单
}
})
})
</script>
</head>
<body>
<ul id="tree">
<li><a href="javascript:void(0)">保险单管理</a>
<ul>
<li><a href="">添加报销单</a></li>
<li><a href="">审核报销单</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">我要采购</a>
<ul>
<li><a href="">信心收件箱</a></li>
<li><a href="">信心发件箱</a></li>
</ul>
</li>
</ul>
</body>
</html>
一个带有右键 *** 作的树形菜单
$(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 : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样
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",//右键d出菜单的此项 *** 作图标
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)
}
})
这个应该不难吧。。你先去网上下个Dtree的目录树例子（如果找不到，我可以发个你）。在后台传一个list进来。这个list保存的对象有个属性是子节点的list。在后台处理好后，在前台用c标签遍历这个list，可以根据varstatus.index来控制tree的节点。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）