以菜单形式显示,并且点击菜单中的任意一项,会将节点传入创建一个选项卡,如果已经存在了选中的选项卡,则在main_tabs显示选中的选项卡,而不是再创建新的。
$('#main_tree').tree({
url:'/showMenu',
onClick:function(node){
if($('#main_tabs').tabs('getTab',node.text)==null){
$('#main_tabs').tabs('add',{
title:node.text,
selected:true,
closable:true,
//只能引进来<body>标签的内容
href:node.attributes.filename
});
}else{
$('#main_tabs').tabs('select',node.text);
}
}
});
<div id="main_tabs" class="easyui-tabs" style="width:500px;height:250px;"data-options="fit:true">
<div title="首页" style="padding:20px;" >
首页
</div>
</div>
弹出窗口
onLoad:在加载远程数据时触发。
下面onload中代码的意思是将选中id=role_table的表格选中的这一行的数据传递给id=role_edit_form 这个表单。
$('#role_dialog').dialog({
title: '修改角色',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'sys/role_edit.jsp',
modal: true,
onLoad:function(){
$("#role_edit_form :text:eq(0)").val($("#role_table").datagrid('getSelected').name);
$("#role_edit_form :text:eq(1)").val($("#role_table").datagrid("getSelected").sort);
$("#role_edit_form :text:eq(2)").val($("#role_table").datagrid("getSelected").remark);
$("#role_edit_form :hidden:eq(0)").val($("#role_table").datagrid("getSelected").id);
}
});
<div id="role_dialog"></div>
显示菜单
onContextMenu:在右键点击节点的时候触发。
e.preventDefault();:清除浏览器右键影响
$(this).tree(‘select’,node.target);:选中该节点
$(’#contentCategoryMenu’).menu(‘show’,{
left: e.pageX,
top: e.pageY
});:显示菜单
$("#contentCategory").tree({
url : '/content/category/list',
animate: true,
method : "GET",
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#contentCategoryMenu').menu('show',{
left: e.pageX,
top: e.pageY
});
})
<div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
<div data-options="iconCls:'icon-add',name:'add'">添加</div>
<div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove',name:'delete'">删除</div>
</div>