easyUI一些记录

最新推荐文章于 2020-06-18 14:22:34 发布

WriteDew

最新推荐文章于 2020-06-18 14:22:34 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/WriteDew/article/details/89854092

博客介绍了菜单、选项卡及相关事件处理功能。点击菜单选项可创建或显示选项卡，避免重复创建。还提及弹出窗口，onLoad事件用于加载远程数据并传递表格数据到表单，以及onContextMenu事件，右键点击节点时触发，可显示菜单并清除浏览器右键影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以菜单形式显示，并且点击菜单中的任意一项，会将节点传入创建一个选项卡，如果已经存在了选中的选项卡，则在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>