EasyUI基础实现一些功能，仅jsp代码

最新推荐文章于 2021-04-22 21:57:11 发布

WriteDew

最新推荐文章于 2021-04-22 21:57:11 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/WriteDew/article/details/89840708

版权

EasyUI中文帮助文档：
链接：https://pan.baidu.com/s/1WCcL6bsn1puoF6YIiOH-Sw
提取码：srqg
jquery-1.7.2:
链接：https://pan.baidu.com/s/1HyuFkvsGH5EFpVwT8MGudQ
提取码：fggd
easyUI需要的引入文件:
链接：https://pan.baidu.com/s/1BCSI1uTqGwziPE19CW38Lw
提取码：h3qf

主页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/js/easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="/js/easyui/themes/icon.css">   
<script type="text/javascript" src="/js/easyui/jquery-1.7.2.js"></script>   
<script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript">
$(function(){
	$('#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.filenam
				    
				}); 	
			}else{
				$('#main_tabs').tabs('select',node.text);
				
			}
		}
	});
})
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'管理系统 ',split:false" style="height:100px;">
    	<div style="width:400px;height:70px;float:left;font-size:20px;font-weight:bold;line-height:70px;padding-left: 20px;">
    	管理系统 
    	</div>
    	<div style="width:200px;height:70px;float:right;font-size:10px;font-weight:bold;line-height:70px;">
    	你好，${user.username},欢迎登录！
    	</div>
    </div>   
    <div data-options="region:'south',title:'底部声明',split:false" style="height:100px;">
    <div style="height:70px;line-height:70px;text-align:center;color:gray;">
    	Coryright &copy; 2019 lalala
    </div>
    </div>   
    <div data-options="region:'west',title:'菜单',split:false" style="width:200px;">
   	 <ul id="main_tree"></ul>  
    </div>   
    
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
    
    <div id="main_tabs" class="easyui-tabs" style="width:500px;height:250px;"data-options="fit:true">   
    	<div title="首页" style="padding:20px;" >   
        	   首页    
  	  	</div>   
  
    	   
	</div>  
    
    </div>   
</body> 
</html>

href:node.attributes.filename
//建立一个Attributes类，然后放入想要添加的一些非tree认识的属性.比如在这个添加的是filename.
//后面会采取
public List<Menu> selAll() {
		List<Menu> list = menuMapper.selAll();
		for(Menu menu:list){
			List<Menu> listChildren = menuMapper.selByPid(menu.getId());
			for(Menu child:listChildren){
				Attributes attr = new Attributes();
				attr.setFilename(child.getFilename());
				child.setAttributes(attr);
			}
			menu.setChildren(listChildren);

		}
		return list;
	}
//方式去给attributes中的filename赋值

public class Attributes {
	private String filename;

public class Menu {
	private int id;
	@JsonProperty(value="text")
	private String name;
	private List<Menu> children;
	private int pid;
	
	private boolean checked;
	
	public boolean isChecked() {
		return checked;
	}
	public void setChecked(boolean checked) {
		this.checked = checked;
	}
	//就一个自定义属性
	//@JsonProperty("attributes")
	private Attributes attributes;
	private String filename;

只做了第一个功能的实现，点击该功能会跳转到role.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function abc(obj){
	//弹出窗口
	$('#role_dialog').dialog({    
	    title: '分配权限',    
	    width: 400,    
	    height: 200,    
	    closed: false,    
	    cache: false,    
	    href: 'sys/privilege.jsp',    
	    modal: true,
	    onLoad:function(){
	    	$("#privilege_form :hidden:eq(0)").val($(obj).parent().parent().siblings("[field='id']").children().eq(0).html());
	    	$("#privilege_tree").tree({
	    		url:"showPrivilege?id="+$(obj).parent().parent().siblings("[field='id']").children().eq(0).html(),
	    		checkbox:true
	    	})
	    }
	});    

}
	
$(function(){
	$('#role_table').datagrid({    
	    url:'/showRole',    
	    columns:[[    
	        {field:'id',title:'编号',width:100,hidden:true},    
	        {field:'name',title:'角色名称',width:100},    
	        {field:'sort',title:'排序id',width:100},
	        {field:'remark',title:'备注',width:100},
	        {field:'dsd',title:'操作',width:100,
	        	formatter: function(value,row,index){
					return '<a id="role_privlege_a" href="#" οnclick="javascript:abc(this);return false;">分配权限</a>';
	        	}

	       	}
	        
	    ]],
	    pagination:true,
	    pageList:[2,4,6],
	    fitColumns:true,
	    striped:true,
	    
	    toolbar: [{
			iconCls: 'icon-add',
			text:'增加',
			handler: function(){alert('正在建设中')}
		},'-',{
			iconCls: 'icon-remove',
			text:'删除',
			handler: function(){
				if($('#role_table').datagrid('getSelections').length==1){
					//弹出窗口
					$('#role_dialog').dialog({    
					    title: '删除角色',    
					    width: 400,    
					    height: 200,    
					    closed: false,    
					    cache: false,    
					    href: 'sys/role_remove.jsp',    
					    modal: true,
					    onLoad:function(){
					    	$("#role_remove_form :hidden:eq(0)").val($("#role_table").datagrid("getSelected").id);
					    }
					});    
				}else{
					$.message//弹出窗口
					$('#role_dialog').dialog({    
					    title: '删除角色',    
					    width: 400,    
					    height: 200,    
					    closed: false,    
					    cache: false,    
					    href: 'sys/role_remove.jsp',    
					    modal: true,
					    onLoad:function(){
					    	$("#role_remove_form :hidden:eq(0)").val($("#role_table").datagrid("getSelected").id);
					    }
					});    r.alert("系统信息","请选择<b>一行</b>");
				}
				
			}
		},'-',{
			iconCls: 'icon-edit',
			text:'修改',
			handler: function(){
				if($('#role_table').datagrid('getSelections').length==1){
					//弹出窗口
					$('#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);
					    }
					});    
				}else{
					$.messager.alert("系统信息","请选择<b>一行</b>");
				}
				
			}
		}]

	});  
	
})
</script>

<table id="role_table"></table>
<div id="role_dialog"></div>  
</body>
</html>

role.jsp中不同的功能也会有不同的实现，修改功能需要跳转到role_edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	$(function(){
		$("#role_edit_submit").click(function(){
			$('#role_edit_form').form('submit', {    
			    url:'update',    
			    onSubmit: function(){    
			        
			    },    
			    success:function(data){    
			       if(data==1){
			    	   $.messager.show({
			    			title:'系统消息',
			    			msg:'修改成功',
			    			timeout:3000,
			    			showType:'slide'
			    		});

			    		//将弹出窗关闭
 			    		$("#role_dialog").dialog("close");
 		    	   		$("#role_table").datagrid('reload'); 
			       }else{
			    	   $.messager.alert("系统信息","修改失败，请重新修改");
			       }
			    }    
			}); 
		})
	})
</script>
<div style="padding:10px">
系统设置>>角色管理
</div>
<hr/>

<form action="" method="post" id="role_edit_form">
<input type="hidden" name="id"/>
<table>
	<tr>
		<td>角色名称</td>
		<td><input type="text" name="name"/></td>
	</tr>
	<tr>
		<td>角色排序</td>
		<td><input type="text" name="sort"/></td>
	</tr>
	<tr>
		<td>角色备注</td>
		<td><input type="text" name="remark"/></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><a id="role_edit_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a></td>
	</tr>
</table>
</form>
</body>
</html>

删除功能由role_remove.jsp实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
$(function(){
	$("#role_remove_submit").click(function(){
		$('#role_remove_form').form('submit', {    
		    url:'delete',    
		    onSubmit: function(data){    
		    },    
		    success:function(data){
		    	   
		       if(data==1){
		    	   $.messager.show({
		    			title:'系统消息',
		    			msg:'删除成功',
		    			timeout:3000,
		    			showType:'slide'
		    		});

		    		//将弹出窗关闭
			    		$("#role_dialog").dialog("close");
		    	   		$("#role_table").datagrid('reload'); 
		       }else{
		    	   $.messager.alert("系统信息","删除失败");
		       }
		    }    
		}); 
	})

		
		$("#role_remove_but").click(function(){
			$("#role_dialog").dialog("close");
 	   		$("#role_table").datagrid('reload'); 
		}) 
	
	})
	
</script>
<form action="" method="post" id="role_remove_form">
<input type="hidden" name="id">
<div style="text-align: center">
	<br><br>
	<b style="font-size: 17px;">确认删除？</b>
	<br><br><br>
		<input type="button" id="role_remove_submit" value="确认"> 
	<input type="button" id="role_remove_but" value="取消"> 
</div>

	

</form>
</body>
</html>

后台代码是查询和简单修改和删除。