dtree ajax 右键
来源:互联网 发布:淘宝网店一颗心 编辑:程序博客网 时间:2024/05/21 17:08
最近项目需要用到树形结构 从网上搜了下找到了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 ajax 右键
- web开发dtree+右键
- dtree + Jquery 添加右键菜单
- dtree+右键菜单 完美结合
- ajax树形控件 Dtree
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单?求助
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单续
- dtree 取节点 右键菜单取节点
- dtree动态树+Javascript右键菜单
- dtree动态树+Javascript右键菜单
- dtree
- DTree
- Dtree
- dtree
- Dtree
- DTree
- dtree
- dtree
- cat指令详解
- Android启动init.c
- FileVersionInfo类显示dll信息
- cmd 命令大全
- Eclipse开发前,常用设置
- dtree ajax 右键
- Excel导入数据库
- csdn没高手啊
- vs中的一些常用快捷键
- hdu1269 并查集 强联通
- ARM-Linux下ZLG7290 I2C驱动程序的编写
- 基础驱动相关的3个重要内核数据结构 -from ldd3
- 关于心理
- Eclipse中的visual editor 怎么下载和安装