EasyUI 基本使用

最新推荐文章于 2022-09-16 10:51:41 发布

客行.

最新推荐文章于 2022-09-16 10:51:41 发布

阅读量353

点赞数 3

文章标签： html javascript web

本文链接：https://blog.csdn.net/m0_65725031/article/details/124644324

版权

今天主要教大家使用EasyUI去制作网页页面，其实EasyUI在网页中适合用于后端，也就是管理员页面使用，因为相对来说EasyUI并不是那么好看。

EasyUI 基本使用

去搜索EasyUI官网提供了代码，根据需要将代码复制过去
在使用EasyUI需要将包导进去
包导进去后在jsp文件中，还需要导入该四条语句

 <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">

EasyUI代码实操

使用EasyUI实现菜单功能

index.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
 <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">
  
<title>首页</title>
</head>

<body class="easyui-layout">   
    <div data-options="region:'north',title:'网站导航栏',split:false" style="height:100px;"></div>   
    <div data-options="region:'south',title:'友情链接',split:false" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单'" style="width:300px;">
    <ul id="tt"></ul>
    </div>   	`
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body>  

<script>
   //tree构建方法
     $("#tt").tree({
    	 url:"sidebarTree.jsp",//远程数据的地址
    	 method:"POST",//访问方式
    	 lines:true,//显示虚线 
    	 onClick: function(node){
    		 //node.text拿到的是每一个节点的名字
    		 //node.attributes.pid拿到attributes下的pid的值
    		
    		if(node.attributes.pid){
    		console.log("你是小彩蛋")
    		}else{
    			 //0本身就是false
    		console.log("你是大菜单");
    		}
    		}

     })
    

</script>

</html>

sidebarTree.jsp代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
[{    
    "id":1,    
    "text":"商品管理",    
    "iconCls":"icon-save",    
    "attributes":{
    "pid":0
    },
    "children":[{    
       "id":2,
       "text":"商品增加"
    },
    {    
        "id":3,
        "text":"商品修改",    
       "state":"closed",     
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100,
            "pid":1
        },
        "children":[{
        "id":4,
        "text":"食品",
         "attributes":{    
            "pid":1
        }
        },{
        "id":5,
        "text":"电器",
         "attributes":{   
            "pid":1  
        }
        }
        ]
       
    }]    
},{    
    "id":10,
    "text":"类别管理",    
    "state":"closed",
     "attributes":{    
      "pid":0  
        },   
    "children":[{   
        "id":11,
        "text":"类别增加",
         "attributes":{    
      "pid":10
        }
    },{    
       "id":12,
        "text":"类别修改",
         "attributes":{    
      "pid":10 
        }
    }]    
}]

今天的学习就到这里啦！！！

客行.

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI 基本使用

今天主要教大家使用EasyUI去制作网页页面，其实EasyUI在网页中适合用于后端，也就是管理员页面使用，因为相对来说EasyUI并不是那么好看。EasyUI 基本使用去搜索EasyUI官网提供了代码，根据需要将代码复制过去在使用EasyUI需要将包导进去包导进去后在jsp文件中，还需要导入该四条语句 <script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js">.
复制链接

扫一扫