dtree ajax 右键

zxingchao2005

浏览: 80447 次
性别:
来自: 北京

最近访客更多访客>>

linchers

xuewei97

xinger666

kanpiaoxue

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (83)

社区版块

存档分类

最近项目需要用到树形结构从网上搜了下找到了dtree .但是应用的时候为了提高用户的可操作性要给dree加上右键.决定用jquery右键插件.

具体整合如下：
下载dtree 和右键插件
引用需要的js文件和css
<script type="text/javascript" src="js/ui/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/dtree.js"></script>
<script type="text/javascript" src="js/contextmenu/rightMenu.js"></script>

<script>
var $menuContent=[
{id:'r1',cls:'play',text:'增加'},
{id:'r2',text:'编辑',disable:false},
{id:'r3',cls:'stop',text:'删除'}
];
var $bindFuns={
$bindings:{
'r1':function(t){
if(type==""){}
},
'r2':function(t){
alert(t.attr("id"));
},
'r3':function(t){
alert(t.attr("id"));
}
}
}
var exam;

$(
function(){
$.ajax
(
{
url:"/sitebao62p/page_listPage.do?ajax=true&siteId="+siteId,
cache:false,
type:"POST",
dataType:"text",
success:function(data){
_pages = new dTree('_pages','../dtree/img'); //创建树形结构
_pages.config.useCookies=false;
_pages.config.useLines=true;
_pages.config.useIcons=true;
_pages.add(0,-1,'Root');
data=eval(""+data+"");
$.each(data,function(index,item){
_pages.add(""+item.id+"",""+item.pid+"",""+item.pageName+"","javascript:treeNodeClick("+item.id+")",'','','',false);
});
$("#leftTabPageDiv_1").html(_pages.toString()); //渲染树形结构

exam=$.createContextMenu($("#rightMenu"),138,$menuContent,$bindFuns); //产生右键菜单
exam.bindParent($("#leftTabPageDiv_1"),"c","l"); //绑定右键菜单
}
}
);
}
);

//点击树形结构时 ajax读取子节点
function treeNodeClick(id){
//页面管理树形结构

_pageId=id;
$.ajax
(
{
url:"/sitebao62p/page_getChildPageBypageId.do?pageId="+id,
type:"POST",
cache:false,
dataType:"text",
success:function(data){
data=eval("("+data+")");
$.each(data,function(index,item){
_pages.add(""+item.id+"",""+item.parentId+"",""+item.pageName+"","javascript:treeNodeClick("+item.id+")",'','','','',false);
});
$("#leftTabPageDiv_1").html(_pages.toString());
_pages.openAll();
}
}
);
}
}
}

</script>

<body>
<div id="rightMenu" style="border:1px; position: absolute;"></div> 
<div id='leftTabPageDiv_1'></div> //树形结构载体

我们还需要下dtree的dtree.js找到他的这一行 (dtree.js 140行)
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';

改为:
str += '<a c="l" id="s' + this.obj + node.id + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';

</body>