最近项目需要用到树形结构 从网上搜了下找到了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>
分享到:
相关推荐
dtree带右键弹出事件,完整代码 整了好几天~~一直以为不能实现呢~~ 最后还是搞出来了~~开心呀
很辛苦再找到的dtree+鼠标右键很辛苦再找到的dtree+鼠标右键
自己封装的三种树形结构,一种是原始dtree,第二种是dtree结合的jquery封装的右键dtree树,第三种修改的dtree源码复选框树形菜单,附件中都已经标注好了,欢迎大家使用。
web开发,中超级简单的 树形节点+右键菜单效果 (之前在网上也查了很多资料,但是,不是特别理想,所以自己是实现了一个简单易懂的方法,供大家参考)
由于项目需要,需要对DTree通过右键菜单进行增删查改,我根据网上的资料和自己的需求进行修改的,希望对大家有所帮助。
dtree用法带右键菜单,带复选框
ajax,servlet动态加载dtree
dtree+ajax异步加载树,请按照自己的需求修改
dtree动态树 Javascript右键菜单
dtree 修改 AJAX动态载入 简单的测试环境,不需要复杂的其他东西和数据库设计 下载放到TOMCAT下就可以使用。稍微修改就能用到自己的应用里面。 注释在 dtree.js 中的 dTree.prototype.o 方法里面。 修改了 dTree...
dtree树和菜单我都做好了,关键就是怎么在树结点上调用菜单. dtree树的URL已经设定,并传递相应的参数.
dtree动态树+Javascript右键菜单
带右键菜单跟checkbox的Dtree实现右键添加修改删除树的节点并与数据库作关联,工程内包含数据库建库建表脚本由于在new dtree的时候有点错误请大家下载完后自行修改
使用dtree做右键菜单。proto.menu关键代码就在这里了
一个 LuanmadAjaxDtree实用例子 实现技术:spring+struts2+hibernate+json+dtree 自定义右键控制、排序
dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar
dtree所需要的dtree.css和dtree.js文件,包含小图标和API以及案例
dtree.zip|dtree.zip|dtree.zip