easyui02:前端工作

最新推荐文章于 2024-05-21 23:21:19 发布

小陈爱吃糖- T L

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量196

点赞数

分类专栏： easyui 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_62735525/article/details/124580095

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先通过一张图来了解到一些前端工作

通过上一篇文章中的 API文档我们可以将其运用到代码中去

index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入公共页面 -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$('#myTree').tree({    
		    url:ctx+'/data/tree_data1.json' ,//请求地址 Ajax
		    animate:true ,//折叠或者展开的时候是否有动画效果
		    onDblClick: function(node){
				//alert(node.text);  // 在用户双击的时候提示
				
				//拿到后代节点的集合
				var cs = $('#myTree').tree('getChildren',node.target);
				//alert(cs);
				if(cs.length==0){//没有后代节点
					var f = $('#myTab').tabs('exists',node.text);
					//判断是否存在
					if(!f){//说明不存在
						//新打开一个选项卡(tab页）
						$('#myTab').tabs('add',{    
				    	    title:node.text,//标题
				    	    content:node.text, //内容   
				    	    closable:true, //是否可关闭
				    	    /* tools:[{    
				    	        iconCls:'icon-ok',    
				    	        handler:function(){    
				    	            alert('想干啥就干啥');    
				    	        }    
				    	    }]*/
				    	    iconCls:node.iconCls
				    	});  
					}
					else{//说明存在 让其对应选中
						$('#myTab').tabs('select',node.text);
					}
				}
		    }
		}); 
	})
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:85px;text-align:center;">
    <h1>后台书籍管理</h1>
    </div>   
    <div data-options="region:'south',split:true" style="height:60px;text-align:center;">
     	<b>&copy;玉渊工作室所有,未经允许不可擅自使用</b>
    </div>   
    <div data-options="region:'west',title:'功能导航',split:false" style="width:200px;">
    	<!--左侧  tree控件  -->
    	<ul id="myTree" class="easyui-tree">   
   			
       	
		</ul>  
    	
    	
    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#fff;">
    	<!--中间的tab控件  -->
	    <div id="myTab"  data-options="pill:true"  class="easyui-tabs" style="width:100%;height:100%;">   
	    <div  data-options="iconCls:'icon-application-home'" title="首页" style="padding:20px;display:none;">   
	        <img src="images/1.jpeg" width="100%" height="100%">  
	    </div>   
	    
</div> 
    
    
    </div>   
</body> 
</html>

head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path =  request.getContextPath();
	//System.out.print(path); /easyui01
	request.setAttribute("ctx",path);//${ctx}
	//String a = (String) request.getAttribute("ctx");
	//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
	var ctx = '${ctx}';
</script>
<!--引入easyui的css  -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<!--引入jQuery类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--引入easyui类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!--引入easyui的语言包 支持中文 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

效果图：

左侧的数据来自easy案例中的JSON

[{
	"id":1,
	"text":"My Documents",
	"iconCls":"icon-heart",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend",
			"iconCls":"icon-chart-organisation"
		},{
			"id":112,
			"text":"Wife",
			"iconCls":"icon-book"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

小陈爱吃糖- T L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui02:前端工作

首先通过一张图来了解到一些前端工作通过上一篇文章中的 API文档我们可以将其运用到代码中去index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="common/head.jsp" %><!DOCTYPE html>&.
复制链接

扫一扫